Column

こんにちは。 iMedioセミナー講師の森 和恵です。
梅雨入り宣言したものの、雨待ちの日が続きましたが、そろそろ雨模様となってきた頃でしょうか。
こんな時期は、部屋でじっくりと何かに取り組むのもよい気がします。

さて。今回は、CSS3についてお話します。

長らく続いていたCSS2.1の仕様を拡張する形で、CSS3がリリースされてからずいぶん時間が経ち、各社デバイスやブラウザーの対応も進みました。

CSS3で追加された表現といえば「グラデーション」や「ボックスの角丸」などがあげられます。これらの表現を使うことで、飾りのためのビットマップ画像が不要となり、結果としてウェブページのデータが軽くなり、閲覧スピードをあげる結果を生みました。

スマートフォンやタブレットなど、外出中に利用するデバイスは、低速な携帯電話のLTE回線を用いることが多く、データが軽くなるのは大歓迎。CSS3の普及は一気に進みました。

では、グラデーションを指定する「CSS Gradients」を確認してみましょう。

Brend < http://colinkeany.com/blend/ >のサイトでは、左・右の２色を選び、グラデーションのソースコードを生成してくれます。

.blend-gradient {
  background: -webkit-linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
  background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
}

《 linear-gradient(グラデーションの角度, 開始色, 終了色) 》

という具合にbackgroundプロパティの値をグラデーションに指定しています。
90度(90deg)を指定すると、左から右への直線でグラデーションが作成されます。

コードだけで作られたグラデーションなので、色やグラデーションの変更も文字修正だけで行うことができ、制作者の更新の手間も省くことができてうれしい進化ですよね。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
CSS3の新しい表現を用いたウェブページの制作方法を知りたい方は、ぜひ。

【レスポンシブで始める、モバイルフレンドリーなマルチデバイス対応サイト制作】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23684 >

【HTML5＋CSS3コーデング基礎《ウェブページの品質と表現力をブラッシュアップ！》】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23378 >

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< https://teqs.jp/column_tax/column_mori >