CSS3時代のナビゲーションの作り方

ここ最近スマートフォン向けのHTMLコーディング(CSS・JavaScript含む)をすることが途端に増えました。
CSS3で追加されたプロパティについては結構知ってる人は多いと思うけど、今までの使用していたプロパティに新たに追加された「値」についてはあまり知ってない人が多いように思います。

そこで今回はCSS3で新たに追加された「プロパティ・値」を使って、すぐに使える(少なくともスマートフォン向けページでは)ナビゲーションの作り方を紹介します。
※Webkit搭載のブラウザを対象としています。AndroidのFirefoxやOperaなどWebkitを搭載してないブラウザやHTML5未満のブラウザに対応してません。必要に応じて個別に対応してください。

今回はこんな感じのありきたりなナビゲーションを作ることにします。

HTML5でマークアップ

どうせなんでHTML5でマークアップします。

<!--省略-->
<nav>
<ul>
<li><a href="">餃子</a></li>
<li><a href="">カレー</a></li>
<li><a href="">寿司</a></li>
<li><a href="">焼肉</a></li>
<li><a href="">ラーメン</a></li>
</ul>
</nav>
<!--省略-->

CSSの記述

nav要素

nav要素は背景のグラデーションやドロップシャドウなどブラウザの幅いっぱい伸びる部分になります。
デザインしたグラデーションをCSS3で書き出すには「Ultimate CSS Gradient Generator – ColorZilla.com」が大変便利です。

* {
	margin: 0; padding: 0;
}
nav {
	height: 54px;
	border-bottom: 1px solid #FFF;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5a5a), color-stop(50%,#1c1c1c), color-stop(51%,#030303), color-stop(100%,#000000)); /* グラデーション */
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.6); /* ドロップシャドウ */
}

ここまでのイメージ

ul要素

ul要素でセンタリング、そしてCSS3でdisplayプロパティに新たに追加された値「box」を指定しておきます。
「box」が指定された要素内のブロック要素は横並びに自動的になります。
なので、今までナビゲーションを作るときにli要素に指定していた、float: leftやdisplay: inlineなど使う必要がありません。

ul {
	margin: 0 auto;
	width: 800px;
	display: -webkit-box; /* 横並び */
	border-right: 1px solid #5a5a5a;
	border-left: 1px solid #000;
	list-style: none;
}

ここまでのイメージ

li要素

li要素は主に文字の装飾などします。

ul li {
	width: 158px; height: 100%;
	border-right: 1px solid #000;
	border-left: 1px solid #5a5a5a;
	font-size: 24px;
	line-height: 54px;
	text-align: center;
	text-shadow: 0 -1px 0 #000; /* 文字にドロップシャドウ */
}
ul li a {
	display: block;
	color: #FFF;
	text-decoration: none;
}
ul li a:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(50%,#030303), color-stop(51%,#1c1c1c), color-stop(100%,#5a5a5a)); /* グラデーション */
}

完成イメージ

実際に見てみる(ChromeやSafariなどWebkit搭載ブラウザのみ)

次回はスマートフォン向けに対応するべく、メディアクエリの使い方をふまえながら、解説していこうと思います。


この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ