CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのlinear-gradient()関数とは？線形グラデーションの使い方を実例で解説

linear-gradient() 関数は、CSSで線形グラデーション（直線状に色が変化するグラデーション）を定義し、背景画像として設定するために使用されます。単一の色ではなく、複数の色を滑らかにつなげた美しい背景を簡単に作成できるため、Webデザインにおいて非常に人気のある機能です。

基本構文

background-image: linear-gradient(方向, カラーストップ1, カラーストップ2, ...);

第1引数にはグラデーションの開始点や方向（例：to bottom right や to right）を指定し、続けてカラーストップ（色の切り替えポイント）を任意の数だけ指定します。指定した順序に沿って、色が滑らかに遷移して描画されます。

例1：斜め方向のグラデーション

まずは、左上から右下へ向かう赤から青へのグラデーションを実装してみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    text-align: justify;
    text-justify: inter-word;
    color: white;
    background-image: linear-gradient(to bottom right, red , blue);
    position: absolute;
    right: 90px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

出力結果

CSSのlinear-gradient()関数とは？線形グラデーションの使い方を実例で解説

この例では、to bottom right を指定することで、要素の左上から右下にかけて赤から青へと自然に変化するグラデーション背景が適用されます。白い文字色との組み合わせにより、テキストも読みやすくなっています。

例2：複数の色を使った虹色グラデーション

次に、7つの色を指定して虹のようなグラデーション背景を作成する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
    text-decoration: overline;
    text-decoration-color: yellow;
    font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSのlinear-gradient()関数とは？線形グラデーションの使い方を実例で解説

このように、to right で左から右方向へのグラデーションを指定し、黄・オレンジ・緑・青・藍・紫など複数のカラーストップを渡すことで、ページ全体に華やかな虹色の背景を適用できます。

まとめ

linear-gradient() 関数を使えば、方向と色さえ指定するだけで手軽にグラデーション背景を作成できます。ボタンやバナー、ヒーローセクションなど、さまざまな場面で活用できるので、ぜひ実際のプロジェクトでも試してみてください。なお、方向には角度値（例：45deg）を指定することも可能です。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    テキストのインデント（字下げ）を行うには、CSSの text-indent プロパティを使用します。このプロパティは、段落の最初の行だけをインデントするためのもので、文章の読みやすさやデザイン性を高めたい場合に便利です。text-indentプロパティの基本text-indent には、px（ピクセル）、em、% などの単位を指定できます。値が大きいほど、最初の行が右側に大きくずれます。例1：pxでインデントを指定するまずは、30px を指定した基本的な例を見てみましょう。<!DOCTYPE html> <html> <head> <style>