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

公開日

2016-03-15

タグ

CSS

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

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

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

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

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

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

もし仕様化されるなら

ここからは妄想です

任意の間隔をあけて繰り返すなら、background-repeat プロパティではなく別のプロパティが必要になる感じがする。background-gap というラベルでどうだろうか。値として指定可能なのは length 型と percentage 型で良さそう。x 方向と y 方向で個別に指定できるようにもなるべきだ。初期値は 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-size や repeating-*-gradient との兼ね合いなど、既存のプロパティとどう影響するのかを考え出すと妄想が捗ってさらに楽しい。

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

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

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