HTML/CSS

【CSS】linear-gradient で色にグラデーションをつける方法

HTMLやCSSを学んでいて、「linear-gradient」というコードを見たことはありませんか。

linear-gradientは色にグラデーションをつけるCSSの関数です。

この関数を使いこなせると、オシャレなデザインを手軽に実装することができます。

さっそく使い方について見ていきましょう。

linear-gradientの使い方

基本的なコードの書き方

まず、linear-gradientを使うときの、基本的なコードの書き方を見ていきます。

以下のコードをみてください。

<div class="gradation"></div>
.gradation{
  width: 100px;
  height: 100px;
  background: linear-gradient(skyblue, violet);
}

これを出力すると以下のようになります。

グラデーションのある色が表示されているのがわかります。

コードの基本的な書き方は、

「linear-gradient(2つ以上の色);」

となります。

例えば、先ほどの例では、「skyblue」と「violet」を混ぜているのでコードは、「linear-gradient(skyblue, violet);」となっています。

3つ混ぜるときは、例えば「linear-gradient(skyblue, violet, whitesmoke);」のように書きます。

ちなみにこのコードでは色は以下のようになります。

3色混ざっているのがわかります。

以上がlinear-gradientの基本的なコードの書き方になります。

ここまでは色の名称で指定してきましたが、もちろんカラーコードやRGB値で指定することもできます。

次に、生成したグラデーションの向きを変える場合について解説していきます。

グラデーションの向きを変える

linear-gradientでは、グラデーションの向きを変えることができます。

※向きを指定しない場合は、上から下に向けてグラデーションがつきます。

向きを指定するコードは、例えば以下のようになります。

<div class="gradation"></div>
.gradation{
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, skyblue, violet);
}

出力すると下のようになります。

「to right(右へ)」と指定したので、グラデーションが右に向いているのが分かります。

また、「right(右)」に加えて「bottom(下)」も指定すると、色は以下のようになります。

グラデーションが「右下」にかけてついているのが分かります。このグラデーションのコードは下のように書きます。

HTML

<div class="gradation"></div>

CSS

.gradation{
  width: 100px;
  height: 100px;
  background: linear-gradient(to right bottom, skyblue, Violet);
}

ここまで、右、下などの上下左右の方向で指定しました。

別の方法としては、「角度」で指定することもできます。

例えば、コードは以下のように書きます。

<div class="gradation"></div>
.gradation{
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, skyblue, Violet);
}

「deg」は、「degree(度)」の略です。

45degと書くと45度の向きにグラデーションがつきます。

先ほどのコードを出力すると以下のようになります。

45度(右上)に向かってグラデーションがついているのがわかります。

グラデーションの色の割合を決める

グラデーションをつくる色の割合も決めることができます。

ただし、色が変わる地点を決めることで、結果的に色の割合を変化させるということです。

※「%」指定を使いますが、直接的に色の割合を指定するのではなく、あくまで色が変化する地点を決めているということです。

実際のコードと、出力結果を見ていきましょう。

色の割合を決めるコードは、例えば以下のようになります。

<div class="gradation"></div>
.gradation{
  width: 100px;
  height: 100px;
  background: linear-gradient(skyblue 20%, Violet 50%);
} 

このコードを出力すると以下のようになります。

「skyblue 20%, violet 50%」と指定したので、グラデーションの向きにそって20%のところまでがskyblue、50%のところからがvioletになっています。

次にグラデーションをどんな場面で使うか紹介していきます。

linear-gradientを実際に使う場面

グラデーションはヘッダーやボタン、文字を書くセクションの色をつけるときに使われます。

例えば、ヘッダーの色にグラデーションをつけた例がこちらです。

コードは以下のようになります。

<header><p>こんにちは!</p></header>
eader{
  width: 100%;
  height: 600px;
  background: linear-gradient(to right top, skyblue, MediumSpringGreen);
  position: relative;
}
header p{
  position: absolute;
  top: 190px;
  left: 120px;
  font-size: 50px;
  font-weight: bold;
  color: rgb(29, 28, 28);
}

次に、ボタンの色にグラデーションをつける場合についてみていきましょう。

例えば、このようになります。

<div class="btn">ボタン</div>

CSS

.btn{
  width: 150px;
  height: 50px;
  padding-top: 25px;
  text-align: center;
  background: linear-gradient( to right bottom, violet, MediumSpringGreen);
}

ボタンの色にグラデーションをつける際は、周りの色やデザインと調和するように色を付けましょう。

ボタンのつくり方やデザインの例に関しては、下記の記事も読んでみてください。

HTMLでのボタンの作成方法(よくあるデザインの特徴5選も紹介)

他には、文字を書くセクションに使うこともできます。

<div class="row">
    <div class="block block1">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
    <div class="block block2">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
    <div class="block block3">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
  </div>
.row{
  display: flex;
  justify-content: center;
}
.block{
  width: 300px;
  height: 330px;
  padding: 120px 50px 0 50px;
  background: linear-gradient(to left top, skyblue, whitesmoke);
  line-height: 28px;
  margin-right: 25px;
}
.block:last-child{
  margin-right: 0px;
}

セクションごとに色を統一したり、特に強調したいところがあるときは色を変えるなど、考えながらデザインをしましょう。

グラデーションをつけるだけで、簡単におしゃれさを表現することができます。

よって、linear-gradientはおすすめの関数であると言えます。

混ぜる色が思いつかないときは、色々なデザインを調べて参考にしてみてください。

まとめ

いかがでしたでしたか?

linear-gradient について理解が深まったと思います。

色のグラデーションはスタイリッシュでオシャレな印象を与えることができますので、ぜひ使えるようになりましょう。

今回の知識をもとに、実際に使ってみてください。