HTML5 と CSS3 で Web 制作 : Step06 – aside をレイアウト
ここではアサイド, つまりサイトとは関係のない情報を配置します. そのため他の部分とは少し違うデザインにして消しても違和感のないよう意識して作っています.
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;
お次は, フッターです. 次のステップでほぼ完成です!!
[…] 詳しい解説はこちら. […]