横並びのリストを中央寄せにする5つの方法

  1. acky.infoホーム
  2. デザインのヒント
  3. CSSテクニック
  4. 横並びのリストを中央寄せにする5つの方法

横並びのリストを中央寄せにする5つの方法の概要です

横並びになったリストを中央寄せにする方法を、float: left;display: inlinedisplay: inline-blockdisplay: table-celldisplay: 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; を使うリストの中央寄せ

いいところ

ここがいまいち…

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を使うリストの中央寄せは、ulwidthmarginを使ってブロック要素を中央寄せにしてから、中のlifloat: left;を指定して横並びにします。

ulmargin: auto;を使って中央寄せにするのでulの幅は余白を含めたliの幅の合計を指定します。
デモのliの幅は50pxmarginpaddingが左右合わせて40pxなので合計90pxになります。90pxliが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;で左に寄せているのでliliのあいだに余白をつくらずにぴったりとくっつけることができます。
また、liはリストアイテム要素のままなので、marginpaddingが使えます。

ここがいまいち…

liが増えるとカラム落ちします。

liが減ると左寄せに見えます。

ulliの幅と個数を決めて中央寄せするので、liを増減したときやliの幅が変わったりしたときは、ulのCSSを再調整しないとカラム落ちしたり、左寄せに見えてしまします。

display: inline; を使うリストの中央寄せ

いいところ

ここがいまいち…

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;を使うリストの中央寄せは、ultext-align: center;を指定して中のインライン要素が中央寄せになるようにしてから、中のlidisplay: inline;に変換します。

ulを、CSSの13行目のように
text-align: center;
と指定してulの中のインライン要素を中央寄せにします。

liを、CSSの16行目のように
display: inline;
と指定してリストアイテム要素からインライン要素に変換すると、横並びのリストが中央寄せになります。

いいところ

liが増えても減っても中央寄せのままです。

text-align: center;を使ってインライン要素を中央寄せするときは、ulのCSSを再調整しなくても中央寄せのままなので、liを増やしたり、減らしたりすることが簡単にできます。

ここがいまいち…

HTMLの中でliとliのあいだに改行があると余白ができます。

liはインライン要素に変換されたのでwidthheightが使えません。
また、HTMLの中でliliのあいだのに改行があると余白ができるので、liがぴったりとくっついたデザインには使えません。
※HTMLやCSSを工夫すると余白を消すことができます。

display: inline-block; を使うリストの中央寄せ

いいところ

ここがいまいち…

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;を使うリストの中央寄せは、ultext-align: center;を指定して中のインライン要素が中央寄せになるようにしてから、中のlidisplay: 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を増やしたり、減らしたりすることが簡単にできます。
また、インラインブロック要素はブロック要素に似た特徴ををもつのでmarginpaddingが使えます。

ここがいまいち…

HTMLの中でliとliのあいだに改行があると余白ができます。

HTMLの中でliliのあいだのに改行があると余白ができるので、liがぴったりとくっついたデザインには使えません。
※HTMLやCSSを工夫すると余白を消すことができます。

display: table-cell; を使うリストの中央寄せ

いいところ

ここがいまいち…

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;を使うリストの中央寄せは、uldisplay: table;margin: auto;を指定して中央寄せしにてから、lidisplay: table-cell;を指定して横並びにします。

ulを13~14行目のように
display: table;
margin: auto;

と指定してテーブル要素に変換したulを中央寄せにします。

liを17行目のように
display: table-cell;
と指定してリストアイテム要素からtrと同じ特徴をもつテーブルセル要素に変換すると横並びになるので、横並びのリストが中央寄せになります。

いいところ

テーブルセル要素はtrと同じ特徴をもつのでvertical-alignが使えます。

テーブルセル要素はtrと同じ特徴をもつのでvertical-alignが使えます。
また、liliのあいだに余白もできずにぴったりとくっつき、liが増減してもulのCSSの調整は必要ありません。

ここがいまいち…

テーブルセル要素はtrと同じ特徴をもつのでmarginが使えません。

テーブルセル要素はtrと同じ特徴をもつのでmarginが使えません。
また、liの幅の合計がulの幅を超えても、折り返さずにはみ出たままで横に並び続けます。

display: flex; を使うリストの中央寄せ

いいところ

ここがいまいち…

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;を使うリストの中央寄せは、uldisplay: flex;justify-content: center;を指定します。

ulを、CSSの13行目のように
display: flex;
と指定してフレックス要素に変換し、CSSの14行目のように
justify-content: center;
と指定して中の要素を中央寄せにすると、横並びのリストが中央寄せになります。

ulにCSSを指定するだけで、liは横並びの中央寄せになるのでliへの指定はありません。

いいところ

liとliのあいだに余白ができません。

  • liliのあいだに余白ができず、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の中でliliのあいだに改行があると余白ができます。
余白のあるデザインのときはmarginを少し減らすなどすれば対応できますが、liliのあいだに余白のないデザインでは使えません。

しかし、HTMLをやCSSを工夫することで余白を消すことができるので、方法を3つ紹介します。

liを1行に書く

HTMLにliを書くときはリストアイテム要素なので改行して書くときが多いと思いますが、改行せずにliの全てを1行に書くと余白が消えます。
欠点は、1行なのでコードが長くなり読みにくくなります。

liを一行で書いた例

<li>リストタグの内容</li><li>リストタグの内容</li><li>リストタグの内容</li>

コメントタグの中で改行する

コメントタグの中での改行はHTMLに反映されないので、liliをコメントタグでつないでコメントタグの中で改行すると余白が消えます。
欠点は、無駄なコメントタグが増えること、この工夫を知らない人が見たときにコメントタグの意味を理解できないことです。

コメントタグの中で改行した例

<li>リストタグの内容</li><!--
--><li>リストタグの内容</li><!--
--><li>リストタグの内容</li>

ulのフォントサイズを0にする

ulのフォントサイズを0にするとliliのあいだにある余白が消えます。このままではliもフォントサイズが0になるので、16pxなどを指定してliの文字を大きくします。
欠点は、em%を使ってフォントサイズを変えることができるサイトでは、liのフォントサイズが0x1.6em=0のように0になるのでこの方法は使えません。
要素ごとにフォントサイズをpxで指定しているときや、ルートからフォントサイズを計算するremで指定しているときにだけこの方法が使えます。

フォントサイズを0にした例

ul{
	font-size: 0;
}
ul li{
	font-size: 16px;
}

まとめ

余白のあるデザインや、フォントサイズがpx指定やrem指定の時は、インラインブロック要素を使う方法が古いInternet Explorerまで対応できるので一番便利です。
今後はdisplay: flex;を使った方法が主流になっていくと思いますので、display: flex;を使う方法も頭の片隅に入れておきましょう。

最後まで読んでいただき、ありがとうございました。

広告
最新のEdge、Internet Explorer、Firefox、Chromeできれいにページを見ることができます。