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

最終更新日:2017年10月01日  (初回投稿日: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」プロパティで横に並べます。

<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>
#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(クリアフィックス)も使ってみました。

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.