レイアウトを自在に使いこなす：にわかデザイン（2）（1/3 ページ）

基本的なHTMLの構造やCSSの設定方法で「メニュー」を作ったら、そのレイアウトを自由に変化させてみましょう。サンプルソースをダウンロードして見比べてみましょう。

[内田 順一，Chime of Shigan]

　前回、HTML5＋CSS3は「メニューの作り方」を覚えるだけ！ では「メニュー」を例にして、基本的なHTMLの構造やCSSの設定方法について解説しました。今回は、このメニューのレイアウトをさまざまに変化させる方法を学びます。

　サンプルをご用意してありますので、ダウンロードしてソースを見比べながら読んでみてください。

• ダウンロード

（1）項目が横に並んだメニュー【その1】

　さて通常、HTMLは書いた順番に上から下に表示されます。

<div class="headmenu">
	<h3>Cat Tsusin</h3>
	<ul>
		<li><a href="#">HOME</a></li>
		<li><a href="#">Introduction</a></li>
		<li><a href="#">Life</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

と書けば、以下のような表示になります。

　そこで、この「HOME」から「Contact」までのメニュー項目を、左から横並びにしてみたいと思います。

　要素を横に並べるにはいくつかの方法がありますが、ここでは2つご紹介します。

　1つ目は「float:left;」というCSSプロパティを使うやり方です。ダウンロードしたサンプルの中から「sample3」をご覧ください。メニュー項目の<li>タグに対して「float:left;」が指定されています。

.headmenu li{
	float:left;		/*この要素を左から横に並べる*/
	margin:0;
	padding:10px;
	border:1px solid #ffffff;
}

　そう、たったこれだけ！……と言いたいところですが、この指定だけだと以下のような表示になってしまいます。

　ここで起きているのはどういう現象でしょうか。本来は、<li>タグの1つ外側の要素である<ul>タグには緑色の地色が指定されているので、内包している<li>タグ全体を覆うように地色が敷かれるはずです。しかし、「float:left;」の指定により、<ul>タグは内包している<li>タグを見失い、地色が上に縮み上がってしまうのです。

　なので、<ul>タグに対して、「あなたが内包している要素を思い出してね〜」と“おまじない”をかけてあげないといけません。「overflow:hidden; zoom:1;」という指定を追記します。

.headmenu ul{
	overflow:hidden; zoom:1;	/*内側の要素にfloatプロパティがあるときのおまじない*/
	margin:0;
	padding:5px;
	list-style:none;
	background:#c3ebbe;	/*メニュー項目全体を覆う地色の指定*/
}

　これできちんと、<li>タグ全体を覆う範囲が、緑の地色で表示されます。

（2）項目が横に並んだメニュー【その2】

　横に並べるもう1つの方法は、「float:left;」の代わりに「display:inline-block;」を使うことです。ダウンロードしたサンプルの中から「sample4」をご覧ください。

/*メニュー項目の設定*/
.headmenu li{
	display:inline-block;		/*この要素を左から横に並べる*/
	margin:0;
	padding:10px;
	border:1px solid #ffffff;
}

　しかし、IE6とIE7では「display:inline-block;」には未対応なので、横に並んでくれません。そこで、「CSSハック」というものを使って、ここだけ別の指定に変更して上書きします。

/*IE6向けの設定*/
* html .headmenu li{
	display:inline; zoom:1;	
}
/*IE7向けの設定*/
*+html .headmenu li{
	display:inline; zoom:1;	
}

　セレクタの冒頭に「* html 」「*+html 」を付けることで、設定がそれぞれIE6とIE7でだけ有効になります。同様のCSSハックはほかにもあるのですが、バリデーション（入力値の検証）に通ることを基準に、これらを選びました。

　さあ、これで完成！ とはまだいきません。「sample4-1.html」をブラウザで開いたとき、メニュー項目同士に間隔が空いていませんか？ 「display:inline-block;」を使うと、IE6、IE7など以外のブラウザでは予期せぬすき間ができてしまうのです。「sample3」と見比べてみると、その違いがお分かりかと思います。

　このすき間は、HTMLの記述で<li>の終了タグ（</li>）から次の開始タグ（<li>）の間に、改行やタブコードが入っていることが原因です。ならば……

<li><a href="#">HOME</a>
<li><a href="#">Introduction</a>
<li><a href="#">Life</a>
<li><a href="#">Blog</a>
<li><a href="#">Contact</a>

と、終了タグ自体を削ってしまいましょう。

　え？ 良いの？ と思われるかもしれませんが、HTML5で書いているならば<li>の終了タグは省略可なので、問題ありません。省略したものが「sample4-2.html」になりますので、すき間がなくなっていることをブラウザで確認してみましょう。

　さて、「float:left;」と「display:inline-block;」の使い分けですが、次に紹介する「横に並べたメニュー項目を中央そろえにレイアウトするか否か？」というのが、1つの基準になるかと思います。単に左寄せに横に並べるだけでしたら「float:left;」の方が対応ブラウザが広く、指定も簡単です。

　しかし、「float:left;」を使ったうえで中央そろえにするときは、メニュー項目の幅を固定にしないといけなかったり、メニュー数が増減したときには幅設定の数値を計算し直したりなど、制作および管理上、手間が掛かります。であれば、対応ブラウザに制限があったり、そのための対処が必要だったりしても、中央そろえにレイアウトするなら「display:inline-block;」の方が融通が利きやすい設定方法といえると思います。