linear-gradient()

リニアグラディエント（関数）

意味色の線形のグラデーションを作成する関数

linear-gradient()とは？

linear-gradient()関数は、線形のグラデーションを作成するために使用します。これにより、2色以上の色が徐々に変化していく効果を背景に設定することができます。色の変化は直線的で、指定した方向に沿って進みます。

linear-gradient()の具体的な使い方

水平方向の線形グラデーションを作成する例

<style>
    .linear-gradient-bg {
        background: linear-gradient(to right, red, yellow);
        padding: 20px;
        color: white;
    }
</style>

<div class='linear-gradient-bg'>
    Linear Gradient
</div>

左から右へ赤から黄色へと変化する線形グラデーションを背景に設定しています。

斜め方向の3色線形グラデーションを作成する例

<style>
    .diagonal-gradient {
        background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
        height: 200px;
        width: 200px;
    }
</style>

<div class='diagonal-gradient'></div>

45度の角度で赤、緑、青の3色を使用した斜めのグラデーションを作成しています。

linear-gradient()に関するよくある質問

Q. 方向の指定方法は？

A. 方向は「to right」、「to left top」などのキーワードや、「45deg」のような角度で指定できます。デフォルトは上から下です。

Q. 色の指定数に制限はある？

A. 制限はありません。2色以上の色を指定でき、必要な数だけ追加できます。色の間にパーセンテージを指定して、色の配置を調整することも可能です。

Q. ブラウザ対応は？

A. 最新のブラウザはほぼ全て対応していますが、古いブラウザでは接頭辞（-webkit-、-moz-など）が必要な場合があります。また、IE9以前では使用できません。

linear-gradient()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのlinear-gradient()やurl()、clamp()、min()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。