【CSS】親要素を無視して画面いっぱいに背景色を設定する

はじめに

Webページの背景色を設定するためには、一般的にbody要素に対して背景色を設定することが多いです。しかし、親要素によってはbody要素が画面全体に広がらない場合があります。そこで、親要素を無視して画面いっぱいに背景色を設定する方法を紹介します。

コード

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // 広げた要素に充てたいスタイル
  background-color: #f2f2f2;

上記のCSSでは、position: fixedを指定することで、要素を画面全体に広げることができます。また、top、left、right、bottomプロパティに0を指定することで、画面の四隅に要素を配置することができます。これにより、親要素を無視して画面いっぱいに背景色を設定することができます。

まとめ

親要素によってbody要素が画面全体に広がらない場合には、上記のCSSを使用することで親要素を無視して画面いっぱいに背景色を設定することができます。このCSSを活用すれば強引に画面いっぱいに広げる魔改造が出来上がるでしょう笑