【CSS】floatを使わずtable-cellを使って横並びにする方法

【CSS】floatを使わずtable-cellを使って横並びにする方法

以前に「ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法」という記事を書きました。

こちらの方法も便利なんですが、それよりももっと実践で活用できるtable-cellを使って横並びにする方法をソース付きでご紹介します!

目次

6回に渡る短期連載記事です。明日以降の記事もこちらでご紹介しておきます。

番外編ですが、table-cellを使う上で重要なテクニックを追記します。

table-cellを使って横並びにするメリット

要素を横並びにしたいとき、floatを使ったり、display: inline-blockを使ったりといろいろな方法がありますが、table-cellを使うと他の方法では出来ないいくつかのことが簡単に実装できます。

僕が特にメリットだと思ってるのはこちらの3点。

  • floatと違ってclear:bothしなくていい
  • 縦方向の中央寄せが出来る
  • borderやpaddingを使ってもはみ出ない

clear:bothしなくていいのはdisplay:inline-blockを使う方法と同様です。おそらくdisplay:table-cellの最大のメリットは「縦方向の中央寄せが出来る」ことでしょう。

そして、レスポンシブウェブデザインのサイトを作るときには「borderやpaddingを使ってもはみでない」のも嬉しいですね。計算しなくてもいいし、box-sizingも使う必要ありません。

あとはメリットとしてあげるほどじゃないですけど、書き方が簡単で、失敗しても変に崩れたりしないため初心者の方でも安心して使えると思います。

table-cellを使って横並びにした例

table-cellを使った基本的な書き方をご紹介します。

例として2つの要素を横に並べたもので、サムネイル画像が左に来て右にテキストというよく見るやつです。

▼こんな形のものです。記事一覧のデザインなどで使いやすいデザインです。
css-table-cell-01-image01

ソースはこんな感じ。

<div class="list-box">
  <a href="遷移先のパス">
    <div class="list-img"><img src="画像のパス" alt="サムネイル画像など"></div>
    <div class="list-text">テキストがここに入ります。</div>
  </a>
</div>
.list-box {
  display: table;
}
.list-img,
.list-text {
  display: table-cell;
  vertical-align: middle;
}

やってることはシンプルで、外側の箱にdisplay: table;、内側の箱それぞれにdisplay: table-cell;と書くだけ。

vertical-align: middle;を書くことで縦方向に中央寄せができます。

上記の縦方向の中央寄せに加えて、横方向にも中央寄せしたければtext-align: center;を加えてください。

あと、vertical-alignの「middle」を「bottom」や「top」に代えれば下に揃えたり上に揃えたりもできます。

HTMLの構造について補足

上記のHTMLの書き方は一例です。

  • 並べたい要素(画像とテキスト)はそれぞれをdivで囲う
  • 2つの箱をaタグで囲う
  • aタグをさらにdivで囲う

という構造になってます。

今回の例ではリストのul,liを使ってませんが、リストでももちろん大丈夫です。class名がlist-boxとなってるところのdivがliになって、aタグの内側は変更なしです。

お好きにアレンジしちゃってください。

最後に

table-cellの基本形だけをご紹介したためCSSのソースは必要最低限のものしか書いてません。

そのため実践的ではないソースなので、より具体的なソースを明日公開します。

キーワード
WEBデザイン