くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[レスポンシブ]レスポンシブWebデザイン③

ヘッダーとナビゲーションの設定をレスポンシブWebデザイン(以下「レスポンシブ」)用に行います。

 

<ヘッダー>  header

ヘッダー部分はレスポンシブ用の設定は特になし。

  1. ヘッダーテキストを中央揃えにする
  2. ロゴ上下の空きを24pxにする
  3. 「豆はカラダにいい」の文字色を設定する

header {
  text-align: center;
  padding-top: 24px;
}
header h1 {
  margin-bottom: 24px;
}
header p {
  color: #62240b;
}

 

<ナビゲーションメニュー>  nav

  1. 水平方向に並べる
  2. 背景にグラデーションを設定
  3. 画面幅が変わっても、1項目の幅は全体の4分の1を保つようにする
  4. ナビゲーションメニューの高さを48pxにする
  5. ホバーした時背景と文字色が変わるようにする

 

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;
}

 

ここまでの設定を反映したものがこちら↓↓

f:id:pleasure10501:20150523214743p:plain