バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[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というアプリケーションを使った実践編もご用意しております。

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

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

The following two tabs change content below.

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。作成したポストカードはお持ち帰りいただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ