|
HTML5＋CSS3 |
CSS3編
|
| Lesson 03 | グラデーションでつくる 印象的な見出し |
|||
| 制作・文 | 高村香奈子（株式会社アークフィリア） |
 |
CSS3上でグラデーションを指定できるlinear-gradientとradialgradient。これを利用することで、画像を使わなくても印象的なページの見出しをつくることができる。 |
01
linear-gradientでは線形のグラデーション、radial-gradientでは放射状のグラデーションをつくることができる【1-1】【1-2】現在表示できるブラウザは限られているので、Firefoxなどのmozilla系ブラウザと、Safari やGoogle Chrome などのwebkit系ブラウザにそれぞれベンダープレフィックス（-moz-と-webkit-）を付ける必要があり、記述方法も異なることに注意しよう。
位置や方向、色などを指定するだけでグラデーション表現ができるため、これまで背景画像などで対応していた見出し部分も簡単に実装することができる。
【1-1】
【1-2】今回は3種類の見出しをつくる
02
linear-gradientで縦方向のグラデーションを使用した見出しをつくる。上部にわずかにハイライトを入れ、立体感のあるデザインにした【2-1】。見出し要素に対してCSSを記述していく【2-2】。
記述方法は、mozilla系ブラウザの場合は「-moz-linear-gradient(方向, 開始色, 途中色 途中色の位置, 終了色);」、webkit系ブラウザの場合は「-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop( 途中色の位置, 途中色),to(終了色));」となる。
指定色の間の色は自動的にブラウザで補間され、なめらかなグラデーションとして表現される。
【2-1】色の割合を設定できるため、細いハイライトの表現も可能
【2-2】mozilla系ブラウザでは「top」と指定すると上から下方向になる
03
同様にlinear-gradientを使用して、左上から右下方向のグラデーションの見出しをつくってみた【3-1】【3-2】。このような同系色のグラデーションをつける際は、単純な明暗だけで設定するのではなく、途中に彩度の高い色を入れると美しく仕上がる【3-3】。
【3-1】3色を指定したグラデーション
【3-2】mozilla系ブラウザでは「left top」と指定すると左上から右下方向になる
【3-3】（上）彩度に変化をつけたグラデーション／（下）単純な明暗のグラデーション
04
radial-gradientで放射状のグラデーションを使用した見出しをつくる【4-1】。記述方法は、mozilla系ブラウザの場合は「-moz-radial-gradient( 位置, circle, 開始色 開始色の半径, 途中色 途中色の半径, 終了色 終了色の半径);」、webkit系ブラウザの場合は「-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from( 開始色),color-stop(途中色の半径, 途中色), to(終了色))」となる【4-2】。
途中色を繰り返し入れることで、波紋のようなグラデーションがアクセントになった見出しができた【4-3】。
【4-1】グラデーションをアクセントとしてあしらってみる
【4-2】mozilla系ブラウザでは半径はピクセル指定、webkit系ブラウザでは半径はパーセント指定となる
【4-3】濃い色と淡い色を交互に6回指定する
05
文字や間隔を整えれば、画像で制作した見出しとほぼ変わらないでき映えになる【5-1】。今回は使用していないが、ボックス要素に影をつけるbox-shadow や、角丸にするborder-radius、アルファ値の設定などと組み合わせれば、多彩な表現が可能になるだろう。数種類の見出しをつくっておき、クラス管理すれば運用も楽になる。
【5-1】heightとline-heightを同じ値にすると文字が縦中央揃えになる
＞＞目次に戻る
