CSSでページの背景色を二分割にする方法をご紹介します!

こんにちは。KOUKIです。

本記事は、以下で学んだアプリケーションの「スタイル」に関する記事です。

見ての通り、このアプリケーションの背景色は二分割にされています。これはCSSだけで実装されていて、しかもめちゃくちゃ簡単なので、その方法を記事にしました。

HTMLのソースコード

次のHTMLのソースコードを用意してください。必要なものは、HTMLの基本テンプレートのみです。

現状では、以下のようになっています。

背景色を二分割にする

早速、CSSでスタイルを実装しましょう。

最初に、background-imagelinear-gradientを設定します。

background-image は CSS のプロパティで、要素に1つ以上の背景画像を設定します。

linear-gradient() 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。

今回は、ブラウザの上部から下部に向かうグラデーションで、0~50%が薄い青、50~100%が濃い青になるように設定しています。尚、「to bottom」を指定しているので、ブラウザの上部が0%で始まります。

ブラウザをリロードすると次のように表示されます。

ストライプの様になっていますが、高さを設定すると〇〇%(高さ)が効くようになります。

ほとんどOKなのですが、スクロールバーがイケてないですね。

marginをつけましょう。

これで完成です。

応用

「to bottom」の指定を変更するとイメージが変わります。

「to bottom」-> 「to right」

「to bottom」-> 「to left」

「to bottom」-> 「to top」

おわりに

background-imageとlinear-gradientのコンボは、結構使えそうですね。知っておいて損はないと思います^^

それでは、また!

cssまとめ

コメントを残す