Web上の要素に背景をスタイリングする場合、画像を表示するのが一般的ですが、実はCSSだけで色々な種類の背景パターンや模様を表示することができます。
ドット柄やチェック模様、ストライプなど色々な種類の背景をCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。
今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルが掲載されているおすすめのサイトをご紹介したいと想います。
INDEX
CSSで背景パターンを作るメリット
Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。
画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。
- CSSを編集するだけで簡単にスタイルの調整ができる
- パターンのバリエーションを増やす場合も手間があまりかからない
- アニメーションで変化させることができる
背景画像を書き出して使用する場合、色の変更などがあった場合にいちいち画像の書き出しを行わなければならず、少し手間ですがCSSで作られた背景パターンや模様であれば、コードを修正するだけで簡単に調整することができます。
複雑なものは画像として作った方がいいかもしれませんが、簡単な背景パターンはCSSで作れるようにしておくと、色々と役に立ちます。
背景パターンや模様のCSSサンプルのおすすめサイト
51 CSS Background Patterns
CodePenで公開されているCSSで作られた背景パターンがまとめられている海外のページです。
CSSだけで作られているとは思えないような、クオリティの高い背景パターンが掲載されていて、CodePen上でコードを確認することができます。
pattern.css
HTMLの要素に決められたクラス名を付けることで簡単に背景パターンを表示することができるスタイルシートです。
単に背景に適用するだけでなく、区切り線やテキストをスタイリングする際にも活用することができ、上手く取り入れることでデザインのクオリティをグッと高めることができます。
SVG Backgrounds
CSSとSVGを使って、背景パターンを表示するサンプルが紹介されているサイトです。
背景パターンや模様がSVG形式で書かれており、細かなスタイリングの調整が少し難しいですが、バラエティに富んだ背景パターンや模様が用意されていて、とても参考になります。
CSS3 Patterns Gallery
こちらはCSSで作られた様々な背景パターンのサンプルが紹介されているサイトです。
すべてCSSのコードが掲載されているので、コードをコピペするだけでサイトに背景パターンを適用することができます。
そのまま背景として使用することもできますが、それぞれの背景パターンのCSSコードを理解することで、CSSの勉強にもなりますね。
Hero Patterns
CSSとSVGを組み合わせて作られた様々な背景パターンのサンプルが掲載されているサイトです。
自分でメインの色と背景色を選択することができ、透明度なども細かく調整することができます。
DOODED.DEV
様々なプロパティを自分で調整してオリジナルの背景パターンを作成することができるツールです。
作成した背景パターンはCSSのコードではなくSVGコードとして出力されるので、ファイルとして保存して背景画像として使用してください。
Patternify
ドット絵を自分で作成して、背景として使用するためのCSSコードを出力することができるツールです。
シンプルな斜線や、ギザギザ模様などを簡単に作ることができ、いくつかサンプルも用意されているものは、そのまま利用することもできます。
SVGeez
こちらは、CSSで作られたポップな背景パターンが掲載されているサイトです。メインの色と背景色を自分で変更することができます。
SVGを使って作られているので、細かな調整は少し手間がかかりますが、他のサイトやツールと比べると、ポップでスタイリッシュなものが多いです。
