HTML5 と CSS3 で Web 制作 : Step03 – nav をレイアウト

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回はナビゲーションをスタイリングしていきます. nav はスタイル指定が最も多い場所ですが, やっていることはシンプルなことばかりなのでご安心を.

thumb

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

これで頭の部分は完成です!! お次はコンテンツに入ります.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT