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

CSSで虹色の線形グラデーションを作る方法

CSSのlinear-gradient()関数を使うと、赤・橙・黄・緑・青・藍・紫といった虹色を表現した美しい線形グラデーションを簡単に作成できます。グラデーションの方向や使用する色を指定するだけで、滑らかに変化する虹のような背景を実現できます。

実装例

以下のコードは、左から右へ向かって虹色に変化する線形グラデーションを表示するサンプルです。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 100px;
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
         }
      </style>
   </head>
   <body>
      <h2>Linear Gradient</h2>
      <div id="demo">Rainbow</div><br>
   </body>
</html>

コードの解説

  • linear-gradient(to right, ...)：グラデーションの方向を「左から右（to right）」に指定しています。方向はto bottomや角度（例：45deg）でも指定可能です。
  • カラーストップ：red、orange、yellow、green、blue、indigo、violet の7色を順に並べることで、虹のスペクトルを再現しています。各色の位置（パーセント）を省略すると、自動的に均等に配置されます。
  • height: 100px：div要素の高さを設定し、グラデーションが見やすいようにしています。

このコードをブラウザで実行すると、高さ100pxの要素内に左から右へ虹色が流れるようなグラデーションが表示されます。色の追加や順序の変更、方向の調整によって、さまざまなバリエーションを自由に試してみてください。

  1. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l

  2. HTML5で線形グラデーションを描画するには？createLinearGradient()の使い方を解説

    HTML5で線形グラデーションを描画する方法 HTML5のCanvas APIでは、createLinearGradient()メソッドを使うことで、指定した2点間に沿って色が滑らかに変化する線形グラデーションを作成できます。このメソッドはCanvasGradientオブジェクトを返し、引数で指定された開始点と終了点を結ぶ直線に沿って塗りつぶしを行います。 createLinearGradient(x0, y0, x1, y1) パラメータの詳細 createLinearGradient()メソッドに渡す4つのパラメータは以下のとおりです。 No.パラメータと説明 1x0グラデーション