jQuery Mobile

cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。

しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。

CSS3を使用するので対応ブラウザがちょっと狭くなりますが¹、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。

手順

やり方は下記の4つの指定をすれば良いだけです。

1. 破線の部分はbackground-imageを使用して背景画像として描画します
2. 縞模様はlinear-gradientを使用してグラデーションの濃淡で表現します
3. color-stopsを使用して線分と間隔の開始と終了の位置をそれぞれ設定します
4. 最後に縞模様1ブロック分をbackground-sizeで区切ります

SassとCompassを使用するとこんな感じで4行で指定できます。

color-stopsの部分を調整すれば破線の間隔を変更する事が可能です。px指定も勿論可能です。

破線の場合は色をつける部分とつけない部分の2色なのでcolor-stopsの指定がそんなに面倒では無いです。線分の終了位置と余白の開始位置を同じに設定すれば境目はグラデーションにならずに綺麗に描画されます。間隔の部分は透過させるのでtransparentで区切っておきます。

Mixin作った

Sassを使っているので、使い回しがきくようにMixinにしておきました。

呼び出す時には+dotted(色, 線分, 間隔, 高さ)で呼び出すだけなので簡単に使用できます。

斜線もできそう

repeating-linear-gradientを使用すると斜線もできるようなので、ちょっと試してみました。

斜線バージョンも見る

錯視みたいですね。

辛うじて表示できているように見えますが、入力している値によってはたまにズレが出てしまいます・・・