CSSを使用したフルヘイトのカラーグラデーション背景の実装方法

2024-02-15 13:01 CSS グラデーション フルヘイト
  1. CSS linear-gradient() 関数を使用する方法: linear-gradient() 関数は、直線的なグラデーションを作成するために使用されます。以下のコード例では、body要素に対してフルヘイトのグラデーション背景を設定しています。
body {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
  height: 100vh;
}

この例では、上部から下部へのグラデーションを表現しており、開始色は赤(#ff0000)、終了色は青(#0000ff)です。

  1. CSS radial-gradient() 関数を使用する方法: radial-gradient() 関数は、放射状のグラデーションを作成するために使用されます。以下のコード例では、body要素に対してフルヘイトの放射状グラデーション背景を設定しています。
body {
  background: radial-gradient(circle, #ff0000, #0000ff);
  height: 100vh;
}

この例では、中心から外側に向かってグラデーションが広がる放射状の効果を表現しています。

  1. CSS background-image プロパティを使用する方法: background-image プロパティを使用して、画像ファイルを背景として使用することもできます。以下のコード例では、body要素に対してフルヘイトの画像を背景として設定しています。
body {
  background-image: url('gradient.jpg');
  background-size: cover;
  height: 100vh;
}

この例では、gradient.jpg という画像ファイルを背景として使用し、background-size プロパティを使用して画面全体に広がるように調整しています。

これらはいくつかの基本的な方法ですが、さまざまな他の方法もあります。使用する方法は要件と好みによって異なる場合があります。以上の方法を参考に、自分のプロジェクトに最適な方法を選択してください。