バシャログ。

画像を使って点線を実装する場合

まず、以下のような幅2px 高さ1pxの透過 GIF 画像（bg_dotted_01.gif）を作成します。
格子模様になっている箇所が透過部分となります。

この画像を背景画像として読み込ませ、横方向に繰り返し指定をします。
以下がそのサンプルです。

サンプル

点線です。点線です。点線です。点線です。点線です。

ソースコード

HTMLとCSSでの指定は以下のようになります。

<p class="dottedSample01">点線です。点線です。点線です。点線です。点線です。</p>

p.dottedSample01 {
	background: url(bg_dotted_01.gif) repeat-x 0 100%;
}

簡単に実装できます。ではでは続きましてレベル2です。

 

画像を使って点線の囲みを実装する場合

応用として、点線の囲みを実装してみます。

幅2px 高さ2pxの透過 GIF 画像（bg_dotted_02.gif）を作成します。
格子模様になっている箇所が透過部分となります。

サンプル

ソースコード

HTMLとCSSでの指定は以下のようになります。

<div class="dottedSample02">
<p>点線の囲みです。点線の囲みです。点線の囲みです。</p>
</div>

div.dottedSample02 {
	margin: 0;
	padding: 1px;
	background: url(bg_dotted_02.gif) repeat 0 0;
}
div.dottedSample02 p {
	margin: 0;
    padding: 10px;
    background-color: #FFFFFFF;
}

透過 GIF の画像を2pxにすることによりボックスのサイズ（幅および高さ）が偶数でも奇数でも点線が出るようになります。また 入れ子の要素 p で、白に塗りつぶし背景画像を1pxだけ残して隠すのがポイントとなります。。

バシャログ。では、CSSテクニックをバリバリ使ったWEB制作のお仕事のご依頼をドシドシお待ちしております。