[意外と知らないCSS]スマホ制作に便利!display:table-cellを使った横並びのレイアウト

  • あとで読みたい人は…

スマホコーディングただいまガシガシ中の@cappeeです。

今回は「意外と知らない」というか、「便利だけどなかなか使えないCSS」かもしれませんね。

今回は、display:table-cell をご紹介します。

なかなか使えないと言った理由はIE8以降からの対応になるからです。

ただし、display:table-cell はスマートフォンサイトの制作にかなり便利なので覚えておくことは必須ですね。

display:table-cell で要素が簡単に横並び

table cell [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

display:table-cell とは、要素をテーブルのように表現することができるプロパティです。
親の要素に display:table を指定することでテーブルと同じような構造で指定することができます。

display:table-cell を指定した要素はテーブルのように高さが同じになります。

また、floatを使っていないためclearすることを考えなくてもすみます。

縦中央の指定が可能に

テーブルのセルと同じく vertical-align:middle を指定してセル内の要素を縦中央に配置することが可能です。

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

リキッドレイアウトにも最適

table cell2 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

セルに当たる要素のliの幅を固定しても、それ以外のliが可変になります。
特にスマートフォンサイトの制作では、画面を縦に見た場合と横に見た場合でリキッドレイアウトを考慮することが必要なので、とても相性が良く私も頻繁に使います。

table-layout:fixed で均等配置

table-layout:fixed を使えばセルの横幅を指定しなくても均等に配置することができます。
display:table を指定している親要素に記述してください。横幅の指定も必要です。

ul{
display:table;
table-layout: fixed;
width:100%;
}
li{
display:table-cell;
}

テーブル系のdisplayプロパティ

  • table … テーブルの表示スタイル
  • inline-table  … インラインテーブルの表示スタイル
  • table-row-group  … <tbody>要素のような表示スタイル
  • table-header-group  … <thead>要素のような表示スタイル
  • table-footer-group …  <tfoot>要素のような表示スタイル
  • table-row … <tr>要素のスタイル
  • table-column-group … <colgroup>要素のスタイル
  • table-column … <col>要素のスタイル
  • table-cell … <th>要素及び<td>要素のスタイル
  • table-caption … <caption>要素のスタイル

display:table-cell を使うメリットまとめ

  • テーブルのように要素を簡単に横並びできる
  • 縦の中央揃えができる
  • スマートフォンサイトのような横幅が可変なリキッドレイアウトに最適
  • table-layout:fixed を使えばセルの横幅を指定しなくても均等に配置できる

IE8以降からの対応で、IE6やIE7には対応していませんので注意が必要です。

スマホサイトでの使用例

すべてがモダンブラウザであるスマートフォンサイトでの制作には display:table-cell が大活躍です。

横幅100%のナビゲーションやタブ
table cell1 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト
画像など横幅が固定の要素とテキストなど可変の要素をリスト表示する
table cell3 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

いずれはスマホサイトだけでなく、PCサイトも色んなCSSが使えるようになるといいですよね!

[参考サイト]
CSS「display: table」と「display: table-cell」で出来ること
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利!

Pocket
article clipper [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

7 thoughts on “[意外と知らないCSS]スマホ制作に便利!display:table-cellを使った横並びのレイアウト

  1. Pingback: 知っておくと速い!CSS3に関する「便利」なまとめ | コムテブログ

  2. Pingback: CSS3のdisplay:tableとdisplay:table-cellでレイアウト – ウェブデザインラボ

  3. Pingback: すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ | コムテブログ

  4. Pingback: これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ | コムテブログ

  5. Pingback: 広告2つ横並びをCSSのdisplay:table-cellで配置!Bootstrapのpull-left(rigth)から変更

  6. Pingback: [コピペで使えるコード集]要素を横並びにするcss : web designy

  7. Pingback: » 保存版!CSS3で出来る素敵なデザインやアニメーションをまとめてみた

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>