プロパティ|グラデーションCSSで描くグラデーションには三種類の形状があります。linear-gradient関数によって生成する線形グラデーションと、radial-gradient関数によって生成する放射グラデーション。今回は『linear-gradient』プロパティの設定方法について解説します。『linear-gradient』プロパティは、ボックスの内側になるbackgroundプロパティに設定する拡張プロパティです。#ffffcc);}上記のグラデーションを実際に表示すると下記になります。#ffffcc);」でグラデーションを形成します。「linear-gradient」は直線のグラデーションです。上から#ccffffの色が真下に#ffffccの色に変化したグラデーションです。初期値の角度は垂直です。グラデーションに角度をつけるグラデーションの角度(向き)を変化させるにはいくつかの方法があります。下記はそのサンプルです。#ffffcc);}対角線上にグラデーションをかけた場合は下記になります。right」で右下方向にグラデーションとなります。#ffffcc);}数値で角度を設定した場合は、角度の単位が「deg」(degreeの略)を用いて設定します。角度の数値を入れると時計回りにグラデーションの方向を変えることができます。#ffffcc);}複数の色のグラデーション上記までの設定は、起点の色から終点の色までの設定です。ここに複数の設定を挟むことで何色ものグラデーションを作ることができます。orange;}上記のように色をキーワード(カラーコードまたはカラーネーム)で設定することができます。CSSではこのようにあらかじめ色が準備されています。現在基本色は17色あり詳細は「CSSの色見本帳」をご覧ください。グラデーションに設定した色の場所(色経由点)を移動してグラデーションの色の波長を変更することもできます。orange;}上記の場合、右から左に赤、黄色、青、オレンジの順でグラデーションがかかっていますが、赤から黄色までが左端0%から50%の位置きています。そこから次の青が75%位置になるグラデーションになっています。このように色の場所(色経由点)を任意にずらせることも可能です。沖縄県内で、フリーランスとしてグラフィックデザイナー兼アートディレクション、Webデザイナー、Webディレクションなど企画からデザイン、サイト制作・運営などを手がけています。グラフィック制作やWeb関連のフロンドエンドの技術に関する講師業も行っています。