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

CSS3で左から右へのグラデーションを実装する方法

CSS3で左から右へのグラデーションを作成する

CSS3のlinear-gradient()関数を使うと、要素の背景に滑らかな色の変化を簡単に実装できます。ここでは、赤から青へと変化する「左から右」方向のグラデーションの作り方を解説します。

基本構文

左から右へのグラデーションは、to rightキーワードを指定するだけで実現できます。

background: linear-gradient(to right, red, blue);

この指定により、要素の左端が赤（red）、右端が青（blue）になり、その間の色が自動的に滑らかに補間されます。

ベンダープレフィックスについて

かつてはブラウザごとの互換性を確保するため、ベンダープレフィックス付きの記述を併用するのが一般的でした。現在の主要ブラウザでは標準のlinear-gradientだけで動作しますが、古い環境をサポートする場合は以下を参考にしてください。

  • -webkit-linear-gradient(left, red, blue)：Safari・旧版Chrome向け
  • -moz-linear-gradient(right, red, blue)：旧版Firefox向け
  • -o-linear-gradient(right, red, blue)：旧版Opera向け

サンプルコード

以下のコードを実行すると、左から右へ赤から青に変化するグラデーションを実際に確認できます。

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

実装のポイント

  • 標準仕様であるlinear-gradient(to right, ...)は必ず最後に記述しましょう。先に書くと、後続のプレフィックス版によって上書きされる可能性があります。
  • 色の指定はいくつでも追加できます。たとえばlinear-gradient(to right, red, yellow, blue)とすれば、3色が順に変化するグラデーションになります。
  • 高さ（height）を指定しないとdiv要素は表示されないため、サンプルのように明示的に設定してください。
  1. 【CSS入門】floatプロパティで要素を左右に配置する方法

    CSSのfloatプロパティとは？CSSのfloatプロパティは、ボックスやコンテンツの位置指定・フォーマットを行うためのプロパティです。これを利用すると、HTML要素をページの左側または右側に寄せて配置できます。floatプロパティに指定できる主な値は以下の通りです。left … 要素を左に浮動させるright … 要素を右に浮動させるnone … 浮動を解除する（初期値）それでは、実際のサンプルコードでfloatによる左右配置の方法を確認していきましょう。例1：floatで要素を左右に振り分ける次の例では、映画館のスクリーンと座席をイメージしたレイアウトを作成し、floatプロパティによっ

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

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