HTML5 と CSS3 で Web 制作 : Step03 – nav をレイアウト
今回はナビゲーションをスタイリングしていきます. nav はスタイル指定が最も多い場所ですが, やっていることはシンプルなことばかりなのでご安心を.
SAMPLE
サンプルはこちら.
CODE
ナビゲーションバーのスタイルです. これを style.css に追加します.
#nav { margin-top:20px; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%); background: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%); border-top: 1px solid rgb(227, 224, 213); border-bottom: 1px solid rgb(227, 224, 213); } #nav .inner { width: 1200px; margin:0px auto; } #nav ul { display: -webkit-box; display: -moz-box; display: -o-box; display: box; width: 1200px; height: 40px; margin: 0px auto; list-style: none; } #nav ul li { text-align: center; border-left: 1px solid rgb(227, 224, 213); } #nav ul li:last-child { border-right: 1px solid rgb(227, 224, 213); } #nav ul li a { display: block; width: 120px; height: 40px; padding-top: 10px; color: black; -webkit-transition: 250ms; -moz-transition: 250ms; -o-transition: 250ms; -ms-transition: 250ms; transition: 250ms; } #nav ul li a:hover { box-shadow: 0px 0px 10px #aaa; background: white; }
POINT
お馴染みのグラデーション
上から下にかけて白色のアルファグラデーションをかけています. 背景の青が透けてちょっと良い感じ♪♪
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%); background: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
display: box; でフレキシブルボックスレイアウト
横並びにするための設定です. 詳しくはこちら.
display: -webkit-box; display: -moz-box; display: -o-box; display: box;
リストの横の点々を非表示に
ul 要素はデフォルト左側に点が表示されてしまうので表示されないよう設定します.
list-style: none;
左右にラインを入れて区切りを
全てのli要素の左側に縦ラインを入れて, 最後の要素のみ右側にもラインを入れています.
#nav ul li { text-align: center; border-left: 1px solid rgb(227, 224, 213); } #nav ul li:last-child { border-right: 1px solid rgb(227, 224, 213); }
transition と hover の組み合わせで簡単アニメーション
トランジションアニメーションについてはこちら.
#nav ul li a { display: block; width: 120px; height: 40px; padding-top: 10px; color: black; -webkit-transition: 250ms; -moz-transition: 250ms; -o-transition: 250ms; -ms-transition: 250ms; transition: 250ms; } #nav ul li a:hover { box-shadow: 0px 0px 10px #aaa; background: white; }
これで頭の部分は完成です!! お次はコンテンツに入ります.
[…] Step03 – nav をレイアウト […]