linear-gradient()を使ってグラデーションしてみよう

この記事ではlinear-gradient()について紹介していきます。

近年では、Webサイトのデザインに「グラデーション」が使われる頻度が増えてきました。

最近のトレンドを意識したWebデザインのサイトをコーディングするためには、
今回の記事で紹介するlinear-gradient()が使われます。

linear-gradient()の理解を深めて、CSSでグラデーションを作成できるようになりましょう。

linear-gradient()とは

linear-gradient()とは、CSSでWebフォントとは、「線形グラデーション」を作成するための記述になります。

読み方は「リニア・グラディエント」です。

グラデーションとは

グラデーションとは、色調の段階的な変化のことを言います。

画像は、ZeroPlusのメインカラーに使われているグラデーションです。
「明るいオレンジ色（#ffbb1e）」から「赤っぽいオレンジ色（#ff9158）」に変化しています。

linear-gradient()の使い方

次に、linear-gradient()の使い方について確認していきましょう。

基本構文 その１

まずは、基本的な記述の方法について学んでいきましょう。

background: linear-gradient(角度, 開始する色, 終了する色);

linear-gradient()で指定できる値は、大きく３種類あります。

グラデーションの向きを決める「角度」を設定し、「開始の色」と「終了の色」を指定します。

基本コードの例

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(90deg, #ffbb1e, #ff9158);

注意点

「角度」の値は、正の値を記述すると「時計回り」に回転していきます。（例.90deg）
反対に、負の値を記述すると「反時計回り」に回転します。（例.-90deg）

また、グラデーションの角度（方向）の初期値は180degです。
そのため、グラデーションの方向を記述しないと自動的に上から下の垂直方向で向きが設定されます。

基本構文 その２

linear-gradient()は、もう１つ基本的な記述の方法があります。

background: linear-gradient(to 方向, 開始する色, 終了する色);

「基本構文 その１」では「角度」でグラデーションの向きを設定しました。

こちらの記述の方法では「to 方向」と書くことで、グラデーションの向きを指定します。
「to 方向」の箇所には「top」「right」「bottom」「left」を記述することができます。

基本コードの例

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(to right, #ffbb1e, #ff9158);

対角グラデーションのコードの例

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(to bottom right, #ffbb1e, #ff9158);

「to 方向」の記述の方法は、２つ方向を指定することで斜め方向へのグラデーションも設定することができます。
今回の例では、右下へ向かってグラデーションが作られています。

注意点

こちらの「to 方向」の記述の方法だと「角度」で指定するよりも詳細なグラデーションの向きを設定することが難しくなってしまいます。

そのため、正確に角度を指定する場合は「角度」で記述し、
そうでない場合は「to 方向」の記述をすることで使い分けるようにすると良いでしょう。

複数の色を設定する

次に、複数の色を指定した場合の記述を学んでいきましょう。

background: linear-gradient(開始の色, 中間の色, 終了の色);

３色グラデーションのコードの例

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(#77a1d0, #79cbc9, #e684a0);

色が変わる位置（色経由点）を決める

次に、linear-gradient()を使った「色経由点 （color stops）」の設定を行う方法を説明します。

色経由点 （color stops）とは、グラデーションの中で色が変わる位置のことを言います。

background: linear-gradient(方向, 開始の色 位置, 終了の色 位置);

記述の方法は簡単で、色を記述した後に「位置」を指定してあげるだけです。

位置を指定しないコードの例

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(to right, red, green, blue);

まずは、位置を指定しない場合の例を見てみましょう。
開始の色は赤色、中間の色は緑色、終了の色は青色に指定してあります。

位置を指定しない場合だと、それぞれの色が均等になるように自動で配置されます。
（開始の色が0%、中間の色が約50%、終了の色が100%の位置になっています。）

位置を指定したコードの例

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(to right, red 20%, green 60%, blue 90%);

次の例では、３つの色に対してそれぞれ「位置」を指定しました。
位置を指定した場合、どこから色が切り替わり始めているかに注目しましょう。

今回の例では、開始の色が20%、中間の色が60%、終了の色が90%の位置から切り替わり始めています。

帯を作るコードの例

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(
  to right,
  red 33%,
  green 33%,
  green 66%,
  blue 66%
);

こちらの例は少しプラスアルファな知識です。
上記のようにグラデーションが変わる位置を揃えることで、帯のような見た目を作れることも覚えておくと良いでしょう。

使用例

次に、linear-gradient()がよく使われる場面について例を見ていきましょう。

この中で出てくる例を作れるようになれば、CSSでグラデーションを扱う方法は問題ありません。

背景色として使用する

linear-gradient()で一番よく使われる方法です。
要素の背景色にグラデーションを使っていきます。

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

background: linear-gradient(45deg, #00a8be 0, #43cfe8 60%, #00a8be 100%);

ZeroPlusの公式サイトでも、お問い合わせのボタンの色として青いグラデーションがかかっています。

CSSカスタムプロパティと一緒に使う

次は、使い方自体に大きな変化はありませんが、記述の方法が少し楽になります。

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

:root {
  --primary-color: #ffbb1e;
  --secondary-color: #ff9158;
  --main-gradation: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.sample {
  background: var(--main-gradation);
}

CSSカスタムプロパティを用いて、記述に手間がかかるlinear-gradient()を変数の中に格納しておく方法です。

グラデーションを使用する箇所に、linear-gradient()を格納した変数をvar()で呼び出すだけで使用することができます。

カスタムプロパティに関しては、「CSSで変数（カスタムプロパティ）を使って保守性を高めよう」をご覧ください。

CSSで変数（カスタムプロパティ）を使って保守性を高めよう

画像にフィルターをかける

次は、linear-gradient()を使って画像の上にグラデーションのかかったフィルターを作る方法です。
やり方は2つあります。

backgroundにまとめて記述する

1つ目が、background-imageに画像と一緒に記述する方法です。こちらの方がコード量が少なく済むので、まずはこの方法を覚えておきましょう。

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

グラデーションを作れるlinear-gradient()ですが、開始色と終了色を同じ色にすれば、一色のフィルターをかけることができます。

.sample-box {
　background: linear-gradient(#0003, #0003),
　url(https://zero-plus.io/media/wp-content/uploads/2022/03/filter-sample.jpg);
　width: 600px;
　height: 600px;
}

擬似要素を使用する

2つ目が、擬似要素を使用するやり方です。こちらは他のやり方として知っておくくらいで大丈夫です。

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

.sample-box {
  background: url(https://zero-plus.io/media/wp-content/uploads/2022/03/filter-sample.jpg);
  width: 600px;
  height: 600px;
  position: relative;
}

まずは、画像を読み込みます。

その上に、linear-gradient()を使用して、背景色にグラデーションをかけた擬似要素を画像いっぱいに広げて配置していきます。

.sample::before {
  content: "";
  background: linear-gradient(90deg, #0003, #000d);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

色を指定する際に不透明度を少し下げることで、画像の上に薄くグラデーションによるフィルターをかけることができました。

テキストにアンダーライン

次に、linear-gradient()を使ってテキストの下にアンダーラインを簡単に引く方法を紹介します。

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

<p class="sample-txt">
  <span class="sample-marker">マーカーも引けるのだ！</span>
</p>

HTMLでテキストを用意し、linear-gradient()を用いてアンダーラインを引きます。

.sample-marker {
  background-image: linear-gradient(transparent 50%, #ffbb1e 0%);
}

「開始の色」の指定を「transparent」に設定し、透明な状態にします。

アンダーラインの太さを変更したい場合は、「transparent」の位置の%を調節しましょう。（%の値を小さくすれば、アンダーラインが太くなります。）

アンダーラインの色は「終了の色」で指定します。

色の変わり目の位置を「transparent」よりも手前側にしておくことで、色の境がくっきりとした見た目になります。（薄くなっていないことを確認しましょう。）

linear-gradient()を使ってみよう

ここまでで「linear-gradient()」の基本的な使い方を説明してきました。

• linear-gradient()はbackground-imageのプロパティの値であること
• linear-gradient()の基本構文

こちらをまずは押さえておき、実際にコードを書きながら理解を深めていきましょう。

グラデーションの作成の方法は「線形」以外にも「円形」や「扇形」のグラデーションもあります。
今回学んだ「線形グラデーション」ができるようになれば、他のグラデーションの作成方法もすぐに理解できます。

復習を忘れずに必ずアウトプットして定着させるようにしましょう。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー