I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > CSS > ulリストのliアイテムを横並びにする方法あれこれ

ulリストのliアイテムを横並びにする方法あれこれ

  • 投稿日:2015/10/14 |最終更新:2020/09/07
  • CSS
ulリストのliアイテムを横並びにする方法あれこれ

はじめに

ulリストは、通常、下記のように縦並びで表示されます。

これを横並びにする方法は色々あります。

ulリストのliアイテムを横並びで表示する方法

ulリストのliアイテムを横並びで表示するには、主に3つの方法があります。

<li>に display: inline; または display: inline-block; を使用する

リストアイテムに対し、

.sample li{
    display: inline;
}

とするか、

.sample li{
	display: inline-block;
}

とすると、liアイテムが横並びで表示されます。

liアイテム同士の間に余白ができる場合

display: inline;またはdisplay: inline-block;でリストを横並びにすると、liアイテムとliアイテムの間に隙間が生じます。
この隙間をなくすには、

.sample{
	font-size: 0; /* フォントサイズを0にする */
}
.sample li{
	font-size: 10pt; /* フォントサイズを絶対値で指定する */
}

にしておく必要があります。

<li>に float: left; を使用する

リストアイテムに対し、

.sample li{
    float: left;
}

とすると、liアイテムが横並びで表示されます。

リストマークを消したい時は

リストマークをつけていると、liアイテムに被って表示される場合があります。
リストマークを削除するには、

	.sample li{
		list-style: none;
	}
	

としておきましょう。

ulの背景を最下部まで表示させたい時は

liアイテムをfloat: left;すると、liアイテムのコンテナであるulの高さが0になります。
ulの高さをliの最下部まで広げる場合は、

	ul.sample{
		overflow: hidden;
	}
	

としておきましょう。

リストの次の要素も横並びになってしまう時は

アイテムをfloat: left;すると、ulの次の要素も横並びで表示されてしまいます。
たとえば、

<ul>
    <li>テスト</li>
    <li>テスト</li>
    <li>テスト</li>
</ul>
<p>ulの次の要素</p>
であれば、
	li{
		float: left;
	}
	p{
		clear: left;
	}
	

と、liを内包するulの次の要素をclear: left;しておきましょう。

<ul>で display: flex; を使用する

ulでdisplay: flex;を設定すると、ulをflex-containerにすることができます。

flex-container内の子要素(flex-item)の並び方は、flex-containerにルールを加えることで様々設定できます。

	ul{
		display: flex;
	}
	

とすれば、子要素を中央寄せで横並びに表示させることができます。

display: flex;は対応していないブラウザもまだ残っているので、使用の際はレギュレーションの確認が必要です。
display: flex;の他の使い方については、他の記事でも紹介したいと思います。

横幅の決まっていない横並びにしたリストを中央寄せする方法

liをインラインアイテムにしてulの文字配置をcenterにする

liをインラインアイテム(display: inline;またはdisplay: inline-block;)にするとリストアイテムが横に並ぶことは上記に説明しました。
インラインアイテムを内包するコンテナ(ul)の文字配置をcenterにする(text-align: center;)と、インラインアイテムが中央寄せで並ぶので、横幅の決まっていないliを中央寄せで横並びにすることができます。

つまり、

ul.sample{
	text-align: center;
}
ul.sample li{
	display: inline;
}

とするか、

.sample{
	text-align: center;
}
.sample li{
	display: inline-block;
}

とすればOKです。

float: leftでは横並びの中央寄せができない?

リストアイテムをfloat: leftで横並びにしようとすると、親要素(この場合ulリスト)の中で左詰めを行うので、中央寄せができません。

親要素の横幅が決まっている場合、

.sample{
	width: 50%;
}
.sample li{
	float: left;
	margin: auto;
}

としても、

float:leftでの横並びのリストの中央寄せ

上図のように、中央寄せされた親要素(ulリスト)内で左詰めの横並びで表示されてしまいます。

 

ulを display: flex; にして中央寄せの設定をする

liをflex-containerにする(display: flex;)にするとリストアイテムが横に並ぶことは上記に説明しました。
flex-containerには並び方についての様々な設定をすることができます。
display: flex;にしたulをjustify-contenr: center;にしておけば、子要素の横幅に関わらず中央寄せをすることができます。

ul.sample{
	display: flex;
	justify-content: center;
}

まとめ

親要素(ulリスト)をtext-aline: center;で中央寄せしておいて、子要素をdisplay: inlineまたはdisplay: inline-block;にすると、横幅の決まっていないリストを中央寄せすることができます。

また、親要素(ulリスト)をdisplay: flex;しても設定によって子要素を横並びの中央寄せすることができるので、プロジェクトのレギュレーションに応じて活用しましょう。

この記事が気に入ったらシェアしてください。

関連記事

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

HTMLとCSSで半角英数が連続する場合の文章の折返しを自由自在にコントロールする方法

pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

WEBデザイナー必見!CSSジェネレータ集

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。