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

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

今回も <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 「パンくずリスト」などのテキストのナビゲーションには手軽です。
テキストと同じように「インラインレベル」のスタイルに変更します。
インラインの性質上、上下のマージンは指定できなくなります。

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

<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」は「空」「何も示さない」という意味。
ヌルリンクは、そのページ自身にリンクします。サンプルソースなのでコレを使ってます。

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

<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>
#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)をご覧ください)

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

<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>
#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 は、構造けっこう複雑で、古めのブラウザでの構文が標準型とまったく違ったりで、ここで全部説明するのはムリw。
ご興味ある方は「はじめてのCSS」カテゴリーで詳細に書いていますのでご覧ください。
【18-1】Flexbox を使おう!(display:flexでFlexboxを作る)

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

次回予告

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

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

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

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

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

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、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.