どうも7noteです。左右などに模様がついたデザインを作る時のちょっとしたコツについて

今回は以下のようなデザインを作る方法です。

文字の右上と左上に模様が入った場合のデザイン。

まず、1枚の背景画像として画像を設置した場合の書き方はこうなります。

<h2>ここに見出しが入ります</h2>

h2 {
  width: 300px;
  text-align: center;
  background: url(sample_bg.png) no-repeat;
}

結果

上手に入れる事ができました。

ではもし横幅がもっと長くなればどうでしょうか。

このように意図しないような広がり方になってしまい、模様が切れてしまいます。
画像の横幅に依存してしまっては表示が崩れてしまうのです。

横幅が可変でかわったとしても崩れないようにする方法

模様の画像を左右それぞれ分けて用意し、CSSを以下のように書き換えてください。

h2 {
  width: 300px;
  text-align: center;
  background-image: url(sample_bg_left.png),url(sample_bg_right.png);
  background-repeat: no-repeat;
  background-size: 50px 50px;
  background-position: left top, right top;
}

結果

このように横幅が変化しても、模様自体は常に同じ大きさをキープすることができます。

まとめ

背景画像にはカンマ（,）で区切ることで複数画像を指定することができます。これを利用して常に同じ大きさの画像を左上・右上に配置することで横幅に依存することなく可変にも対応することができます。

ちょっとした工夫が他のWEBサイトとの差になるので、このような所にも丁寧さが現れるサイト作りを意識したいものですね。

おそまつ！