[CSS]スマホ制作で大活躍！？table-cellで要素を横並びに配置する方法

css

前回、要素を横並びにするのに inline-block　を使ったんですが、なんと「display:table-cell」でも同じことができます。

IE8からでないと利用できなんですが、スマホなどはモダンブラウザなので問題なく使えるので、嬉しいところです。

display:table-cell を利用するメリットとは？

「table-cell」のほかに「table」というプロパティもありますが、これらは要素をtableのように扱えるようになるので、非常に便利です。

  1. 1:要素をtableタグのように扱えるので、横並びも簡単
  2. 2:td要素のようにCSSで縦の位置（vertical-align）も使うことができる
  3. 3:要素を均等幅で配置できる

といった感じでfloatよりも簡単に横並びにできるのはいいかなぁと。

display:table-cellで横並びにする方法

今回は、スマホとかでも使われてそうな可変タイプのナビゲーションを横並びにしてみます。

htmlのソースコード

よくある単純なhtmlのコードです。ul要素を使い、a要素で各アイテムを実装。

CSSコード

まずは親の要素に display:table を指定して、子要素に display:table-cell を指定することで横並びになります。

＊必要最低限のみの記載してます。


	ul#nav{
    　　display:table;    
　　　　}

　　　　ul#nav li{
    　　display:table-cell;
　　　　}

要素を均等配置、縦の位置を調整する方法

縦位置を調整する

display:table-cellを指定しているのでテーブルのセルと同じく vertical-align:middle　で要素を縦中央に配置できます。


　　　　ul#nav li{
    　　display:table-cell;
	  vertical-align:middle;
　　　　}

要素を均等配置する

display:table を指定している親要素にtable-layout:fixedを指定することで、子要素が自動的に均等配置されます。

ただし、親要素に幅の指定をしてあげる必要があります。


　　　　ul#nav{
		display:table;
		table-layout: fixed;
		width:100%;   
　　　　}

といった感じですごく便利なdisplay:table-cellです！サンプルではスマホとかでありそうな画像とテキストの横並びのリスト表示などにも使えそうですね。