CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

線形グラデーション、 background‐size

課題

Web に限らずどんな視覚的デザインでも、さまざまなサイズや色そし

て傾きを持ったストライプ模様が見られます。雑誌から壁紙に至るまで、

ストライプは幅広く使われています。しかし、 Web 上でストライプを実

現するための方法は理想からは程遠いものです。通常はビットマップ画像

が使われ、変更のたびに画像編集ソフトウェアが必要になります。ビット

マップの代わりにSVG が使われることもありますが、これも別個のファイ

ルとして記述する必要があり、構文も非常に複雑です。 CSSだけを使って

ストライプを記述できたら、非常に便利です。このための方法を知った読

者はきっと驚くでしょう。

解決策

図2.20 のように、

#fb3から #58aへと変化する縦方向のシンプ

ルな線形グラデーションをまず用意します。コードは以下のとおりです。

ストライプ模様の背景

5

78

2章：背景とボーダー

図2.20

作業の基礎となるグラデーション

次に、下のようにカラーストップの位置を少し近づけます（図2.21 ）

ここで、コンテナ要素のうち上から 20 ％は

#fb3の単色で表示さ

れ、下から 20％は

#58aの単色になります。残る 60 ％の領域で、グラ

デーションが表 ...