こんにちは、ECプロデュース部の岡本です。
今回は「要素を段落ちさせずに並べること」ができる便利なプロパティ「table-cell」について紹介します。
RWDグローバルナビの課題：段落ち
サイトをレスポンシブする際、必ず問題になるのが「グローバルナビの扱い方」です。
floatやinline-blockで作成した場合、全ての要素で単位を「％」に指定しないと「段落ち」が発生します。
しかし上の画像のように一部のコンテンツの横幅を固定化させたいケースもあります。
こんな時に使いたいのが、「table-cell」です。
tableレイアウトを実現する：table-cell
「table-cell」は要素を「tdタグ」と同じにするプロパティで、displayにて設定します。
親要素に「display:table」を設定する必要がありますが、この２つだけでほぼtableタグと同じ動きを実現させることができるのです。
固定化させる要素「以外」に「display: table-cell」を設定し、固定化させる要素に「width: 200px」の様に数値を設定します。
これだけで段落ちすることなく、固定化させた要素以外がレスポンシブに幅を変えていくグローバルナビを作ることができます。
サイドバーなどにも応用可能！
このtable-cellを応用することで、「固定幅のサイドバーを持つレイアウト」も実現できます。
各プロパティの設定はグローバルナビとほとんど同じです。
- 親要素に「display: table」を設定
- 固定化させる要素に「width:ピクセル幅」を設定
- その他の要素に「display: table-cell」を設定
という３ステップで実装できます。
またtable-cellのもう１つの便利な点は、「table-cell要素だけで%指定ができる」ということです。
3カラムのレイアウトを作る際、それぞれのwidthを以下のように設定できます。
ピクセル指定した要素の幅を考慮せず、残りの要素の幅＝100％として計算をしてくれます。
そのためレイアウトを設定する際、細かな計算をすることなく調整することができます。
table-cell動作サンプル
実際にtable-cellを使用したページを作成しました。
グローバルナビの「home」とサイドバーの「200px固定エリア」の2箇所が固定化され、残りの要素がレスポンシブに動作します。
スマートフォン対応や背景色の設定などのプロパティが混ざっていますが、基本的には上記の記述をそのまま設定して作成しています。
まとめ
CSSの登場によって「バッドプラクティス」扱いされやすい「tableでのレイアウト」。
しかし今回の様に、それぞれの特性を活かすことでよりリッチなレスポンシブレイアウトを実現させることができます。
なお、記事リストや商品リストのような「複数行になるコンテンツ」ではレイアウトが崩れてしまいますのでご注意下さい。
