|
|---|
この連載が本になりました！
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。
レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック
定価：2,625円 (本体2,500円)／形態：B5変 (232ページ)
ISBN：978-4-04-886323-0
第4回でWebページの土台となる画像や文字の基本的なCSSを記述したので、今回はヘッダー、メインコンテンツ、フッターなどの各領域のCSSを設定して見栄えを整えていきます。
ヘッダー部分の指定
「枝豆隊」のヘッダー部分のHTMLは以下のようになっていました。
<!-- header -->
<header>
<hgroup>
<h1><img src="assets/images/all-web-logo-seed-mark.png" alt="ロゴ allWebクリエイター塾"></h1>
<h2>豆はカラダにイイ</h2>
</hgroup>
<nav>
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">枝豆一覧</a></li>
<li><a href="">枝豆隊</a></li>
<li><a href="">アクセス</a></li>
</ul>
</nav>
</header>
<!-- //header -->
ヘッダー内のテキストを中央揃えにするため、header要素に対してtext-align:centerを指定し、padding-topに24pxを指定してヘッダー上部に余白を確保します。header要素内のh1要素（サイトロゴ画像）にはmargin-bottom:24pxを指定して余白を持たせ、h2要素（タグライン）の文字色に#62240b（茶色）を指定しておきましょう。
■サンプル1[CSS:style.css]
header { text-align : center;padding-top : 24px}
header h1 { margin-bottom : 24px}
header h2 { color : #62240b}
このCSSを加えた表示結果が、次の図です。
ヘッダー部分の指定を反映した「枝豆隊」
ナビゲーションバーの設定
次に、ul/li要素で記述したナビゲーション部分を均等幅で水平方向に並べます。ナビゲーション部分のHTMLは以下のようになっています。
<nav>
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">枝豆一覧</a></li>
<li><a href="">枝豆隊</a></li>
<li><a href="">アクセス</a></li>
</ul>
</nav>
ナビゲーションバーのメニューは4項目ありますので、1項目あたりの横幅は画面幅（100％）の4分の1、つまり25％になります。li要素のwidthを25%に指定し、float:leftで横並びにしましょう。a要素はdisplay:blockを指定してブロック要素に変換します。
nav ul li { width : 25%; float : left}
nav ul li a { display : block}
ナビゲーションバーの背景はnav要素に指定します。ただし、floatを指定している要素（li要素）の親要素は高さが算出されないため、そのままではnav要素に背景を指定しても表示されません。ul要素にoverflow:hiddenを指定して高さを再計算することで背景がで表示できます。
「枝豆隊」のナビゲーションバーは、backgroundプロパティにCSS3のgradient関数を使ってグラデーションを設定しました。合わせてフォールバックとしてbackground-colorプロパティも設定しておき、CSS3のgradientに対応していないブラウザー（〜IE9など）では茶色の背景で塗りつぶすようにします。
nav要素には24pxのmargin-bottomを指定し、ナビゲーションバーの下には1行分の余白を確保します。
nav {
margin-bottom : 24px;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul { overflow : hidden}
要素を横並びにし、背景を反映したナビゲーションバーが下の図です。
グラデーションを指定したナビゲーションバー
