コーディングメソドロジー

第56回 レスポンシブWebデザイン テーブル小技

昨今、スマートデバイスへの対応の一つとしてとてもメジャーになってきているMedia QueriesによるレスポンシブWebデザインですが、同じ情報要素を複数のパターンとしてレイアウトすることに悩まされているデザイナーの方も多いのではないでしょうか。
例えば、<table>タグを使ってのお馴染みの表組みは、PC画面ではストレス無く閲覧する事が出来ますが(01)、スマートデバイスでは、画面が小さくなり、テキストなどが縦に長くなってしまうため(02)、読みにくくなってしまうケースがあります。今回は、それを解決するちょっとしたテクニックをご紹介します。

テーブルのスタイルを規定する

テーブルのスタイルを規定する

まずは0102のテーブルレイアウトを、下記のCSSサンプルコードで実現します。(項目A、項目Bのセルをth要素とします。)

テーブルのスタイルを規定する

先述の通り、PC画面ではストレス無く閲覧する事ができますが、画面の小さなスマートデバイスでは、02のように縦に伸びて読みにくくなってしまいました。

th、tdをblock要素に

横並びになったth、tdは、block要素にすることで、03のように、縦並びにする事が出来ます。

th、tdをblock要素に

上記のCSSサンプルコード②は、Media Queriesの@media規則を用いて、ウィンドウ幅が480px以下の場合のスタイルを規定しています。スマートフォンだけでなく、CSS3に対応しているブラウザなら、ウィンドウ幅を480px以下に縮小する事で確認することができます。
非常に利便性は高いけれど、スマートデバイスでは扱いに難のあるテーブルですが、スマートデバイスではblock要素に切り替える事で、より可読性の高いレイアウトを実現することが出来るようになりました。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム