見出しのあしらいとして、点線のアンダーラインを使う場面はよくあります。背景画像で点線を敷くとデザインの自由度は高い一方、repeat-xで繰り返すと点線が途中で見切れてしまうことがあります。

結論から言うと、background-repeatにspaceという値を指定すると、背景画像を見切れさせずに敷き詰められます。この記事では、点線アンダーラインの3つの表現方法を整理したうえで、背景画像が見切れる問題とspaceによる解決法を解説します。

点線アンダーラインを表現する3つの方法

1. CSSのborderを使う

border-bottom: 4px dotted #000;

もっとも手軽ですが、点と点の間隔を調整できないため、デザインの自由度は低めです。

2. CSSのグラデーションを使う

background-image: linear-gradient(to right, #000 4px, transparent 4px);
background-size: 15px 4px;
background-position: left bottom;
background-repeat: repeat-x;

CSSだけで表現でき間隔も調整できますが、点が丸ではなく四角になるため、線が太くなるとデザイン性は落ちます。この方法は別の記事で詳しく解説しているので、あわせて参考にしてください。

https://budsblue.net/wp/2023/06/09/adjust-spacing-between-dashed-dotted-borders/

3. CSSのbackground-imageを使う

background-image: url(../images/dotted-line.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 16px 4px;

点線の画像を用意して背景に敷く方法です。点の形や間隔を自由にデザインできるため、見た目のクオリティを求めるならこの方法が有力です。今回の本題は、この背景画像方式で起こるトラブルです。

背景画像を繰り返すと途中で見切れてしまう

背景画像をrepeat-xで繰り返すと、要素の幅と画像の幅が割り切れないときに、上の画像のように最後の点線が途中で切れてしまいます。見出しの幅は文字数によって変わるため、この見切れはどうしても発生しがちです。

対処法：background-repeat: space

この見切れは、background-repeatにspaceを指定すると解決できます。spaceは、画像を切り取らずに敷き詰められる回数だけ繰り返し、余った隙間を画像の間に均等に振り分けるという値です。最初と最後の画像は要素の両端にぴったり接するように配置されます。

後述のコード例にあるbackground-repeat: space no-repeatは、横方向はspaceで敷き詰め、縦方向はno-repeat（繰り返さない）という指定です。横1列の点線なので、縦は繰り返さないようにしています。

repeatとno-repeatしか使ってこなかった方も多いかもしれませんが、こうした繰り返しの制御に特化した値も用意されています。background-repeatの主な値を整理すると次のとおりです。

値	説明
repeat	領域を覆うまで繰り返す。端に収まりきらない画像は切り取られる（見切れる）。
space	切り取らずに敷き詰められる回数だけ繰り返し、余白を画像の間に均等配分する。両端の画像は領域の端に接する。
round	繰り返し数に応じて画像自体を伸縮させ、隙間なく敷き詰める。
no-repeat	繰り返さず1回だけ描画する。

各値の詳しい挙動は、MDNの公式ドキュメントも参考になります。

参考）https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat

repeat-x と space の違い

background-repeat: repeat-x

background-image: url(../images/dotted-line.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 16px 4px;
display: inline-block;

テキストの幅によっては、右端で背景画像が見切れてしまいます。

background-repeat: space

background-image: url(../images/dotted-line.png);
background-repeat: space no-repeat;
background-position: left bottom;
background-size: 16px 4px;
display: inline-block;

見切れない範囲で繰り返されますが、余白が均等に配分されるぶん、右端が中途半端な位置で終わって見えることもあります。

まとめ

• background-repeat: spaceで、背景画像を見切れさせずに表示できる
• 画像が要素幅に収まらないときや、等間隔で並べたいときに有効
• 余白が均等配分されるため、右端の見え方は背景画像の作り方で調整する

spaceは見切れを防げる便利な値ですが、余白の付き方によっては右端が中途半端に見えることもあります。用意する背景画像の幅や余白を工夫しつつ、ケースバイケースで使い分けるのがおすすめです。

きれいに見せるコツは、背景画像の点線素材の左右に、あらかじめ半分ずつの余白を入れておくことです。こうするとspaceで均等配分されたときに、点と点の間隔が自然に揃って見えます。また、余白ではなく画像自体を伸縮させて隙間なく敷き詰めたい場合はroundが向いています。点線のように「間隔をそろえたい」ならspace、模様のように「隙間なく埋めたい」ならround、と目的で選び分けるとよいでしょう。