こんにちは！
アラフォーフリーランスのひでかずです。
Web制作コーダーとして制作会社様などからWebサイトコーディング、WordPress構築のお仕事を受託しながら活動しています。
突然ですが、パターン背景をコーディングするとき全体を1枚の画像にしていませんか？
デザインカンプを見て「この模様、そのまま画像で書き出せばいいか」と思ってしまう気持ち、めっちゃわかりますw
でも実は、それだといくつか困ることが出てくるんですよね。
全体を1枚画像にしたときの問題点
パターン背景を全体1枚の画像で作ると、こんな問題が起きがちです。
ファイルサイズが大きくなる
パターンが画面全体に広がっている場合、その分だけ画像サイズも大きくなります。
特にRetinaディスプレイ対応で2倍サイズにすると、かなり重くなっちゃいますよね。
レスポンシブで崩れやすい
これが一番厄介かもしれません。
画面幅によって引き伸ばされて歪んだりすることがあります。
ウィンドウサイズ変えたら引き伸ばされてる…なんて経験ありませんか？
また、パターン背景のセクション内部にアコーディオンやタブなどがあって
セクションの高さが変わる時に背景画像が引き伸ばされてしまうことも。
パターンの繰り返し数を柔軟に調整できない
コンテンツの量によって背景の高さが変わる場合、1枚画像だと対応しきれないことがあります。
じゃあどうすればいい？
パターン背景の正しい考え方
結論：小さな1パターンを切り出して、CSSでリピートさせる
これがパターン背景の基本的な考え方です。
たとえばドット柄やストライプ、幾何学模様などのパターン背景は、よく見ると同じ形の繰り返しになっていますよね？
なので、その「1つのパターン（1マス）」だけを画像として切り出して、CSSのbackground-repeatでリピートさせてあげればいいんです。
こうすることで、さっき挙げた問題を全部解決できます。
- ファイルサイズは小さな1パターン分だけ
- どんな画面幅でもパターンが自然に繰り返される
- 色やサイズの調整もCSSで柔軟に対応可能
- コンテンツ量に関係なく背景が伸縮する
具体的なCSS設定方法
実際のCSSの書き方を見ていきましょう。
background-repeat の設定
.pattern-bg {
background-image: url('pattern.svg');
background-repeat: repeat; /* 縦横両方にリピート */
}background-repeatの値はこんな感じで使い分けます：
repeat：縦横両方にリピート（デフォルト）repeat-x：横方向のみリピートrepeat-y：縦方向のみリピートno-repeat：リピートしない
パターン背景なら基本はrepeatですね！
background-size の設定
ここが結構大事なポイントです。
.pattern-bg {
background-image: url('pattern.svg');
background-repeat: repeat;
background-size: 34px 34px; /* パターン1つ分のサイズを指定 */
}background-sizeでパターン1つ分のサイズを指定してあげます。
たとえば34px × 34pxの正方形パターンなら34px 34pxと指定する感じですね。
このサイズを変えることで、パターンの密度（細かさ）を調整できます。数値を小さくすればパターンが細かく、大きくすれば粗くなります。
background-position の調整
必要に応じて開始位置も調整できます。
.pattern-bg {
background-image: url('pattern.svg');
background-repeat: repeat;
background-size: 34px 34px;
background-position: center center; /* または top left など */
}パターンの開始位置を中央からにしたい場合や、特定の位置から始めたい場合に使います。
まとめ：パターン背景実装のポイント
パターン背景を実装するときは、こう考えるといいですね：
- 全体を1枚の画像にしない → レスポンシブで崩れる、ファイルが重くなる
- 小さな1パターンを切り出す → 繰り返しの最小単位を見つける
- CSSでリピートさせる →
background-repeat、background-size、background-positionを活用
なんでもかんでもこの方法で解決するわけではないですが、パターン系の背景ならこの考え方を知っておくとかなり楽になります！
もし「こういう場合はどうするの？」みたいな疑問があれば、ぜひ教えてください！
