Webデザイナーブログから学ぶホームページ制作

ウェブデザインにおいて、背景色は重要な要素の一つです。単一の色ではなく、グラデーション（色の変化）を用いることで、より鮮やかで魅力的なデザインを実現することができます。
ボタンや背景の色をグラデーションにさせたい場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「background」プロパティや「background-image」プロパティに「linear-gradient」「repeating-linear-gradient」「radial-gradient」「repeating-radial-gradient」「conic-gradient」「repeating-conic-gradient」関数を使うことで背景色をグラデーションに指定することができます。

今回は、CSSで背景色をグラデーションにする方法を解説します。

ボタンや背景の色をグラデーションにする場合は、「background」プロパティや「background-image」プロパティに「linear-gradient」「repeating-linear-gradient」「radial-gradient」「repeating-radial-gradient」「conic-gradient」「repeating-conic-gradient」関数を使って配置します。6つの関数で指定することが出来ますが、各関数によって要素内容が異なります。

「linear-gradient」関数は、線形グラデーションを指定する要素です。

「linear-gradient」関数は、「グラデーションの角度または方向」「開始色」「途中色」「終了色」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
グラデーションの角度または方向の値の指定方法は、「45deg」などの角度を指定する方法と「to right」のように左から右へと方向を指定する方法があります。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。

linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色); 

.box1 {
  margin:0 auto 5%;
  padding:10px;
  background: linear-gradient(90deg, rgb(250, 192, 215), rgb(251, 126, 176), rgb(240, 75, 141));
}

「repeating-linear-gradient」関数は、反復線形グラデーションを指定する要素です。

「repeating-linear-gradient」関数は、「グラデーションの角度または方向」「開始色 位置」「途中色 位置」「終了色 位置」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
グラデーションの角度または方向の値の指定方法は、「45deg」などの角度を指定する方法と「to right」のように左から右へと方向を指定する方法があります。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。

repeating-linear-gradient(グラデーションの角度または方向, 開始色 位置, 途中色 位置, 終了色 位置); 

.box2 {
  margin:0 auto 5%;
  padding:10px;
  background: linear-gradient(90deg, rgb(253, 43, 67) 20%, rgb(253, 43, 236) 50%, rgb(147, 43, 253) 80%);
}

「radial-gradient」関数は、放射状グラデーションを指定する要素です。

「radial-gradient」関数は、「形状とサイズ at 中心位置」「開始色」「途中色」「終了色」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
放射状グラデーションの形状とサイズの値の指定方法は、「circle at center」などの角度を指定する方法とグラデーションの中心 (0％ の楕円の位置) と、末端図形 (100％ の楕円) の大きさと形状を示すことで指定します。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。

radial-gradient(形状とサイズ at 中心位置, 開始色, 途中色, 終了色); 

.box3 {
  width:300px;
  height:300px;
  margin:0 auto 5%;
  padding:10px;
  background: radial-gradient(circle at center, rgb(250, 192, 215), rgb(251, 126, 176), rgb(240, 75, 141));
}

「repeating-radial-gradient」関数は、反復放射状グラデーションを指定する要素です。

「repeating-radial-gradient」関数は、「形状とサイズ at 中心位置」「開始色 位置」「途中色 位置」「終了色 位置」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
反復放射状グラデーションの形状とサイズの値の指定方法は、「circle at center」などの角度を指定する方法とグラデーションの中心 (0％ の楕円の位置) と、末端図形 (100％ の楕円) の大きさと形状を示すことで指定します。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。

repeating-radial-gradient(形状とサイズ at 中心位置, 開始色 位置, 途中色 位置, 終了色 位置); 

.box4 {
  width:300px;
  height:300px;
  margin:0 auto 5%;
  padding:10px;
  background: repeating-radial-gradient(circle at center, rgb(250, 192, 215) 20%, rgb(251, 126, 176) 50%, rgb(240, 75, 141) 80%);
}

「conic-gradient」関数は、円錐グラデーションを指定する要素です。

「conic-gradient」関数は、「グラデーションの角度または方向」「開始色」「途中色」「終了色」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
円錐グラデーションの形状とサイズの値の指定方法は、「from 90deg」などの角度を指定する方法と「to right」のように左から右へと方向を指定する方法があります。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。

radial-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色); 

.box5 {
  width:300px;
  height:300px;
  margin:0 auto 5%;
  padding:10px;
  background: conic-gradient(from 90deg, rgb(250, 192, 215), rgb(251, 126, 176), rgb(240, 75, 141));
}

「repeating-conic-gradient」関数は、 反復円錐グラデーションを指定する要素です。

「repeating-conic-gradient」関数は、「グラデーションの角度または方向」「開始色 位置」「途中色 位置」「終了色 位置」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
反復円錐グラデーションの形状とサイズの値の指定方法は、「from 90deg」などの角度を指定する方法と「to right」のように左から右へと方向を指定する方法があります。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。

radial-gradient(グラデーションの角度または方向, 開始色 位置, 途中色 位置, 終了色 位置); 

.box6 {
  width:300px;
  height:300px;
  margin:0 auto 5%;
  padding:10px;
  background: repeating-conic-gradient(from 90deg, rgb(250, 192, 215) 20%, rgb(251, 126, 176) 50%, rgb(240, 75, 141) 80%);
}

CSSでlinear-gradient()関数とradial-gradient()関数を使用することで、背景色をグラデーションにすることができます。適切な方向や色の組み合わせを選ぶことで、ウェブサイトやアプリのデザインに深みや美しさを加えることができます。
ぜひこれらの方法を活用して、魅力的なグラデーションの背景を実現してみてください。