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

CSS3の線形グラデーション（linear-gradient）で2色以上を滑らかに配置する方法

線形グラデーションとは

線形グラデーション（linear-gradient）は、2つ以上の色を直線状に並べ、滑らかな色の変化を作り出すためのCSS3の機能です。ボタンの背景、バナー、セクションの装飾など、Webデザインのさまざまな場面で活用されています。

サンプルコード

以下のコードを実行すると、CSS3で線形グラデーションを実装できます。この例では、ピンクからグリーンへと変化するグラデーションを表示します。

<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の領域にピンクからグリーンへと滑らかに変化する線形グラデーションが表示されます。

CSS3の線形グラデーション（linear-gradient）で2色以上を滑らかに配置する方法

ポイントまとめ

線形グラデーションを使うことで、画像ファイルを用意せずにCSSだけで美しい色の変化を実現できます。色の指定順序を変えればグラデーションの向きも変わり、「to right」や角度（例：45deg）を指定することで、より自由なデザインが可能になります。

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

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

  2. CSS3のtransformで実現！要素の2D変換の基本と使い方

    2D変換とは？CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。主な2D変換関数一覧No.値と説明1matrix(n,n,n,n,n,n)6つの値を指定して、行列による変換を定義します。2translate(x,y)X軸・Y軸の両方向に沿って要素を移動させます。3translateX(n)X軸方向に沿って要素を移動させ