COMMEND

3つの“D”の視点から
夢あるライフスタイルづくりを提案

Vol.10 レスポンシブWebデザインでつくる「グローバルナビゲーション」

カテゴリー : WEBの現場から！

ヘッダーに続き、グローバルナビゲーションを完成させていく。画像を使わないテキストのナビなので、比較的簡単な作りになっている。まずは、「style.css」の「a要素」のプロパティを「body要素」の下に記述する。
　
「style.css」

/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color:#FFF;
  font-family:'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color:#000;
}
a {
  color:#000;
  text-decoration:none;
}
a:hover {
  color:#555;
  text-decoration:underline;
}

　
続いて「style.css」にグローバルナビゲーションのスタイルを記述する。コード黒枠の右上にマウスオーバーで表示される「ソースを表示」からコピー。
　
「style.css」

@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォン向けレイアウト指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color:#FFF;
  font-family:'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color:#000;
}
a {
  color:#000;
  text-decoration:none;
}
a:hover {
  color:#555;
  text-decoration:underline;
}

/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
  text-align:center;
  margin:0 auto;
}
header h1 {
  padding:15px 5px 15px 5px;
}
header h1 img {
  width:100%;
  height:auto;
  max-width:200px;
}
header img {
  width:100%;
  height:auto;
  max-width:960px;
}

/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
#gnav ul {
  text-align:center;
  margin:0 auto;
}
#gnav ul li {
  float: left;
  width: 50%;
  border-bottom: 2px solid #000;
  padding-top: 15px;
  padding-bottom: 15px;
}
#gnav ul li a{
  display: block;
}

/* タブレット向けレイアウト指定：521px～960px */
@media only screen and (min-width: 521px) {

}

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {

}

　
まずは「全デバイス共通のスタイルとスマートフォン向けレイアウト指定」に重点をおき、2段組み×3列のナビを作っていく。
　
ブレイクポイント

▲2段組みのナビ

　
説明するのは下記のナビゲーションのスタイル

/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
#gnav ul {
  text-align:center;
  margin:0 auto;
}
#gnav ul li {
  float: left;
  width: 50%;
  border-bottom: 2px solid #000;
  padding-top: 15px;
  padding-bottom: 15px;
}
#gnav ul li a{
  display: block;
}

　
「ul要素」全体にセンター揃えの指定をし、「li要素」では「floatプロパティ」に「left」を指定し、要素を左に回り込ませる。2段組みのボックスを作成するので、「li要素」に「width: 50%;」と指定する。「body要素」が「width: 100%;」となっているため、子要素であるidセレクタ「gnav」も値が継承されるので「width: 100%;」となる。すなわち50%と50%の2段組みのナビが、どのデバイスで見ても100%横幅いっぱいに表示されるということである。
　
「border」のスタイルを記述し、「padding」で天地を整える。最後にリストの「a要素」を「ブロックレベル要素」にする。これは元々「a要素」は「インライン要素」であり、高さを持たないためである。なので高さを確保できる「ブロックレベル要素」へと変換する必要があるのだ。これでスマートフォン用の一通りのスタイルは完成。
　
続いて「index.html」にオーソドックスなナビゲーションを記述。
　
「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>MY BLOG</title>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

</head>
<body>
<div id="wrap"> 
	
<!-- ヘッダー -->
	<header> 
		<h1><img src="images/logo.jpg" alt="俺のブログ"></h1>
		<img src="images/topimage.jpg" alt="俺のブログ">
	</header>

<!-- グローバルナビゲーション -->
	<nav id="gnav">
		<ul class="cf">
			<li><a href="#">HOME</a></li>
			<li><a href="#">COLUMN</a></li>
			<li><a href="#">SNS</a></li>
			<li><a href="#">PROFILE</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</nav>

</div><!-- #wrap end -->
</body>
</html>

　
説明するのは下記の部分。

<!-- グローバルナビゲーション -->
	<nav id="gnav">
		<ul class="cf">
			<li><a href="#">HOME</a></li>
			<li><a href="#">COLUMN</a></li>
			<li><a href="#">SNS</a></li>
			<li><a href="#">PROFILE</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</nav>

リンク先はまだ設定しなくて良い。ここで注意が1点。「ul要素」に指定したclassセレクタの「cf」である。これは、「Vol.6 レスポンシブWebデザインの基本構造」のときにダウンロードしてもらった「reset.css」の中に記述されているclassセレクタであり、「回り込み解除」の指定となっている。
　
「reset.css」の下のあたり

/* TRIAINAでは以下のコードを追加しています。 */
ol, ul {
    list-style: none;
}
/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}

　
「float」指定をしている要素に対しての「回り込み解除」である。「class=”cf”」とするだけなので、非常に使いやすい。
　
それでは、実際にPCで見てみよう。
　
【グローバルナビ】
　
ウインドウ幅を広げたり、狭くしたりしてグローバルナビ部分を見てほしい。2段×3列のナビが、どのサイズで見ても横幅が画面全体に100%表示されているのが分かるだろう。これは「body要素」の「width: 100%;」の指定をそのまま継承しているからであり、作成中のサイトは現段階では最大960pxにする必要がある。
　

#gnav ul {
  text-align:center;
  margin:0 auto;
  max-width: 960px;
}

　
「#gnav ul」の中に「max-width: 960px;」としてやるだけである。では見てみよう。
　
「グローバルナビ」
　
これでナビ部分は、960px以上のウインドウサイズでは固定され表示される。次に521px以上では2段×3列のグローバルナビを、横1列にしていく。タブレット向けレイアウト指定の521px～960pxの「メディアクエリ」指定内にCSSを追加（上書き）してやればいい。
　
ブレイクポイント

▲521px以上ではナビが横1列

　

/* タブレット向けレイアウト指定：521px～960px */
@media only screen and (min-width: 521px) {
  #gnav {
    border-bottom: 5px double #000;
    margin-top: 10px;
  }
  #gnav ul {
    margin-bottom: 10px;
  }
  #gnav ul li {
    width: 16.6666667%;
    border-bottom: none;
  }  
}

　
要は、スマートフォン向けスタイルの変更箇所を、タブレット向けスタイルのメディアクエリ指定内で、変更したものを上書きしてやればいいのだ。まずは新たに「#gnav」全体のスタイルを記述。スマートフォン向けのスタイルでは、ナビが3列であったため「li要素」それぞれに「border」の指定をしていたが、今度は横1列、全体のボーダー線を「#gnav」に指定し、「margin」で余白の調整をする。スマートフォン向けスタイルでは「ul要素」には、「max-width: 960px;」を指定していたが、タブレット向けスタイルに追加した「#gnav」全体は「body」の「width: 100%;」を継承しているため、ボーダー線は画面サイズ一杯に表示される。ちなみに「ul要素」はスマートフォン向けスタイルで「max-width: 960px;」と指定しているので、タブレット向けスタイルの「ul要素」も最大幅960pxのままである。変更をメディアクエリ指定内に上書きしない箇所は、そのままの値を共通して持つのである。そして、スマートフォン用スタイルでは「ul要素」の「margin-bottom」が0だったのに対して、タブレット向けスタイルでは、「margin-bottom: 10px;」と上書き。

%でwidth指定

スマートフォン向けスタイルの「li要素」は2段組みだったので「width: 50%;」としていた所を、タブレット向けスタイルでは横1列なので6段にする。pxで指定すると幅が固定されてしまので、521px～960px間を可変にする方法をとらなければいけない。なので、ここでも当然%で指定する。100÷6＝16.6666667となり、タブレット向けスタイルの「li要素」には「width: 16.6666667%;」と上書きしてやる。

不要な値は「none」を指定

最後に、スマートフォン向けスタイルの「li要素」に指定してある「border」の値は、タブレット向けスタイルでは「#gnav」に指定してあるので、不要となる。そこで「border-bottom: none;」として「li要素」の「borderプロパティ」の値を無効にしてしまおう。

共通の値はそのままで

スマートフォン向けスタイルの記述部分は、「全デバイス共通のスタイル」も兼ね備えている。スマートフォン向けスタイルで指定した記述が、タブレット向けスタイルでも共通となるものは、同じ記述をもう一度書き込む必要はない。スマートフォン向けスタイルで変更する部分のみを、タブレット向けスタイルや、PC用固定スタイルで上書きしていけばいいのだ。ここでも「961px以上では固定レイアウト」のPC向けスタイルが、タブレット向けスタイルと同じであるため、記述する必要がないのである。
　
「グローバルナビ完成」
　

▼　▼　▼

　
以上がレスポンシブWebデザインにおける「グローバルナビゲーション」の基本的な構造である。ポイントは%指定をすること。それによりナビが可変となり、あらゆるデバイスの幅にフィットしたものとなるのだ。
　
次回はコンテンツ部分を作成していく。期待して待っていてほしい。
　

このエントリーをはてなブックマークに追加

トリアイナ
新着記事

連載

ランキング

    • It is up to oneself to make an uninteresting world interesting.