[15-5] リストでナビゲーション( li 要素を float で横に並べる)

最終更新日:2017年10月31日  (初回投稿日:2011年06月09日)

<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>要素を横に並べます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.