【HTML/CSS】[tableタグ]横並びテーブルを1列にしてレスポンシブ対応する。SITES士業サイトWORKSVOICENEWSBLOGWordPressDesignProgrammingNoteCONTACTプライバシーポリシーRSSProgramming【HTML/CSS】[tableタグ]横並びテーブルを1列にしてレスポンシブ対応する。2022.11.23ホームBLOGProgramming【HTML/CSS】[tableタグ]横並びテーブルを1列にしてレスポンシブ対応する。PostShareRSSこの記事のタイトルとURLをコピーするこんにちは。SaitoKouです。Webサイトのページ作成時、tableタグを使用して表を作成することはよくありますよね。料金表だったり、人物のプロフィールだったりと、情報を整理して表示するには表形式が見やすいです。PCでサイトを表示するときは違和感がなくても、スマホで表示すると画面のサイズが足りずに表の右端が切れてしまうことはよくあります。こんな表があったとします。</table></body>PCではこう表示されていても、とくに何も工夫をしなければ、スマホ表示の時にはこうなります。文字が改行されすぎてて、非常に見にくいですよね。これを、下の画像のようにします。CSSこれを実現するには、以下のスタイルを追記します。</style>th,td各要素をブロック要素にし、幅を100%とします。することで、各セルが一列にタテに並んでくれます!まとめテーブルのレスポンシブ対応はほかにもありますが、まずはこれが最も簡単な方法だと思います。テーブルの幅が長いときはこのように対応して、スマホでもきれいに見えるよう調整しましょう!みなさまのホームページやイメージがよくなるお手伝いをいたします。ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!WordPressデザインサービスは以下から承っております。2.1.1】フォント選択時(Typography)に日本語フォントを追加する。SOLARIS】グローバルメニューを右寄せにする方法。(T_ENDWHILE)を解決する。SOLARIS】グローバルメニューを右寄せにする方法。Twenty-One」トップページにおススメ記事一覧を表示2021.01.11【WordPressカスタマイズ】子テーマ作成方法まとめ2021.02.07コーポレート用サイトテンプレートを作成しました!2020.08.16今すぐ、より多くの方へ伝える準備を始めましょう。あなたの企業、あなたのコンテンツの魅力をたくさんの人に知ってもらうため、そのメインとなるデザインを作り始めましょう。apply.TOPWordPressについて、何でも聞いてください。SITES士業サイトWORKSVOICENEWSBLOGWordPressDesignProgrammingNoteCONTACTプライバシーポリシ。