以前に「ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法」という記事を書きました。
こちらの方法も便利なんですが、それよりももっと実践で活用できるtable-cellを使って横並びにする方法をソース付きでご紹介します！
目次
6回に渡る短期連載記事です。明日以降の記事もこちらでご紹介しておきます。
- 【CSS】floatを使わずtable-cellを使って横並びにする方法 ←今回はこれ
- 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法
- 【CSS】table-cellを使って要素を均等に配置する方法
- 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法
- 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法
- 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法
番外編ですが、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つの要素を横に並べたもので、サムネイル画像が左に来て右にテキストというよく見るやつです。
▼こんな形のものです。記事一覧のデザインなどで使いやすいデザインです。
ソースはこんな感じ。
<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のソースは必要最低限のものしか書いてません。
そのため実践的ではないソースなので、より具体的なソースを明日公開します。