- Coding Methodology
- 第56回 レスポンシブWebデザイン テーブル小技
第56回 レスポンシブWebデザイン テーブル小技
昨今、スマートデバイスへの対応の一つとしてとてもメジャーになってきているMedia QueriesによるレスポンシブWebデザインですが、同じ情報要素を複数のパターンとしてレイアウトすることに悩まされているデザイナーの方も多いのではないでしょうか。
例えば、<table>タグを使ってのお馴染みの表組みは、PC画面ではストレス無く閲覧する事が出来ますが(01)、スマートデバイスでは、画面が小さくなり、テキストなどが縦に長くなってしまうため(02)、読みにくくなってしまうケースがあります。今回は、それを解決するちょっとしたテクニックをご紹介します。
- テーブルのスタイルを規定する
-
まずは01や02のテーブルレイアウトを、下記のCSSサンプルコードで実現します。(項目A、項目Bのセルをth要素とします。)
先述の通り、PC画面ではストレス無く閲覧する事ができますが、画面の小さなスマートデバイスでは、02のように縦に伸びて読みにくくなってしまいました。
- th、tdをblock要素に
-
横並びになったth、tdは、block要素にすることで、03のように、縦並びにする事が出来ます。
上記のCSSサンプルコード②は、Media Queriesの@media規則を用いて、ウィンドウ幅が480px以下の場合のスタイルを規定しています。スマートフォンだけでなく、CSS3に対応しているブラウザなら、ウィンドウ幅を480px以下に縮小する事で確認することができます。
非常に利便性は高いけれど、スマートデバイスでは扱いに難のあるテーブルですが、スマートデバイスではblock要素に切り替える事で、より可読性の高いレイアウトを実現することが出来るようになりました。
