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

CSS3の線形グラデーション（linear-gradient）の使い方と実装例

線形グラデーション（Linear Gradient）は、CSS3で導入された機能の一つで、2つ以上の色を直線状に並べ、上から下・左から右・斜め方向などに沿って滑らかに変化させることができます。背景装飾やボタンデザインなど、Webページの見栄えを向上させるために広く活用されています。

基本構文

線形グラデーションは background プロパティに対して linear-gradient() 関数を指定して実装します。

background: linear-gradient(方向, 色1, 色2, ...);

方向を省略した場合、デフォルトでは「上から下」へのグラデーションが適用されます。

実装例

以下のコードは、ピンクからグリーンへと変化するシンプルな線形グラデーションを実装する例です。実際にブラウザで実行して動作を確認してみましょう。

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green);
            background: linear-gradient(pink,green);
         }
      </style>
   </head>
   <body>
       <div id = "grad1">
      </div>
   </body>
</html>

コードのポイント

  • -webkit-、-o-、-moz- といった接頭辞（ベンダープレフィックス）は、古いバージョンのブラウザ向けの互換性対応です。現在の主要ブラウザでは、標準の linear-gradient() のみで正しく表示されます。
  • サンプルでは高さ100pxの <div> 要素にグラデーション背景を適用しています。

グラデーションの方向を指定する

to right や to bottom right などのキーワードを使うことで、グラデーションの向きを自由に指定できます。

/* 左から右へのグラデーション */
background: linear-gradient(to right, pink, green);

/* 斜め方向（左上から右下）へのグラデーション */
background: linear-gradient(to bottom right, pink, green);

また、角度を直接指定することも可能です。例えば linear-gradient(45deg, pink, green) とすれば、45度の角度で色が変化します。色の追加も自由で、3色以上を指定すれば多層的なグラデーションを作成できます。

  1. CSSで角度を指定して線形グラデーションの方向を自在に設定する方法

    CSSのlinear-gradient()関数では、キーワード（to rightなど）だけでなく角度を指定することで、グラデーションの方向をより細かく制御できます。基本構文background-image: linear-gradient(角度, カラー1, カラー2);角度はdeg（度数法）で指定します。主な角度と方向の対応は以下の通りです。0deg：下から上へ（to topと同じ）90deg：左から右へ（to rightと同じ）180deg：上から下へ（to bottomと同じ・初期値）-90deg：右から左へ（to leftと同じ）サンプルコード以下は、CSSで角度を使って線形グラデーシ

  2. CSS3の線形グラデーション（linear-gradient）と放射状グラデーション（radial-gradient）の使い方

    グラデーションとは、2つ以上の色を滑らかに組み合わせて表示するCSSの機能です。中でもよく使われるのが「線形グラデーション」と「放射状グラデーション」の2種類です。 線形グラデーションは、上から下、左から右など、直線に沿って色が変化していくスタイルです。一方、放射状グラデーションは、要素の中心から外側に向かって色が広がるように変化します。 ここでは、CSS3でこれら2つのグラデーションを使う方法を、実際のコード例とともに解説します。 サンプルコード <!DOCTYPE html> <html> <head> <style> body{ f