細かいドットや斜線背景をCSSで手軽に作成できる

細かいドットの背景や斜線の背景って、結構使いやすいものなので利用頻度は何気に多いです。手軽に用意する方法はないかと探していたところ、PatternfyというWebサービスを見つけましたのでシェアします。png画像やCSSインラインイメージで用意できるので、用途によって使い分けることができますよ。

細かいドットの背景や斜線の背景が作れるPatternfy

Patternfyでは、細かいドットや斜線の背景を自分で作ることができるWebサービスです。また、テンプレートも用意されているので、クリックするだけで手軽にpng画像やCSSインラインイメージ用のコードを取得することができます。

インラインイメージとは？

インラインイメージとは、画像をBase64というテキストに変換してデータ化したものをHTMLやCSSなどに直接埋め込むテクニックです。画像を読み込む必要がなくなるので、表示速度を早くすることができます。

テキストデータ量にもよります。複雑な画像をテキストデータに変換すると逆に重くなる可能性がありますので、ご注意ください。

以下のリンク先に飛ぶと、画像のページが表示されます。

このページで編集していきます。

Patternfyで細かいドットや斜線の背景を作ってみる

では、実際に背景を作ってみます。

画面左側が編集画面です。ここで自分で編集してさまざまな背景を作ったり、テンプレートから背景を準備することができます。

細かいドットや斜線の背景画像

上半分の碁盤目状になっているところをクリックしていくと、自分で編集した背景画像が作れます。『Color』で好みの色を指定し、『Opacity』で透明度を指定します。2箇所指定したら実際に編集に入ります。

碁盤目状の部分の縦、横に並んでいる数字部分をクリックして繰り返す背景のサイズを指定していきます。どちらも『3』を指定すると『縦横3px』の背景画像となります。白背景部分がそうです。その白背景内のボックス部分をクリックすることで塗りつぶすことができます。修正したい場合には、塗りつぶした部分をもう一度クリックすれば削除されます。

また、テンプレートから背景画像を用意する場合は、画面左側の下にある『Old School』『Color』『Misc』のタブ内にあるボタンをクリックすることで適用させることができます。

実際の表示は、画面右側の『Preview』で確認することができます。

細かいドットや斜線の背景画像

編集が終わりましたら、画面右側のPreviewの下にある『Download PNG』をクリックするとpng画像をダウンロードできます。また、Base64 Code内のCSSコードを『全選択→コピー』でクリップボードにコピーできるので、サイトのCSSファイルにペーストして指定します。CSSにて表示させる場合には、以下のようなコードで表示させることができます。

.myDiv{
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT1jGhi9QwMDI3IgmABkCKYIFwAJogiABIEAM2/BIWEpQYtAAAAAElFTkSuQmCC
    ) repeat;
}

赤文字部分にペーストします。

また、HTMLに記述する場合には以下のようにします。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT1jGhi9QwMDI3IgmABkCKYIFwAJogiABIEAM2/BIWEpQYtAAAAAElFTkSuQmCC">

HTMLでもいいのですが、背景画像であればCSSに記述して背景にしたい要素に一括で指定した方が手軽に利用することができます。

これまでは自分でpng画像を用意していたのですが、Patternfyを利用して作成した方が早そうなのでこちらを積極的に使っていきたいと思います。こういうWebサービスはいざという時に便利ですよね。他にも何か良いWebサービスがありましたら教えていただけるとありがたいです。