【CSS】1行で背景の色を画面いっぱいにする方法

ページの中で、一部の要素だけ背景色を画面いっぱいに広げたい場面は意外とよくあります。
たとえば見出しやセクションの区切りなど、コンテンツ幅より広く見せたいときです。

私がフルブリードレイアウトを実装する際は、コンテンツに親要素（ラッパー）を設け、その親要素に背景色をつける方法をよく使っていました。
ただ、この方法だと余計に階層が増えてしまうので、個人的にはあまり好ましくない方法だと感じています。

その他にも、ネガティブマージンを使ったり、擬似要素で背景を広げたりといくつか方法がありますが、横スクロールが出たり、思わぬ弊害があったりしてイマイチでした。
しかし最近、シンプルに実装できる方法を見つけたので、今回はそれを紹介します。

border-imageとlviの組み合わせ

まずは結論です。
なんと、この1行だけ。
これをコンテンツそのものに指定するだけ！

border-image: conic-gradient(お好きなカラー) fill 0 / 1 /0 100lvi;

デモ

今まで親要素を増やしていましたがその必要はなく、ネガティブマージンや擬似要素で無理に広げたりすることも必要ないです！
この1行だけで、背景色を画面いっぱいに広げるフルブリードレイアウトが実現できます。
では、実際のコード例と合わせて詳しく解説していきます。

border-image

まず登場するのが、border-imageです。

本来は枠線に画像やグラデーションを設定するためのプロパティですが、
ここではborderを背景のように扱って使っています。

プロパティの細かい仕様はMDNを見てもらうのが一番わかりやすいので、ここではポイントだけをかいつまんで説明します。

conic-gradient()

例えば、conic-gradient()をconic-gradient(#DAF2FF)のように指定します。

• conic-gradient（円錐グラデーション）を使って単色を指定。
• #DAF2FF の1色しか指定していないので、実際は「グラデーション」ではなく「ベタ塗り」になります。

そうすることで、単色背景を border-image に流し込むわけです。

fill

fillを書くと、border部分だけでなく中身（要素の背景部分）まで塗りつぶすことができます。

これがあるから、border-image が実質「背景色を設定するプロパティ」として振る舞います。

このfillが、フルブリードレイアウトを表現するためのひとつ大事なところとなります！

slice / width / outset

この 0 / 1 / 0 100lvi は、スライス / 幅 / アウトセット をまとめて書いたもので、
フルブリードレイアウトを実装するにはこのような指定をします。

• slice = 0 = 分割しない（全部使う）
• width = 1 = 最低限の指定
• outset = 0 100lvi = 横方向に画面いっぱい

この 100lvi の指定も、フルブリードレイアウトを表現するための大事なところとなります！

lviの単位についても説明します。

Large Viewport Inline size

最後に出てきた100lviのlviは、CSSの割と新しい単位のひとつです。MDN

lviは Large Viewport Inline size の略で、
「大きい方のビューポートのインライン方向の長さ」を基準にしています。

インライン方向 = 書字方向に沿った方向（横書きの場合は横軸、縦書きの場合は縦軸のことを指します）
Large = ビューポートの大きい方を基準にする

つまり、画面が縦長でも横長でも、大きい方の辺の長さを基準にしてサイズを決める単位ということです。

今回、100lviと指定しているので、ビューポートの大きい辺に対して100%の画面幅いっぱいになります。

これにより、横スクロールなどの弊害を起こさず、背景色を画面いっぱいに広げられるのです。

おわり

いかがでしたか！

たった1行の CSS で、親要素や余計な調整なしに背景色を画面いっぱいに広げられるのは、ちょっと拍子抜けするくらい簡単ですよね。