画面幅いっぱいに背景色を敷くCSS実装
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
全3回
ブラウザのウィンドウの幅いっぱいに背景色を敷くことは、一見、簡単そうですが、意外と難航する場面があります。このシリーズではそれらのCSS実装手法を紹介します。
最終回 box-shadow、border-imageを使う方法
今回は少しトリッキーですが、box-shadowやborder-imageを背景色として利用する方法を紹介します。トリッキーゆえに、印刷時の挙動など念頭においておかなければならないこともあります。
第2回 負の値のマージンを使う方法
幅が固定されていて全体を囲む要素があった場合、なにもしないと子要素は親要素以上の幅に広がれません。この記事では負の値のマージンを使って、親要素幅を超えて、画面幅いっぱいに広がる手法を紹介します。
第1回 全体を囲まない方法
ブラウザのウィンドウの幅いっぱいに背景色を敷くことは、一見、簡単そうですが、意外と難航する場面があります。画面いっぱいに背景色を敷く方法のひとつとして全体を囲まない方法を紹介します。