レスポンシブ:
Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。
引用:レスポンシブデザインとは 【 RWD 】 【 responsive design 】 – 意味/解説/説明/定義 : IT用語辞典
レスポンシブデザインは便利ですが、全てがうまくいくわけでなく、テーブルの対応など、やっかいなものもあります。
テーブルは「会社概要」に使われたり、また情報を整理するために使われたりと、多様な使われ方をしますが、モバイル表示の時に見づらいという弱点があります。
今日はそんなテーブルレイアウトをレスポンシブにするTipsです。
テーブルの形状をガッツリ変える
See the Pen zxwvqV by Tsukasa Nagata (@nt-uni) on CodePen.0
いかがでしょう? 650px以下にすると、テーブルの形状をかえて1列で表現します。ブラウザ毎横幅を縮めてみてください。(スマフォで見てる方ははじめから一列表示になると思います…すみません)
表としてボリュームが少なければ、モバイルでも確認しやすいこの形がオススメです。
実装
実は、テーブルタグを使わないで表現しています。
<table>
の代わりに<section class="table">
といった具合です。
そして、以下のCSSでテーブルタグと同様の表現を実現します。
.table { display: table }
.tr { display: table-row }
.thead { display: table-header-group }
.tbody { display: table-row-group }
.tfoot { display: table-footer-group }
.col { display: table-column }
.colgroup { display: table-column-group }
.td, .th { display: table-cell }
.caption { display: table-caption }
そして650px以下のときはこのように、
@media (max-width: 650px) {
.table { display: block }
.tr { display: block }
.thead { display: block }
.tbody { display: block }
.tfoot { display: block }
.col { display: none }
.colgroup { display: none }
.td, .th { display: inline-block }
.caption { display: block }
}
※ 上記のCSSはベースとなる部分だけなので、列のタイトル表示や、背景色などは別途CSSで指定する必要があります
まとめ
いかがでしたか?
モバイルでの表示を無視できない今、そのままのレスポンシブでは万能でないコンポーネントもあります。このような手法を用いながら、抜け目のないレスポンシブデザインを目指したいですね!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事