CSS3で横並びのメニューを簡単に作る方法

HTML5とCSS3って、IEを考えるとまだまだ先かな・・・と思っていたのですが、スマートフォンの登場で事情が変わってきました。
スマートフォンサイトだとIEを気にしなくていいので、HTML5とCSS3を使えるっ。
というわけで、CSS3で横並びのメニューをさくっと作ります。

画面いっぱいの横並びメニュー

今回作るのはこんなメニューです。

Firefox、GoogleChrome、Safari、iPhone、androidに対応していますが、
InternetExplorerには対応していません、見ると崩れます（IE9ではどうなのかな？）。


メニューのHTMLは従来どおり、liタグでこんな感じにしておきます。

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Information</a></li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">Contact</a></li>
</ul>

従来なら「float:left」で回り込ませるのですが、今回はCSS3の「display:box」と「box-flex:1」を使います。
親要素であるulに「display:box」と「width:100%」を指定し、横並びにする子要素であるliに「box-flex:1」を指定します。

ul {
	display: -webkit-box;
	display: -moz-box;
	width: 100%;
}

li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}

これだけで、画面いっぱいの横並びメニューが出来ます。
（※デザインする為のスタイルは省略しています）

ulに「width:100%」が指定されていないと、左に詰まってしまいますので注意。
floatした後にclearしたり、clearでうまく行かないときはclearfix使ったり、幅があわずにメニューが入りきらずに落ちたりしていた苦労は一体何だったのか・・・
サンプル1



これはこれでいいのですが、メニューの幅を均等にしたい場合は、li要素に対して適当にwidthを設定します。

li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	
	width: 1000px;
}

そうすると、各メニューの幅が均等になります。
簡単ですねーっ！

サンプル2



CSS3とは関係ないですが、パンくずやサブメニューは横いっぱいに配置したり、均等配置する必要もないので、「display:inline」を使ってするといいと思います。

li {
	display: inline;
}

パンくずならliを使わずに普通にpで書いてしまってもいい気がするんですが、それはそれで。
サンプル3
※サンプルでは「>」を、CSSの:after疑似要素で記述しています。


挙動の確認に関してiPhone系はiPhone4、iPod touch第三世代で確認。
android系はau IS03、docomo GALAXY S、エミュレータではandroid1.6でも一応確認していますが、間違いなどあれば指摘していただけると嬉しいです。



[参考]
CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture