CSS3で画像を一切使わずに美しいナビを作ってみた！（IE対策もしてみた）

姐さん

2012.06.06

Web制作

今回はCSS3のみで１pxのラインまでデザインされたナビゲーションを作ってみました。

□demo

□サンプル.zip

参考までに・・・こちらがPhotoshopで制作したナビゲーションです。（画像使用）

次にこちらが今回CSS３のみで作成したナビゲーションです。（画像不使用　Win7　Firefox12.0でキャプチャ）

どうでしょう？さほど違いはないんじゃないでしょうか？

HTML

<ul id="menu">
	<li class="first active"><a href="#">デザイナー</a></li>
	<li><a href="#">プログラマー</a></li>
	<li><a href="#">社長ブログ</a></li>
	<li class="last"><a href="#">お空</a></li>
</ul>

HTMLソースはわずかこれだけ！
本当はクラス名の「first」「last」の部分も「:first-child」「:last-child」等の擬似クラスを使えば不要なんですけどね・・。IE8がね・・・「:last-child」に対応してないのですよ。firstには対応しているのに！！なのでクラス名を振りました。
今回はあくまでIEでも表示できるサンプルにしたかったので。

CSS

#menu {
	width:576px;
	padding:0;
	margin:0;
	list-style-type: none;
}
#menu li {
	width:24%;
	float:left;
	padding:0;
	margin:0;
	text-align:center;
	font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}
#menu li a {
	position:relative;
	width:auto;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-shadow:0 -1px 0px #333,0 1px 0px #555;
	padding:10px 0;
	text-decoration:none;
	display:block;

	/*全体のグラデーション*/

	background: #2b606e;/*IE9の背景用*/
	background: -webkit-linear-gradient(top, #6fa7bc 0%, #3b7b91 50%, #2f6474 50%, #2b606e 100%);/*Google Chrome、Safari*/
	background: -moz-linear-gradient(top, #6fa7bc 0%, #3b7b91 50%, #2f6474 50%, #2b606e 100%);/*Firefox用*/
	background: -o-linear-gradient(top, #6fa7bc 0%, #3b7b91 50%, #2f6474 50%, #2b606e 100%);/*Opera*/
	background: -ms-linear-gradient(top, #6fa7bc 0%, #3b7b91 50%, #2f6474 50%, #2b606e 100%);/*Internet Explorer*/
	background: linear-gradient(top, #6fa7bc 0%, #3b7b91 50%, #2f6474 50%, #2b606e 100%);

	border-left:1px solid #1f5260;/*仕切り線*/

	box-shadow: 1px 0px 0px rgba(225,225,225,0.4) inset,/*1pxのハイライト*/
			    -1px 0px 0px rgba(225,225,225,0.2) inset,/*1pxのハイライト*/
			    0px 1px 1px rgba(0,0,0,0.1) inset,
			    0px -1px 1px rgba(0,0,0,0.3) inset,
			    0px 1px 3px #666;

	-pie-background: linear-gradient(top, #6fa7bc 0%, #3b7b91 50%, #2f6474 50%, #2b606e 100%);/*PIE用*/
	behavior: url("/PIE.htc");

}

/*先頭の角丸*/

#menu li.first a{
	border-left:0px;
	border-radius:8px 0 0 8px;
	-moz-border-radius:8px 0 0 8px;
	-webkit-border-radius:8px 0 0 8px;
	-o-border-radius:8px 0 0 8px;
	-ms-border-radius:8px 0 0 8px;

	border-left:0;

	behavior: url("/PIE.htc");
}

/*最後の角丸*/

#menu li.last a {
	display:block;
	border-radius:0 8px 8px 0;
	-moz-border-radius:0 8px 8px 0;
	-webkit-border-radius:0 8px 8px 0;
	-o-border-radius:0 8px 8px 0;
	-ms-border-radius:0 8px 8px 0;

	behavior: url("/PIE.htc");
}

少し長いのでhoverとactiveの部分は割愛しています。CSS全体はこちらをご確認ください。

表示させたいブラウザを絞ればCSSももっとすっきりすると思います。今回は複数のブラウザで表示させたかったのでベンダープレフィックス満載です。

画像を一切使わずともCSS3のみで1pxのラインまで表現できてしまうんですね～！！このラインはbox-shadowによって表現されています。
box-shadowは要素の幅とは関係なくかかってくれるので後から修正がきてスライス書き出し直さなきゃ～なんてこともないので便利ですね！

box-shadowを使った1pxのラインについては下記のサイトで更に詳しく掲載されています！

□Webpark：
細部にこだわってみた！CSS3を使った美しい横メニューの作り方