[レスポンシブ]レスポンシブWebデザイン③
ヘッダーとナビゲーションの設定をレスポンシブWebデザイン(以下「レスポンシブ」)用に行います。
<ヘッダー> header
ヘッダー部分はレスポンシブ用の設定は特になし。
- ヘッダーテキストを中央揃えにする
- ロゴ上下の空きを24pxにする
- 「豆はカラダにいい」の文字色を設定する
header {
text-align: center;
padding-top: 24px;
}
header h1 {
margin-bottom: 24px;
}
header p {
color: #62240b;
}
<ナビゲーションメニュー> nav
- 水平方向に並べる
- 背景にグラデーションを設定
- 画面幅が変わっても、1項目の幅は全体の4分の1を保つようにする
- ナビゲーションメニューの高さを48pxにする
- ホバーした時背景と文字色が変わるようにする
1.水平方向に並べる
li要素に float:left を設定
ul要素に overflow: hidden を設定
2.背景にグラデーションを設定
nav {
background: #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 */
}
3.画面幅が変わっても、1項目の幅は全体の4分の1を保つようにする
li要素のwidthを25%にする
nav li{
width: 25%;
float: left;
}
4.ナビゲーションメニューの高さを48pxにする
文字の高さだけでは24pxしかなく、タッチパネルでは押しづらいため。高さを24pxに保ったレイアウトを維持する
li a要素の上下のpaddingを12pxにする。
nav li a {
display: block;
color: #d8c2a4;
padding: 12px 0; /*上下12pxずつ設定すると、高さが48pxになる*/
}
5.ホバーした時背景と文字色が変わるようにする
nav li a:hover {
color: #FFF;
background: #7d4934;
}
ここまでの設定を反映したものがこちら↓↓