このページの本文へ

DESIGN ゼロから始めるレスポンシブWebデザイン入門 ― 第5回

CSSでスマートフォンでも見やすくスタイリング

2012年07月02日 11時00分更新

菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷
responsive

この連載が本になりました!

本連載で紹介したレスポンシブ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を加えた表示結果が、次の図です。

2-4-zu01.png
ヘッダー部分の指定を反映した「枝豆隊」

ナビゲーションバーの設定

 次に、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}

 要素を横並びにし、背景を反映したナビゲーションバーが下の図です。

2-4-zu02.png
グラデーションを指定したナビゲーションバー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング