よこ並びのCSS。
テーブルレイアウトでよこ並び
displayプロパティのディスプレイボックスタイプとして用意された値「table」を利用して、よこ並びレイアウトを作ります。HTMLの要素<table>
や<td>
でマークアップした時のようなレイアウトを作ることができます。
テーブルは万能
テーブルレイアウトを利用するには、displayプロパティのtableという値を使います。
ul要素にdisplay: table
と指定し、li要素にはdisplay: table-cell
と指定すれば、ul/li要素がtable/td要素さながらにレイアウトされます。
ul {
list-style: none;
display: table;
margin: 0;
padding: 0;
}
li {
display: table-cell;
text-align: center;
}
ナビゲーションを中央に配置するときも、tableならばmarginプロパティで左右にauto
と指定すれば、中央に配置されるし、ul要素の横幅100%
と指定すれば、親要素いっぱいに広がって。しかも、li要素の横幅はその要素の内容に合わせてよしなに伸縮してくれるんです:D。なによりclearfixしなくてよいのも良いです。
ul {
list-style: none;
display: table;
margin: 0 auto;
padding: 0;
}
ul {
list-style: none;
display: table;
width: 100%;
margin: 0;
padding: 0;
}
もちろん、li要素の横幅を指定すれば、ボタンの横幅を統一することもできます。
td要素(=table-cellを指定した要素)はvertical-alignプロパティで、横に並ぶ要素の縦方向の位置を制御することもできるから、下のサンプルみたくvertical-align: middle
を指定すれば、要素を上下中央に揃えることができるのが特徴ですよね。けどやっぱりフロートの時と同じく、文字数によってボタンの高さはマチマチになっちゃいますね…:(。
li {
display: table-cell;
width: 20%;
text-align: center;
vertical-align: middle;
}
行数が違ってもボタンのサイズを揃える
a要素に敷いている背景色をli要素に敷くようにすれば、見ため的にはボタンの大きさは揃いますね。けれど、リンクエリア自体はさっきのままなので、文字数の少ないボタンは上の方と下の方がクリックできないまま。クリックできると思わせぶりな、意地悪ナビゲーションになっちゃいます…:(。
li {
display: table-cell;
width: 20%;
text-align: center;
vertical-align: middle;
background: #86c0de;
}

やっぱり背景色はa要素に敷いておいて、それでいてボタンの大きさを揃えるためには、下記のようにCSSを指定します。
a要素の上下にpaddingプロパティで多めに余白を指定してa要素のリンクエリアを広げておいて、marginプロパティで上下にネガティブマージンを指定して、paddingで広げた分を元に戻します。ここでは、もともと1em
だった上下のpaddingプロパティの値を5em
に広げたので、marginプロパティでは上下に-4em
を指定しています。
このままだとa要素の背景色が広がったままなので、li要素にoverflow: hidden
を指定することで、li要素からはみ出す部分を非表示にします。

table-cell
を指定した要素の縦幅は、その列の一番大きい要素に揃うパディングによってa要素の領域が広がるけれど、ネガティブマージンでは、親要素の領域だけ元に戻る、というトコがポイントです。
ボタンの大きさが揃って、それでいて、ボタンのどこもクリックできるようになりました:D!
li {
display: table-cell;
overflow: hidden;
width: 20%;
text-align: center;
vertical-align: middle;
}
li a {
cursor: pointer;
display: block;
margin: -4em 0;
padding: 5em 1em;
background: #86c0de;
}
レスポンシブにする
今のままだとスマホで見た時、いくらなんでもボタンが縦に長すぎなので、レスポンシブにデザインを調整する必要があります。とはいえ、こういったナビゲーションは、スマホで表示する際には、だいたいたて並びにすることが多いです。
下のサンプルでは、画面の横幅が767px以下の時には、ul要素もli要素もdisplay: block
にして、たて並びになるようにしてます。それから、よこ並びの時には左側に指定していた1pxのパディングは、上側に指定するように変更します。
あと、ボタンの高さを揃えるためにa要素に指定していた、ネガティブマージンや余計なパディングも必要なくなるので、元通りにしておきます。
@media screen and (max-width: 767px) {
ul, li {
display: block;
width: auto;
}
li:nth-child(n+2) {
padding: 1px 0 0;
}
li a {
margin: 0;
padding: 1em;
}
}
よこ並びにするのは768px以上の時だけなので、テーブルレイアウトするためのスタイルはみんな、メディアクエリの(min-width: 768px)
の中にまとめちゃえばいいですね。さすれば、(max-width: 767px)
で元通りに指定し直す必要もないです!
ボタン同士の隙間は、最初に上側にパディングを指定しておいて、メディアクエリで左側に指定し直すことにします。
li:nth-child(n+2) {
padding-top: 1px;
}
@media screen and (min-width: 768px) {
ul {
display: table;
}
li {
display: table-cell;
overflow: hidden;
width: 20%;
vertical-align: middle;
}
li:nth-child(n+2) {
padding: 0 0 0 1px;
}
li a {
margin: -4em 0;
padding: 5em 1em;
}
}
テーブルで商品一覧
テーブルレイアウトするには、displayプロパティで、ul要素にtable
、li要素にtable-cell
を指定するんでしたね。あとはフロートの時と全く同じく、li要素の横幅を33.333333%
にしたり、10pxのパディングを指定したりします。
.itemlist {
list-style: none;
display: table;
max-width: 1024px;
margin: 0 auto;
padding: 0;
}
.itemlist li {
display: table-cell;
width: 33.333333%;
padding: 10px;
box-sizing: border-box;
}
テーブルなので改行しません…X0!table-cell
は横へ伸び続けますが、横幅を33.333333%と指定してるからなるべくそうあろうと頑張るんだけれど、並びきらない分は小さくしてでも並ぼうと懸命で…、見てて申し訳ない気持ちでいっぱいですX(。
テーブルが折り返さないのは仕方のないことなので、ここはHTMLの構造を変更するしかないです。下のサンプルのように、ul要素をふたつに分けました。
とはいえ、幅が狭い時には、2列になったり1列になったり、とても対応しきれないー…X(。
テーブルレイアウトは、商品一覧みたいなレイアウトには向いてない、ということですね…。
Comment & Pingback
3 Comments! for テーブルレイアウトでよこ並び
神無月
初めまして、神無月です。「テーブルで一商品一覧」の一番下のhtmlタグを使ったのですが、画像をもう少し小さくするにはどこを修正したいいのでしょうか?
_watercolor
> 神無月さん
はじめまして、コメントありがとうございます。
さて早速、こちらのサンプルの“ ”する方法について。
html要素のサイズを調整するには、CSSのwidth/heightプロパティを使います。サンプルでは、「style.css」でimg要素に
width: 100%
と指定しているところを、別の値に変更することで画像サイズを調整できます。下記では、試しにwidth: 80%
にしてみました。.itemlist img {
width: 80%;
height: auto;
}
もしくは、img要素にbox-sizingプロパティで
border-box
と指定することで、paddingプロパティを調整することで画像サイズを調整することもできます。box-sizing: border-box
を指定した要素は、指定されたwidthプロパティの値が、paddingプロパティの値を含む大きさとして適用されるんですねー。.itemlist img {
width: 100%;
height: auto;
padding: 20px;
box-sizing: border-box;
}
とはいえ、記事の最後にも書いている通り、テーブルレイアウトは商品一覧みたいなレイアウトには向いていないので、ご注意くださいーX(。
神無月
教えてくれてありがとうございます。