CSS
背景パターンをCSSで実装できる「pattern.css」
2021年08月05日 8:00
おはようございます。社員Aです👩
今回は、背景パターンをCSSで実装できる「pattern.css」の使い方を解説します！
もくじ
クラスを指定するだけ！背景パターンをCSSで実装
今まで画像を使わないと実装できなかった背景パターンですが、
CSSでクラスを指定するだけで簡単に実装できるそう。
その種類は、チェックやストライプ、ドットなどの定番パターンから
ジグザグやトライアングルなどデザインに差がつく特殊なパターンまで豊富に用意されています。
「pattern.css」の読み込み方
ここからは、実際の使い方を解説していきます。
公式ページからファイル一式をダウンロードします。
公式ページの「GET STARTED」から、ファイル一式をダウンロード。
CSSをヘッダーに読み込む
パスは配置した場所に合わせて変更してください。
<link href="/pattern.css" rel="stylesheet">
「pattern.css」パターンの使い方
読み込みが終わったら、背景パターンにしたい要素にクラスを付与します。
パターンの指定
パターンは全12種類。
実際のパターン例をご紹介します。
末尾の「xx」部分には、後述するサイズを指定します。
pattern-checks-xx
pattern-grid-xx
pattern-dots-xx
pattern-cross-dots-xx
pattern-diagonal-lines-xx
pattern-horizontal-lines-xx
pattern-vertical-lines-xx
pattern-diagonal-stripes-xx
pattern-horizontal-stripes-xx
pattern-vertical-stripes-xx
pattern-triangles-xx
pattern-zigzag-xx
サイズの指定
- sm
- md
- lg
- xl
上記の4サイズが用意されています。
パターンのクラス名のあとに「-sm」や「-md」を付与することでサイズが調整できます。
例：pattern-grid-sm
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
