こんにちは。KOUKIです。
本記事は、以下で学んだアプリケーションの「スタイル」に関する記事です。
見ての通り、このアプリケーションの背景色は二分割にされています。これはCSSだけで実装されていて、しかもめちゃくちゃ簡単なので、その方法を記事にしました。
<目次>
HTMLのソースコード
次のHTMLのソースコードを用意してください。必要なものは、HTMLの基本テンプレートのみです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Animated Navigation</title> </head> <body> </body> </html> |
現状では、以下のようになっています。
背景色を二分割にする
早速、CSSでスタイルを実装しましょう。
最初に、background-imageとlinear-gradientを設定します。
|
1 2 3 4 5 6 7 8 9 |
body { background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% ); } |
background-image は CSS のプロパティで、要素に1つ以上の背景画像を設定します。
linear-gradient() 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。
今回は、ブラウザの上部から下部に向かうグラデーションで、0~50%が薄い青、50~100%が濃い青になるように設定しています。尚、「to bottom」を指定しているので、ブラウザの上部が0%で始まります。
ブラウザをリロードすると次のように表示されます。
ストライプの様になっていますが、高さを設定すると〇〇%(高さ)が効くようになります。
|
1 2 3 4 5 6 7 8 9 10 |
body { background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% ); height: 100vh; } |
ほとんどOKなのですが、スクロールバーがイケてないですね。
marginをつけましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
body { background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% ); height: 100vh; margin: 0; } |
これで完成です。
応用
「to bottom」の指定を変更するとイメージが変わります。
「to bottom」-> 「to right」
「to bottom」-> 「to left」
「to bottom」-> 「to top」
おわりに
background-imageとlinear-gradientのコンボは、結構使えそうですね。知っておいて損はないと思います^^
それでは、また!
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。