質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

996閲覧

table要素をスマホだけ上下で表示させたい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/04/18 08:03

編集2017/04/18 12:15

ブログの記事下にtable要素でプロフィールを作りました。パソコンでの表示は良いのですが、スマホで表示させると崩れて表示されています。スマホの場合だけ2つの要素(<td>)を上下に表示させたいです。

ネットで検索したところCSSに

CSS

1display: inline-block; 2```と記述すれば良い、との見解が多かったのですが、それではうまくできませんでした。 3 4現在、table要素のCSSはこのようになっています▼ 5```CSS 6table {border-collapse: separate; border-spacing: 0; margin: 1em 0 2em 0;} 7caption, th, td {font-weight: normal; text-align: left;}

試してうまくいかなかったCSSコードは以下です▼

CSS

1table {border-collapse: separate; border-spacing: 0; margin: 1em 0 2em 0;} 2caption, th, td {font-weight: normal; text-align: left; display: inline-block;}

参考までにページURLを記載します▼
http://seekerbase.blog/slik-sprint-mini-ii

どんな情報が必要かわからないので、必要な情報があれば教えていただきたいです。
宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/04/18 09:33

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、上手くいかなかった、というCSSもあわせて追記してください。
guest

回答3

0

スマホというか、上下に分けて表示してほしい横幅の場合に
tdに対して display:block; すればいいと思います。

メディアクエリなどで対応してください。

投稿2017/04/18 12:21

shaak

総合スコア607

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

わたくしも、kei344様と同じように、テーブルは絶対に使う局面ではないと考えます。
テーブルは複数項目 対 複数値(数値など)で初めて成立して、
例えば、会社概要や問合せフォームのような、1対1のものでは使わないですね。

dl/ 左カラム
dt/ 人物写真(altがタイトル)
dd/ul/li SNSボタン(その人の人となりみたいなものなので、説明と捉えられる)
div(or section)/ 右カラム
hn/ 名前
p/ 文章

こんなところかと…

それはそうと、Webクリエイターさまなんですね。
私の中では、Webに携わるなかで、0.1%もいないと認識している方。

creatorとは
創造者、創作者、創設者、造物主、神、(劇の役に対する)新型創始者、(新意匠)考案者

と、Weblio辞書さんはおっしゃっております。
おそらく、創作者という意味で使われているのだと思いますが、創作とは、
今までなかったものを生み出すことですので、他の方が作ったScriptや、それに付随する技術を
用いてWebサイトを制作しても、創作とはなりません。
また制作においては、クライアント様の依頼があって成立するので、どんなに奇抜なデザインでも、
完全に創作とは言えないんですね。
これは、肖像画を依頼されて描いていた職業画家が、依頼を受けずに好きなものを描いて
アーティストになっていったことから分かると思います。

ロバート秋山様にディスられないよう、お気を付けください。

投稿2017/04/18 13:36

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

「試してうまくいかなかったCSS」で問題なくテーブルを「上下に表示」可能です。
書く場所の問題なのでは。

また、そもそもレイアウトにテーブルを使うのが推奨されていないので、組み方を考え直しても良いのでは。

投稿2017/04/18 12:39

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問