2018年07月10日(火)

CSSで左右に別々の背景を連続させる方法

• 0
• 2
• 2
• 9

Webページ上で左右に違う背景を連続させるのは以前はわりと手間のかかることでしたが
CSSの進化と共に疑似要素やグラデーションを使ってとても簡単に実装することが可能になりました。

そんな背景を左右で違うものを連続させる方法について
CSS疑似要素の「:before」と、CSSグラデーションを使った
2パターンで実装する方法を紹介してみます。

【:before】CSSで左右に別々の背景を連続させる方法

【:before】を使って画面全体で背景を2分割するパターン

「【:before】を使って画面全体で背景を2分割するパターン」サンプルを別枠で表示

まずは疑似要素の「:before」を使って
body全体（画面全体）で背景を2分割する方法です。

上記のサンプル画面では画面左が赤、画面右が黒の背景が
ブラウザ枠を伸ばしても連続して表示されます。

これを実装するにはHTMLには特に記述する必要があるものはなく、
CSS...