ほんっとにはじめての HTML5 と CSS3

<ul>要素や <ol>要素内の <li>要素は、スタイル的にはブロックレベルなので、デフォルトでは縦に並びます。
これを今回は横に並べて、ナビゲーションを作ってみましょう。

今回は、<li>要素を横に並べるために、CSSの floatプロパティを使います。
（次回は displayプロパティを使う方法を説明します）

CSSプロパティ	float

●2017年10月、本文を大幅に書き換え、クリアフィックスについても追加しました。

ナビゲーションとは

同じページの他の部分や、他のページに移動するためのリンクテキストなどを、ナビゲーションと呼びます。
ナビゲーションは、
●サイト全体にわたるグローバルナビゲーション（主要なナビゲーション）
●ヘッダーやフッター部分に入れる、補助的なナビゲーション
●ページの右や左のカラムに入れる、サイトマップ的なナビゲーション
などいろいろあります。

このうちのグローバルナビゲーション（主要なナビゲーション）には、HTML5から nav要素が使えるようになりました。
nav要素は、主要なナビゲーションに対してのみ使用します。

使用する要素	<nav> 〜 </nav>

使い方は、ナビゲーションになるブロック全体を <nav>要素で囲むだけ。
ナビゲーションには、<ul>要素 <li>要素がよく使われます。

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

nav要素については、[17-2] セクションを表す要素（article, aside, section, nav）でも紹介しています。

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

CSSの「float」プロパティで横に並べよう

CSSの「float」プロパティで横に並べます。

HTMLはこちら。

<nav id="smp1">
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">製品情報</a></li>
  <li><a href="#">店舗情報</a></li>
  <li><a href="#">企業案内</a></li>
</ul>
</nav>
<div style="clear:both"></div>

CSSはこちら。

#smp1 {
	margin:1em 0;
	padding:0
	}
#smp1 ul {
	margin:0;
    padding:0;
	}
#smp1 ul li {
	float:left; /*左フロートさせます*/
	width:25%;  /*幅は親の25％*/
	list-style-type:none; /*リストマーカーは無し*/
    margin:0;
	padding:0
	}
#smp1 ul li a {
	display:block; /*テキスト以外もリンクとして反応するように*/
	font-weight:bold;
	line-height:3em; /*これで高さを決めています。3文字分*/
	text-align:center; /*テキストをセンターに*/
	background-color:#399;
	color:white;
	border-right:solid white 1px; /*右側だけ白い線*/
	text-decoration:none
	}
#smp1 ul li a:hover {
	text-decoration:underline
	}

float は必ず「clear」

float は、解除してあげない限りずーっとその効果が続きます。
レイアウトが崩れる原因はたいがいこれ。
float指定したら、もうその効果がなくていいところで必ず解除しましょう。

解除するには clearプロパティを使います。
clearプロパティの値は「left」「right」と「both」です。（左、右、両方）

上のサンプルでは、最後に </nav> のあとに下記の指定をしています（9行目）

<nav id="smp1">
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">製品情報</a></li>
  <li><a href="#">店舗情報</a></li>
  <li><a href="#">企業案内</a></li>
</ul>
</nav>
<div style="clear:both"></div>

空の <div>要素に clear:both とインラインで CSSを指定して float を解除していたんです。

ただ、このような指定は間違ってはいないけど、一般的ではありません。
float の解除は、Clearfix（クリアフィックス）という方法を使うほうがラクだし一般的です。

Clearfix（クリアフィックス）を使って

ちょっと違うスタイルで、Clearfix（クリアフィックス）も使ってみました。

HTMLはこちら。

<nav id="smp2" class="clearfix">
<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:1em;
	border:dotted 1px #ccc
    }
#smp2 ul {
	margin:0;
    padding:0;
    font-weight:bold;
    line-height:1
	}
#smp2 ul li {
	float:left;
	list-style-type:none;
    margin:0 0.3em 0 0;
	padding:0
    }
#smp2 ul li::after {
	content:' |'
    }
#smp2 ul li:last-child::after {
	content:''
    }
#smp2 ul li a {
	color:#d06c4e;
	text-decoration:none
	}
#smp2 ul li a:hover {
	color:#39f;
	text-decoration:underline
	}
.clearfix::after {
	content:'';
	display:table;
	clear:both
    }

これは、<li>要素をフロートさせて（13行目）、各 <li>要素に疑似要素「::after」を使って「 |（縦の罫線）」を入れています（18〜20行目）
最後の <li>要素だけは「｜」を無しにしています（21〜23行目）

最後の .clearfix::after と言う指定が Clearfix（クリアフィックス）（32行目以降）
これも疑似要素「::after」を使っています。「clearfix」というクラス名の要素内の最後に、空のコンテンツを作り、それに「clear:both」を指定しています。
このサンプルはnav要素にクラス名「clearfix」をつけてます。

擬似要素「::before」や「::after」は、指定した要素の内側に インライン要素としてコンテンツを生成します。

今回使った CSS の floatプロパティ、clearプロパティ、Clearfix（クリアフィックス）に関しては、「はじめてのCSS」カテゴリーの
【21】floatプロパティと clearプロパティ。そして Clearfixについて
に詳細に書いていますので参考にしてください。

次回予告

次回は、displayプロパティを使って <li>要素を横に並べます。

関連記事

• [16-5] table横列グループ化（thead, tbody, tfoot）
• [16-4] tableのセルの枠線を非表示にしよう（empty-cellsプロパティ）
• [16-3] table のセルを連結しよう（colspan属性・rowspan属性）
• [16-2] table にタイトルをつけよう（ caption要素 ）
• [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
• [15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）
• [15-6] リストでナビゲーション（ li 要素を display で横に並べる）
• [15-5] リストでナビゲーション（ li 要素を float で横に並べる）
• [15-4] リストマーカーを画像や任意のテキストに変更する方法
• [15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）
• [15-2] 番号付きリストを作ろう（ ol要素・li要素）
• [15-1] リストを作ろう（ ul要素・li要素 ）
• [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
• [14-3] データの容量を示す単位（バイト、キロバイト、メガバイト）
• [14-2] 画像形式について（GIF、JPEG、PNG の違い）