HTML5 と CSS3 で Web 制作 : Step06 – aside をレイアウト

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

Pocket

ここではアサイド, つまりサイトとは関係のない情報を配置します. そのため他の部分とは少し違うデザインにして消しても違和感のないよう意識して作っています.

thumb

SAMPLE

サンプルはこちら.

ここはかなり着飾ります.

CODE

これを style.css に追加します.

#side {
    padding: 10px;
    width: 300px;
    
    border-right: 1px solid #ccc;
}

#side .side-box {
    margin: 10px 5px 25px;
    border-radius: 10px 0px;
    box-shadow: 0px 0px 8px 0px #aaa;
    
    -webkit-transition: 250ms;
    -moz-transition: 250ms;
    -o-transition: 250ms;
    -ms-transition: 250ms;
    transition: 250ms;
}

#side .side-box:hover
{
    box-shadow: 0px 0px 16px 2px #aaf;
}

#side .side-box h1 {
    padding: 5px 15px;
    background-color: #0066FF;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    background: linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    border-radius: 10px 0px 0px 0px;
    
    color: white;
    font-size: 15px;
}

#side .side-box .contents
{
    padding: 10px;
}

#side .side-box .contents ul,
#side .side-box .contents ol
{
    list-style: none;
}

#side .side-box .contents li
{
    margin: 4px 0px;
    border-bottom: 1px dashed #aaa;
}

POINT

角丸にして画像感を演出

左上のみを角丸にしています.

border-radius: 10px 0px;

ボーダーを使わずボックスシャドウでラインを表現

オフセットは 0 とし 8px のぼかしを入れることでボックスを囲うように影が表示されます.

box-shadow: 0px 0px 8px 0px #aaa;

トランジションでホバーアニメーション

transition プロパティに数値を設定し, hover時のプロパティを設定することで 簡単にアニメーションさせることができます. ちなみに数値に設定している 250ms は 250ミリ秒だということです.

#side .side-box {
    margin: 10px 5px 25px;
    border-radius: 10px 0px;
    box-shadow: 0px 0px 8px 0px #aaa;
    
    -webkit-transition: 250ms;
    -moz-transition: 250ms;
    -o-transition: 250ms;
    -ms-transition: 250ms;
    transition: 250ms;
}

#side .side-box:hover
{
    box-shadow: 0px 0px 16px 2px #aaf;
}

グラデーションで光感を!!

上から真ん中まで, 真ん中から下までを区切りをつけつつグラデーションさせることで光があたったような演出にすることができます. iPhone が多用しているやつですね.

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
background: linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;

お次は, フッターです. 次のステップでほぼ完成です!!

TRACK BACK URL

POST COMMENT

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

COMMENT