横並びのリストを中央寄せにする5つの方法
- acky.infoホーム
- デザインのヒント
- CSSテクニック
- 横並びのリストを中央寄せにする5つの方法
横並びのリストを中央寄せにする5つの方法の概要です
横並びになったリストを中央寄せにする方法を、float: left;・display: inline・display: inline-block・display: table-cell・display: flex を使う5つのパターンで紹介します。
ブログのページ数やバナーを並べるときなど、いろいろなところで使えます。
まとめ！
- 古いブラウザまで対応させるなら
display: inline-block;またはfloat: left;を使って中央寄せ - 最新ブラウザだけの対応なら
display: flex;を使って中央寄せ
HTML・CSSとデモページ
HTMLコード
<ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul>
CSSコード
ul {
list-style-type: none;
padding-left: 0;
}
li {
background: #CCC;
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
}
.float {
width: 270px;
margin: auto;
overflow: hidden;
}
.float li {
float: left;
}
.inline {
text-align: center;
}
.inline li {
display: inline;
}
.inline-block {
text-align: center;
}
.inline-block li {
display: inline-block;
}
.table-cell {
display: table;
margin: auto;
}
.table-cell li {
display: table-cell;
}
.flex {
display: flex;
justify-content: center;
}
デモページ・ファイルはこちら
ul のCSSについて
CSSコード
ul {
list-style-type: none;
padding-left: 0;
}
ビュレットと余白をとります。
ulにはブラウザが持っているCSSが適用されるので、2～3行目のように
list-style-type: none;
padding-left: 0;
と指定してリストアイテム要素のビュレット（リストのマーク）とulの左にある余白をとります。
float: left; を使うリストの中央寄せ
いいところ
- liとliのあいだに余白ができない
- 幅の決まった正確なレイアウトに向いている
ここがいまいち…
- ulとliの幅が固定されるのでliの増減、サイズ変更に対応できない
ブラウザでデモページを見る
HTML・CSSと方法
HTMLコード
<ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul>
CSSコード
ul {
list-style-type: none;
padding-left: 0;
}
li {
background: #CCC;
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
}
.float {
width: 270px;
margin: auto;
overflow: hidden;
}
.float li {
float: left;
}
width と margin: auto; を使ってul を中央寄せにします。
float: left; を使って li を並びにします。
floatを使うリストの中央寄せは、ulにwidthとmarginを使ってブロック要素を中央寄せにしてから、中のliにfloat: left;を指定して横並びにします。
ulはmargin: auto;を使って中央寄せにするのでulの幅は余白を含めたliの幅の合計を指定します。
デモのliの幅は50pxでmarginとpaddingが左右合わせて40pxなので合計90pxになります。90pxのliが3個なので、CSSの13行目のように
width: 270px;
と指定して、CSSの14行目のように
margin: auto;
と指定して左右のmarginを自動的に計算させると、ulが中央寄せになります。
floatを使うので、CSSの15行目の
overflow: hidden;
やclearfixのCSSを使ってfloatをクリアします。
liを、CSSの18行目のように
float: left;
と指定すると横並びになるので、横並びのリストが中央寄せになります。
いいところ
marginとpaddingが使えます。
float: left;で左に寄せているのでliとliのあいだに余白をつくらずにぴったりとくっつけることができます。
また、liはリストアイテム要素のままなので、marginとpaddingが使えます。
ここがいまいち…
liが増えるとカラム落ちします。
liが減ると左寄せに見えます。
ulとliの幅と個数を決めて中央寄せするので、liを増減したときやliの幅が変わったりしたときは、ulのCSSを再調整しないとカラム落ちしたり、左寄せに見えてしまします。
display: inline; を使うリストの中央寄せ
いいところ
- liの増減、幅の変更に対応できる
ここがいまいち…
- liとliのあいだに余白ができる
- widthとheightが使えない
ブラウザでデモページを見る
HTML・CSSと方法
HTMLコード
<ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul>
CSSコード
ul {
list-style-type: none;
padding-left: 0;
}
li {
background: #CCC;
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
}
.inline {
text-align: center;
}
.inline li {
display: inline;
}
text-align: center; を使ってインライン要素に変換した li を中央寄せにします。
display: inline;を使うリストの中央寄せは、ulにtext-align: center;を指定して中のインライン要素が中央寄せになるようにしてから、中のliをdisplay: inline;に変換します。
ulを、CSSの13行目のように
text-align: center;
と指定してulの中のインライン要素を中央寄せにします。
liを、CSSの16行目のように
display: inline;
と指定してリストアイテム要素からインライン要素に変換すると、横並びのリストが中央寄せになります。
いいところ
liが増えても減っても中央寄せのままです。
text-align: center;を使ってインライン要素を中央寄せするときは、ulのCSSを再調整しなくても中央寄せのままなので、liを増やしたり、減らしたりすることが簡単にできます。
ここがいまいち…
HTMLの中でliとliのあいだに改行があると余白ができます。
liはインライン要素に変換されたのでwidthやheightが使えません。
また、HTMLの中でliとliのあいだのに改行があると余白ができるので、liがぴったりとくっついたデザインには使えません。
※HTMLやCSSを工夫すると余白を消すことができます。
display: inline-block; を使うリストの中央寄せ
いいところ
- liの増減、幅の変更に対応できる
ここがいまいち…
- liとliのあいだに余白ができる
ブラウザでデモページを見る
HTML・CSSと方法
HTMLコード
<ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul>
CSSコード
ul {
list-style-type: none;
padding-left: 0;
}
li {
background: #CCC;
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
}
.inline-block {
text-align: center;
}
.inline-block li {
display: inline-block;
}
text-align: center; を使ってインラインブロック要素に変換した li を中央寄せにします。
display: inline-block;を使うリストの中央寄せは、ulにtext-align: center;を指定して中のインライン要素が中央寄せになるようにしてから、中のliをdisplay: inline-block;に変換します。
ulを、CSSの13行目のように
text-align: center;
と指定してulの中のインライン要素を中央寄せにします。
liを、CSSの16行目のように
display: inline-block;
と指定してリストアイテム要素からインラインブロック要素に変換すると、横並びのリストが中央寄せになります。
インラインブロック要素をInternet Explorer 6と7にも対応させるときはliに
/zoom: 1;
を書きたします。
いいところ
インラインブロック要素はmarginとpaddingが使えます。
text-align: center;を使ってインラインブロック要素を中央寄せするときは、ulのCSSを再調整しなくても中央寄せのままなので、liを増やしたり、減らしたりすることが簡単にできます。
また、インラインブロック要素はブロック要素に似た特徴ををもつのでmarginとpaddingが使えます。
ここがいまいち…
HTMLの中でliとliのあいだに改行があると余白ができます。
HTMLの中でliとliのあいだのに改行があると余白ができるので、liがぴったりとくっついたデザインには使えません。
※HTMLやCSSを工夫すると余白を消すことができます。
display: table-cell; を使うリストの中央寄せ
いいところ
- liとliのあいだに余白ができない
- liの増減、幅の変更に対応できる
- vertical-alignが使える
ここがいまいち…
- marginが使えない
- ulの幅をliの幅の合計が超えたときも折り返さない
ブラウザでデモページを見る
HTML・CSSと方法
HTMLコード
<ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul>
CSSコード
ul {
list-style-type: none;
padding-left: 0;
}
li {
background: #CCC;
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
}
.table-cell {
display: table;
margin: auto;
}
.table-cell li {
display: table-cell;
}
table-cellに変換した ul を margin: auto; を使って中央寄せにします。li をテーブルセル要素に変換して横並びにします。
display: table-cell;を使うリストの中央寄せは、ulをdisplay: table;とmargin: auto;を指定して中央寄せしにてから、liをdisplay: table-cell;を指定して横並びにします。
ulを13～14行目のように
display: table;
margin: auto;
と指定してテーブル要素に変換したulを中央寄せにします。
liを17行目のように
display: table-cell;
と指定してリストアイテム要素からtrと同じ特徴をもつテーブルセル要素に変換すると横並びになるので、横並びのリストが中央寄せになります。
いいところ
テーブルセル要素はtrと同じ特徴をもつのでvertical-alignが使えます。
テーブルセル要素はtrと同じ特徴をもつのでvertical-alignが使えます。
また、liとliのあいだに余白もできずにぴったりとくっつき、liが増減してもulのCSSの調整は必要ありません。
ここがいまいち…
テーブルセル要素はtrと同じ特徴をもつのでmarginが使えません。
テーブルセル要素はtrと同じ特徴をもつのでmarginが使えません。
また、liの幅の合計がulの幅を超えても、折り返さずにはみ出たままで横に並び続けます。
display: flex; を使うリストの中央寄せ
いいところ
- liとliのあいだに余白ができない
- liの増減、幅の変更に対応できる
- 折り返しの指定ができる
ここがいまいち…
- Chrome 28・Firefox 22・Internet Explorer 11・Edgeからしか対応していない
ブラウザでデモページを見る
HTML・CSSと方法
HTMLコード
<ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul>
CSSコード
ul {
list-style-type: none;
padding-left: 0;
}
li {
background: #CCC;
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
}
.flex {
display: flex;
justify-content: center;
}
ulにdisplay: flex;とjustify-content: center;を指定してliを横並びにします。
display: flex;を使うリストの中央寄せは、ulにdisplay: flex;とjustify-content: center;を指定します。
ulを、CSSの13行目のように
display: flex;
と指定してフレックス要素に変換し、CSSの14行目のように
justify-content: center;
と指定して中の要素を中央寄せにすると、横並びのリストが中央寄せになります。
ulにCSSを指定するだけで、liは横並びの中央寄せになるのでliへの指定はありません。
いいところ
liとliのあいだに余白ができません。
liとliのあいだに余白ができず、ulのCSSを再調整しなくても中央寄せのままなので、liを増やしたり、減らしたりすることが簡単にできます。
また、ulに折り返しをしないflex-wrap: nowrap;（初期値）、折り返しをするflex-wrap: wrap;を指定することで、liの幅の合計がulの幅を超えたときの折り返しを調整できます。
ここがいまいち…
flexは新しいブラウザだけ対応しています。
display: flex;は仕様が確定していないので今後CSSの書き方が変わるかもしれません。
また、flexはChrome 28・Firefox 22・Internet Explorer 11・Edgeからのように、新しいブラウザしか対応していません。
liとliのあいだの余白を消す方法
HTMLの中でliとliのあいだに改行があると余白ができますが、この余白は消すことができます。
liをインライン要素またはインラインブロック要素に変換すると簡単に中央寄せできるので便利なのですが、HTMLの中でliとliのあいだに改行があると余白ができます。
余白のあるデザインのときはmarginを少し減らすなどすれば対応できますが、liとliのあいだに余白のないデザインでは使えません。
しかし、HTMLをやCSSを工夫することで余白を消すことができるので、方法を3つ紹介します。
liを1行に書く
HTMLにliを書くときはリストアイテム要素なので改行して書くときが多いと思いますが、改行せずにliの全てを1行に書くと余白が消えます。
欠点は、1行なのでコードが長くなり読みにくくなります。
liを一行で書いた例
<li>リストタグの内容</li><li>リストタグの内容</li><li>リストタグの内容</li>
コメントタグの中で改行する
コメントタグの中での改行はHTMLに反映されないので、liとliをコメントタグでつないでコメントタグの中で改行すると余白が消えます。
欠点は、無駄なコメントタグが増えること、この工夫を知らない人が見たときにコメントタグの意味を理解できないことです。
コメントタグの中で改行した例
<li>リストタグの内容</li><!-- --><li>リストタグの内容</li><!-- --><li>リストタグの内容</li>
ulのフォントサイズを0にする
ulのフォントサイズを0にするとliとliのあいだにある余白が消えます。このままではliもフォントサイズが0になるので、16pxなどを指定してliの文字を大きくします。
欠点は、emや%を使ってフォントサイズを変えることができるサイトでは、liのフォントサイズが0x1.6em=0のように0になるのでこの方法は使えません。
要素ごとにフォントサイズをpxで指定しているときや、ルートからフォントサイズを計算するremで指定しているときにだけこの方法が使えます。
フォントサイズを0にした例
ul{
font-size: 0;
}
ul li{
font-size: 16px;
}