[CSS3]グラデーション その1

スクールが引越ししてから(といっても同じビルで1階→5階になっただけですが)、早くも1ヶ月以上が経ちました。

さすがに最近は、エレベーターに乗って無意識に「1」を押すことが少なくなってきたスタッフ「ほ」です。

─────

お題は前回の角丸に引き続き「CSS3」で行ってみたいと思います。

今回は、結構奥が深いグラデーションの設定です。

かなりボリュームがある話題ですので、全部で3,4回に分けてご紹介しようかと思っています。

─────

これまでWebページの背景にグラデーションを設定する際には、グラデーションの画像を背景画像として敷き詰めて設定していました。

ですが、CSS3から登場したグラデーション指定によって、画像を使わなくてもグラデーションが設定できるようになりました。

画像を利用しないため、データが軽くなり、また色の変更も容易になります。

さて、一番簡単な記述からご紹介します。

手ごろなボックスをひとつ用意しましょう。

CSSグラデーションに対応していないブラウザでは、背景色が表示されるように背景色(単一色)を指定しておきます。

その上で、以下の記述を追加します。


.gradient-box {
      background:linear-gradient(yellow,red);
}

サンプルファイルを確認

どうでしょう?以下のようなグラデーションができているはずです。

グラデーションの種類を指定

例の通り、背景にグラデーションを設定する際には「background」プロパティを利用します。

その後ろに記述した「linear-gradient」部分が、線状のグラデーションを生成している部分です。

グラデーションには、ここで指定している線状のグラデーションだけでなく、放射状のグラデーションを指定することも出来ます。

グラデーションの指定を以下のように変更してみましょう。


.gradient-box {
      background:radial-gradient(yellow,red);
}

サンプルファイルを確認

中央から放射状に広がるグラデーションが適用されます。

色の指定

()の中にグラデーションの開始位置の色と終了位置の色をカンマで区切って指定します。上記例の場合は開始位置の色が黄色、終了位置の色が赤色ということになります。

色には、もちろんカラーコードを利用することもできます。


.gradient-box {
      background:linear-gradient(#ff0,#f00);
}

また、グラデーションには3つ以上の色を指定することもできます。


.gradient-box {
      background:linear-gradient(green,yellow,red);
}

サンプルファイルを確認

7色を指定すれば虹色に!

向きの変更

特に指定をしなければ、グラデーションは上から下に向かったグラデーションになります。


.gradient-box {
      background:linear-gradient(yellow,red);
}

上記の指定の場合、上端の色が黄色、下端の色が赤、ということになります。

グラデーションの向きを変更するには、()内の先頭に向きの指定を追加します。

たとえば、今の方向とは逆に下から上に向かうグラデーションにする場合は「to top」と記述をします。


.gradient-box {
      background:linear-gradient(to top,yellow,red);
}

横方向のグラデーションにするには、「to right」「to left」を利用します。


#box1 {
      background:linear-gradient(to right,yellow,red);
}
#box2 {
      background:linear-gradient(to left,yellow,red);
}

サンプルファイルを確認

さらに、斜めの指定も可能です。


#box1 {
      background:linear-gradient(to right bottom,
yellow,red);
}
#box2 {
      background:linear-gradient(to right top,
yellow,red);
}
#box3 {
      background:linear-gradient(to left bottom,
yellow,red);
}
#box4 {
      background:linear-gradient(to left top,
yellow,red);
}

to right bottom 左上から右下に向かって
to right top 左下から右上に向かって
to left bottom 右上から左下に向かって
to left top 右下から左上に向かって

どうでしょう?慣れればそんなに難しい設定ではありません(とりあえずここまでは)。

…と、今回はここまでにしてみます。

次回は、適用したグラデーションをもうちょっと細かくコントロールする指定をご紹介しようと思います。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ