HTML5 と CSS3 で Web 制作 : Step07 – footer をレイアウト
最後はフッター部分です. グラデーションのかかり方が違うだけでほぼヘッダーと同じです.
SAMPLE
サンプルはこちら.
これでほぼ完成!!
CODE
これを style.css に追加します.
/** * footer */ #footer { min-height:300px; padding-top: 10px; background: rgb(0, 68, 204); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204); background: linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204); box-shadow: 0px 0px 8px 0px #555; color: white; text-align: center; } #footer .footer-links ul, #footer .footer-links ol { display: -webkit-box; display: -moz-box; display: -o-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; box-pack: center; list-style: none; } #footer .footer-links ul li { text-align: center; padding: 0px 10px; } #footer .footer-links ul li:not(:last-child), #footer .footer-links ol li:not(:last-child) { border-right: 1px solid white; } #footer a { color: white; }
POINT
はいキタ! お馴染みグラデーション!
ヘッダでは円形グラデーションを使用しましたが, こちらでは線形グラデーションを使用しています. 青っぽい色の上に白のグラデーションを重ねています.
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204); background: linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
こちらもお馴染み フレキシブルレイアウト
詳しい説明は必要ありませんね. なんだったっけ?って方はこちらへ.
display: -webkit-box; display: -moz-box; display: -o-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; box-pack: center;
not 擬似クラスを使って最後以外の要素にスタイルを適応
ちょっとした小技です. :not(last-child) と指定することで, 最後以外の要素にスタイルを適応することができます.
#footer .footer-links ul li:not(:last-child), #footer .footer-links ol li:not(:last-child) { border-right: 1px solid white; }
これで完成です! お疲れ様でした!! 私のモットーは作ってナンボ. どれだけ学んでもそれを活用しないと意味がありません. アウトプットの面白さを感じていただければ幸いです.