[15-6] リストでナビゲーション（ li 要素を display で横に並べる）

今回も <li>要素を 横に並べて、ナビゲーションを作ります。
<li>要素は、スタイル的にはブロックレベルなので、デフォルトでは縦に並ぶため、CSS で横並びのスタイルを指定します。

今回は、<li>要素を横に並べるために displayプロパティを使います。

●2017年10月、本文を大幅に書き換えました。
display: flex の前身の display: box について書いていましたが削除し、ブロックレベルを横並びにできる「displayプロパティの値」についての内容に 書き換えました。

CSSプロパティと値	display: inline display: inline-block display: table display: flex

displayプロパティについては「はじめてのCSS」カテゴリーで詳しく書いています。
「display: inline」「display: block」「display: inline-block」については、
【17-1】displayプロパティでボックスの表示形式を自由に変えよう
「display: table」については、
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
「display: flex」については、
【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
もご覧ください。

list-style-type:none はもう不要

今回の方法だと list-style-type:none（リストマーカーは無し）の指定は もう不要です。

<li>要素はブラウザデフォルトで display: list-item になっています。
今回のように <li>要素に displayプロパティで「list-item」以外の値を指定すると、その時点でもうリストの性質は無くなっているので、リストマーカーは付きません。

display: inline で横に並べます

display: inline は「パンくずリスト」などのテキストのナビゲーションには手軽です。
テキストと同じように「インラインレベル」のスタイルに変更します。
インラインの性質上、上下のマージンは指定できなくなります。

「パンくずリスト」とは、トップページからのページ遷移をたどって示すナビ。今どの階層を見ているかユーザーが把握できるようにするもの。
（ヘンゼルとグレーテルが、パンくずを道に置いて目印にした話が語源です）

• HOME
• 製品情報
• 新製品
• 製品A

HTMLはこちら。

<div id="smp1">
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">製品情報</a></li>
  <li><a href="#">新製品</a></li>
  <li>製品A</li>
</ul>
</div>

上のソースコードで、リンク先を「 #（ハッシュ）」にしていますが、これを「ヌルリンク（null link）」と言います。null は「ナル」に近い発音ですが、日本ではヌルで定着しているようです。
「null」は「空」「何も示さない」という意味。
ヌルリンクは、そのページ自身にリンクします。サンプルソースなのでコレを使ってます。

CSSはこちら。

#smp1 {
	margin:1em 0;
	padding:1em;
	border:solid 1px #ccc;
    background-color:#ecf8fe
	}
#smp1 ul {
	margin:0;
    padding:0;
	}
#smp1 ul li {
	display:inline; /*インラインに*/
	font-weight:bold;
	line-height:1em;
    margin:0;
	padding:0;
	}
#smp1 ul li::after {
	content:'　>　' /*擬似要素 ::after で矢印を*/
	}
#smp1 ul li:last-child::after {
	content:''      /*最後の li要素には何もつけない*/
	}
#smp1 ul li a {
	color:inherit;
	text-decoration:none
	}
#smp1 ul li a:hover {
	color:#39f;
	text-decoration:underline
	}

display: inline-block で横に並べます

display: inline-block は ブロックレベルの性質のまま横に並べることができます。
ブロックレベルのように「幅・高さ」「上下左右のマージン」を指定できるので、ナビゲーションの表示に最適です。

• HOME
• 製品情報
• 店舗情報
• 企業案内

HTMLはこちら。

<nav id="smp2">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">企業案内</a></li>
</ul>
</nav>

CSSはこちら。

#smp2 {
	margin:1em 0;
	padding:0;
    box-sizing: border-box; /*親からはみ出すのを防いでいます*/
	}
#smp2 ul {
	margin:0;
    padding:0;
	font-size:0 /*各ブロックの周囲に空きができるのを防いでいます*/
	}
#smp2 ul li {
	display: inline-block; /*インライン-ブロックに*/
	width:25%;  /*幅は親の25％*/
    margin:0;
	padding:0
	}
#smp2 ul li a {
	display:block; /*テキスト以外もリンクとして反応するように*/
	font-weight:bold;
	font-size:16px;
	line-height:3em; /*これで高さを決めています。3文字分*/
	text-align:center; /*テキストをセンターに*/
	background-color: #69c;
	color:white;
	border-right:solid white 1px; /*右側だけ白い線*/
	text-decoration:none
	}
#smp2 ul li a:hover {
	text-decoration:underline
	}

4行目の box-sizing: border-box は、ボックスの幅や高さに padding や border が加算されるのを解消する指定です。border を付けても 幅が親要素の25％であるように指定しています。
box-sizing の詳細は、【10】ボックスモデル（margin, padding, border を使いこなそう）をご覧ください。

display: table で横に並べます

親要素に display: table と指定し、子要素に display: table-cell と指定して使います。
必ずコレはセットじゃないと、どちらか片方だけでは何も起こりません。

<table>要素（テーブル）、<td>要素（テーブルセル）はまだやっていないので、ちょっと話が前後しちゃいますが、とりあえず使ってみよう。
（<table>要素は [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）をご覧ください）

• HOME
• 製品情報
• 店舗情報
• 企業案内

HTMLはこちら。

<nav id="smp3">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">企業案内</a></li>
</ul>
</nav>

CSSはこちら。

#smp3 {
	margin:1em 0;
	padding:0;
	}
#smp3 ul {
	display:table; /*テーブルに*/
	table-layout:fixed; /*セルを均等割にする*/
	width:100%;  /*width指定が必要*/
	margin:0;
    padding:0;
	}
#smp3 ul li {
	display:table-cell; /*テーブルセルに*/
	}
#smp3 ul li a {
	display:block; /*テキスト以外もリンクとして反応するように*/
	font-weight:bold;
	font-size:16px;
	line-height:3em; /*これで高さを決めています。3文字分*/
	text-align:center; /*テキストをセンターに*/
	background-color:#969;
	color:white;
	border-right:solid white 1px; /*右側だけ白い線*/
	text-decoration:none
	}
#smp3 ul li a:hover {
	background-color:#c99
	}

親の <ul>要素に display: table と指定し、子の <li>要素に display: table-cell と指定しています（6行目、13行目）

table-layout: fixed は、セルがテーブルの幅に対して均等割の幅にします（7行目）
ただし、そのためには 親のテーブルに幅の指定が必要です（8行目）。親の幅指定を忘れると table-layout: fixed は効かないので要注意です。

テーブル関連のスタイルに関しては、「はじめてのCSS」カテゴリーの
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
【17-3-2】テーブル関連の要素のためのCSSプロパティ
に詳細を書いておきましたのでご覧ください。

display: flex で横に並べます

display: flex はFlexbox（Flexible Box Layout Module） と呼ばれる幅や高さがフレキシブルに伸縮するボックスです。
横並びも簡単で、表示領域に合わせて柔軟にボックスサイズを合わせてくれるので便利。
ただ、IE11 では全部の機能を実装していなかったりします。

• HOME
• 製品情報
• 店舗情報
• 企業案内

HTMLはこちら。

<nav id="smp4">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">企業案内</a></li>
</ul>
</nav>

CSSはこちら。

#smp4 {
	margin:1em 0;
	padding:0;
	}
#smp4 ul {
    display:-webkit-box;/*Android4*/
    display:-ms-flexbox;/*IE10*/
    display:-webkit-flex;/*safari(pc,ios8)*/
    display:flex; /*flexコンテナに*/
	margin:0;
	padding:0; /*自動的にflexコンテナになるけど ulの性質は残ってる*/
	}
#smp4 ul li {
	-webkit-box-flex: 1.0; /*Android4.3*/
	-ms-flex: 1 0 25%;   /*IE10*/
	-webkit-flex: 1 1 25%; /*PC-Safari,iOS8.4*/
	flex: 1 1 25%; /*Flexアイテムを Flexコンテナのスペースいっぱいに膨張させ同じ幅に揃える*/
	margin:0;
	padding:0;
	list-style-type:none /*自動的にflexアイテムになるけど liの性質は残ってる*/
	}
#smp4 ul li a {
	display:block; /*テキスト以外もリンクとして反応するように*/
	font-weight:bold;
	font-size:16px;
	line-height:3em; /*これで高さを決めています。3文字分*/
	text-align:center; /*テキストをセンターに*/
	background-color:#c892ad;
	color:white;
	border-right:solid white 1px; /*右側だけ白い線*/
	text-decoration:none
	}
#smp4 ul li a:hover {
	background-color:#dec19c
	}

親の <ul>要素に display: flex を指定して flexコンテナにします（9行目）
6〜8行は、古めのブラウザ向けの書き方です（もう不要なのかも）

子の <li>要素は自動的に flexアイテムになっています。
flexアイテムの幅を flexコンテナのスペースいっぱいに膨張させる指定が 17行目。
14〜16行は古めのブラウザ用の指定です。
この flex: 1 1 25% はショートハンドで、まとめる前は、
flex-grow: 1;
flex-shrink: 1;（デフォルトのまま）
flex-basis: 25%
という指定です。

Flexbox については、ご興味ある方は「はじめてのCSS」カテゴリーで詳細に書いていますのでご覧ください。
【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

今回使った中では、display: inline-block が一番簡単に使えそうです。
テーブルや フレックスボックスも それぞれ長所があるので、シーンに合わせて使い分けるとイイですね。

次回予告

次回は <dl>要素のリストでナビゲーションを作ってみます。
コレは、名前（dt）と説明（dd）の 2つのアイテムがあるので、サイドバーのナビなどに便利です。