20200626 おさらいナビゲーションの奮闘① display: block; :hovor
ナビゲーション の設定（CSSにて）
①ナビゲーションの背景色の設定
.nav{
background-color: #4caf50;
margin-top: 30px;
}
②ナビゲーションのスタイルをリセットする方法
.nav ul{
list-style: none;→・を消す
padding-left:0 ;→左寄せにする
margin:0 ;
text-decoration: none;
display: flex;→リストを横並び
justify-content: center;→横並びにしたリストを真ん中に寄せる
}
④ナビゲーションボタン（全域）に色やサイズ等を決める
.nav li a{
background-image: url(img/bg.png);→ボタンの背景色
display: block;→インライン要素（a要素）にブロック要素を持たせる
width: 180px;↑によってwidth,heightが使用可能になる
height: 60px;
margin: 3px 1px 3px 0px;→ボタンとボタンの間の間隔
text-align: center;→ボタンの文字を真ん中に持ってくる
padding-top: 15px;→ボタンの文字が上部にあるので真ん中に移動させる
text-decoration: none;
color:#333 ;→文字色
}
⑤ナビゲーションボタンのうち１つだけ背景色、サイズを変えたものにする
（class名はpickup）
.nav .pickup a{
background-color: #E91E63;→背景色（これは赤っぽい色）
display: block;
width: 240px; ※この設定を行う時はボタンにサイズの指示があるとき
height: 60px;
}
⑥マウスカーソルを合わせた時に変化させる
.nav li a:hover{
background-color:#ffffff;→マウスカーソルを合わせると背景が白色に変色する。
}
ー課題ー
①～⑥の作成手順をまずは頭にすり込んでいきたい
慣れてきたら所々で細かい設定に手を加えられるようにする。
