背景色の使用

ウェブサイトの背景色は、サイトの雰囲気やトーンを決定する上で重要な役割を果たします。これはユーザーがサイトを訪れた際に最初に目にする主要な視覚要素の一つであり、ウェブサイト全体の印象や雰囲気に大きな影響を与えます。

background-color

このプロパティを使用することで、要素の背景色を設定できます。値は、hex、rgb、rgba、または予約語など、任意の形式で指定可能です。

background-color: value;

静的カラーとグラデーションカラー

静的カラーは、red や #0000FF のように、要素全体に均一に適用される単一の色値を指します。一方、グラデーションカラーは、2色以上を組み合わせて滑らかな色の移り変わりを作り出すものです。

グラデーションカラーを使用することで、静的カラーよりも視覚的に魅力的で動きのあるデザインを作成可能。グラデーションの宣言方法についていくつか紹介します。

なめらかな線形グラデーション

線形グラデーションの背景色を設定するには、次のように記述します：

background-image: linear-gradient("direction", "color1", "color2", ...);

また、グラデーションカラーにおいて色の割合を指定することも可能。

ソリッドな linear-gradient

隣接する色に同じパーセンテージを指定すると、ストライプ状の背景色が得られます。例を実行して違いを確認しましょう。

radial-gradient

**Radial gradient（放射状グラデーション）**は、linearと同様に機能します。唯一の違いは、色が中央から始まり外側へ広がる点です。