<p class="thumb"><img src="http://web-marketing.zako.org/images/2016/10/heropatterns.jpg" alt="heropatterns" width="592" height="315" class="alignnone size-full wp-image-30624" /></p>
<p>CSSの背景として呼び出せるSVG画像のパターン集はいくつもあると思いますが、今回ご紹介するのは、配布されているパターンを元に、色や背景色を指定してCSSで書き出すことができるパターンの配布サイトです。</p>

<!--more-->
<h3 class="header-label">SVG形式の背景画像を呼び出すCSSをパターンから手軽に生成できる「Hero Patterns」</h3>
<p>「<a target="_blank" href="http://www.heropatterns.com/">Hero Patterns</a>」は、SVG形式の背景画像をCSSの背景画像として簡単に呼び出すことができるパターン集サイト。</p>
<p>およそ40種類のパターンから背景画像を選んでCSSを生成することができます。</p>

<h4 class="tips">SVG形式の背景画像のサンプル</h4>
<div class="svgback">
	
	<p>ここの背景画像がSVG形式で表現されています。</p>
	<p>気に入ったパターンを選んでパターンの色や背景色、パターンの透過度を指定するだけで、CSSを生成できます。</p>
</div>

<h4 class="tips">パターンの色や背景色を設定するだけでOK</h4>
[caption id="attachment_30623" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/10/heropatterns-edit.jpg" alt="まずパターンの色と背景色、そしてパターンの透過度を指定します。" width="592" height="392" class="size-full wp-image-30623" /> まずパターンの色と背景色、そしてパターンの透過度を指定します。[/caption]
<p>手順は簡単で、まず色と透過度を指定します。</p>

[caption id="attachment_30622" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/10/heropatterns-output.jpg" alt="選択したSVG画像を背景画像とするためのCSSが書き出されます。" width="592" height="429" class="size-full wp-image-30622" /> 選択したSVG画像を背景画像とするためのCSSが書き出されます。[/caption]

<p>次にパターンを選んでクリックすると、SVG画像を背景画像とするためのCSSが生成されます。このCSSを自分のCSSで指定すれば完了です。この画面で再度色や透過度を再指定することも可能。</p>
<p>ここで【Download unstyled SVG】ボタンを押すと、選択したパターンをSVG形式で入手することもできます。</p>

<p>興味があるかたは<a target="_blank" href="http://www.heropatterns.com/">Hero Patterns</a>へどうぞ。</p>

Webデザイナーを目指している方へ

