CSSでは背景画像のリピート間隔を任意に設定できない

CSSで背景を指定する時のバリエーションはCSS3になって格段に増えた。グラデーション、サイズ指定、ボックスの各辺を基準にした座標指定、画像の埋め尽くしの種類、ボックスのパディングエッジやボーダーエッジを基準にした配置、そしてそららの複数指定……。

しかし、多様な表現が可能になったbackgroundプロパティでも、まだできないことがある。それが表題の「背景画像のリピート間隔を任意に設定すること」だ。

機械任せの間隔調整ならbackground-repeat: space;という指定で可能ではある。しかしその 仕様は、ボックスの最初と最後のエッジに画像が接し、その間を整数個収まるように配置され、あまった隙間は等間隔に配分されるというもの。画像と画像の空白の大きさを思い通りにはできない。

完璧に計算して繰り返し画像の大きさを調整すればいいが、だったら最初からそういう風に作った一枚画像を配置するほうが早い。また、背景の複数指定で一つずつずらして配置することも一応できるが、この場合プリプロセッサーがないと書くのはしんどいしメンテはしづらい。

そのようなニーズがあるのかというもそもそも疑問ではある。

いわゆるCSS3のbackgroundプロパティについては、 まとりさんのブログの記事が詳しい。background-repeat: round;background-clipなどがデモつきで細かくわかりやすく解説されている。

もし仕様化されるなら

ここからは妄想です

任意の間隔をあけて繰り返すとなると、background-repeatプロパティではなく別のプロパティが必要になる感じがする。background-gapというラベルでどうだろうか。値として指定可能なのはlength型とpercentage型で良さそう。x方向とy方向で個別に指定できるようにもなるべきだ。初期値は0ぽい。仕様っぽく書くと、こうだ。

Name: background-gap
Value: <gap-size> [, <gap-size]>
<gap-size> = [ <length> | <percentage>]
Initial: 0

そして、x方向は10pxの間隔を確保し、y方向では5pxの間隔を確保させて画像を繰り返したい時はこう書く。

.elem{
  background-image: url("path/to/image.png");
  background-repeat: repeat;
  background-gap: 10px 5px;
}

それっぽい感じになった。

backgroundショートハンドの時はどこに書く?と思ったけどしょせん仮定の話なのでこのあたりでやめておく。

妄想おわり

「CSSで出来そうで出来ないこと」は他にもいくつかある。代替手段を考えるのも楽しいけど、仮に仕様化したらどうなるかを考えるのも楽しい。今回はbackground-gapというようなプロパティを妄想したが、ショートハンドの指定方法やbackground-repeat: space;との同時指定、background-sizerepeating-*-gradientとの兼ね合いなど、既存のプロパティとどう影響するのかを考え出すと妄想が捗ってさらに楽しい。

しかしプロパティー名と取りうる値のことしか考えてないあたり、所詮素人の遊びだね感が強い。ブラウザの実装見て、どの計算式使えばいいとかまで言えるようになりたい。

なりたいかな。そうでもないな。


このエントリは「 outlineプロパティで作った枠線は角丸にすることができない」と同様に、9ヶ月位前に起こした原稿で一応シリーズの2本目のつもりでいた。企画者の人、元気ですか。