CSS3時代のナビゲーションの作り方-スマートフォン対応編

今回は前回の「CSS3時代のナビゲーションの作り方」で作ったナビゲーションをスマートフォンに対応させていきます。

Viewportの追加

ひとまず前回のページをiPhoneで表示させてみるとこんな風に見えます。

これだと小さくて目標物をタップするためにわざわざピンチアウト(拡大)する必要があります。
ページ遷移のたび、ユーザーにそんなご足労かけさせるわけにはいかないので、Viewportで端末の画面幅を設定します。

<meta name="viewport" content="width=device-width, initial-scale=1" />

大体、これが鉄板ですかね。
詳しく知りたい方は「Viewport [iPhone生活]」がとても参考になります。

ひとまずこれで端末の幅の範囲内でコンテンツが縮小されずに表示されるようになりました。

しかし、このままではコンテンツが収まりきってないのでCSSを調整していきます。

CSSの調整

今回はスマートフォンの場合のみのスタイルを適応したいので、メディアクエリを使うことにします。

メディアクエリとは、普段HTMLでcssファイルを読み込む際にlink要素に書いているmedia属性を拡張したもので、スクリーンサイズや端末の解像度を指定してスタイルを振り分けることができるようになります。

こんなやつ

<link rel="stylesheet" href="css/style.css" media="all">

とっても詳しいことは「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」に任せるとして、「Hardboiled CSS3 Media Queries | Stuff & Nonsense」を参考に鉄板なやつを書いておきますか。

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
/* Styles */
}

でも、これはiPhoneが基準なのでAndroidだと端末のディスプレイの高さ(「max-device-width: 480px」にあたる部分)がバラバラなおかげで端末を横向きにした場合にスタイルが効いてないことが多いです。
横向きでも合わせたい場合はメディアクエリではなく、エージェントでページなりcssファイルを振り分けたほうが無難でしょう。

なので、今回は端末が縦向きの状態且つ幅480px以内のスマートフォンを対象ということを前提に話をすすめます。

ひとまずは描画範囲におさまるように調整しましょう。

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
	ul {
		width: 100%;
		border: none;
	}
	ul li {
		width: 20%;
		background: url(../img/line.png) no-repeat right top; /* 2px(黒1px・グレー1px)のライン */
		border: none;
		font-size: 14px;
	}
}

widthで端末の幅いっぱい100%を指定して、li要素は項目が5つあるので100%を5で割って1つずつの幅を20%に指定します。
borderがあるとwidthとは別に余計なスペースをとってしまうので、ボーダーは背景画像にして100%ぴったり収まるようにしてます。

一番右のラインは邪魔なのでCSS3で使える:last-child擬似セレクタを使って消えてもらいましょう。

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
	/* 省略 */
	ul li:last-child {
		background: none;
	}
}

これでとりあえず見た目はできてますが、タップ(a:hoverにあたる)した時にラインが消えてしまいます。

原因としては、言葉で説明するよりも以下の図を見てもらったほうが早いでしょう。

今までならこれだけのために文字をspanで囲んだり、色々と小細工をしていたかもしれませんが、今後はそんな心配はありません。
これからはbackgroundが複数指定できるようになります。そう、CSS3ならね。

ということで、backgroundを複数指定する方法は簡単。「,」で区切るだけです。

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
	/* 省略 */
	ul li a:hover {
		background: url(../img/line.png) right top no-repeat,
			     -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(50%,#030303), color-stop(51%,#1c1c1c), color-stop(100%,#5a5a5a)) left top repeat-x;
			     /* ライン,グラデーション(この順番じゃないとラインが表示されない) */
	}
	ul li:last-child 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));
	}
}

これでタップをした時もラインが表示されるようになり、完成です。
デモページ(スマートフォンのディスプレイの幅が480px以内を対象且つWebkitを搭載しているブラウザ)

前回のdisplyの値「box」に加え、今回はViewportやMedia Queries(メディアクエリ)、backgroundに複数指定ができることがわかりました。
今回のナビゲーションは一つの例であって、様々な場面で使うことがあることでしょう。
現状でCSS3のプロパティ・値まで細かく覚えておく必要もないですが、いざCSS3を使う時になったときにどんなことができるか知ってるか知らないのでは、HTMLのマークアップ時点で大きな差がつくことでしょう。

また、「自分はデザインメインだから関係ない」って人には余計に知っておいてもらいたいです。
今まで苦労かけそうだなぁってデザインがCSS3なら簡単にできる可能性があることを。それによりデザインに妥協をする必要がなくなることを。


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

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

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

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

この記事の先頭へ