「縞模様の枠線」を実現するソースのまとめ
HTMLソースとスタイルシートソースのまとめを掲載しておきます。 スタイルシートソースには、どこを修正すれば何が変化するのかをコメントの形で加えています。 自由にカスタマイズしてみる際の参考にどうぞ。
[HTMLソース]
<p>ボックスの中身です。</p>
</div>
同一ページ内に複数種類の枠線を用意する場合は、class名をそれぞれ異なる名称にして下さい。1種類しか掲載しない場合は、このままで構いません。
p要素の中身は、表示させたい文字列を自由に記述して下さい。画像などを含めても問題ありません。
[スタイルシートソース]
background-image: url("stripe.gif"); /* (A)縞画像 */
padding: 5px; /* (B)縞枠線の太さ */
border: 1px solid green; /* (C)外側の枠線 */
width: 240px; /* (D)縞ボックスの横幅 */
}
div.stripe p {
background-color: white; /* (E)背景色 */
margin: 0px; /* (このまま) */
padding: 0.3em; /* (F)内側の余白 */
border: 1px solid green; /* (G)内側の枠線 */
}
(A)縞画像：
枠線に使う縞模様の画像ファイル名を指定します。
(B)縞枠線の太さ：
縞模様の枠線の太さを指定します。太くしたい場合は、7px や 9px など大きな値を指定すればよいでしょう。細くしたいなら 3px や 2px など小さな値を指定します。
(C)外側の枠線 ＆ (G)内側の枠線：
「縞模様の枠線」の外側と内側の枠線を指定します。不要な場合ならこれらの記述は削除して構いません。上記のサンプルでは線色を「green」（緑色）にしています。 これは、「縞模様」の色合いに合わせて修正するとよいでしょう。
(D)縞ボックスの横幅：
ボックス全体の横幅を指定します。この記述を省略すれば、横幅いっぱいに広がります。
(E)背景色：
「縞模様の枠線」の内側の色（背景色）です。上記のサンプルでは白色（white）ですが、縞枠線の色合いに合わせて、何か薄い色を加えてもよいかもしれません。
(F)内側の余白：
「縞模様の枠線」と、枠線内に表示する文字列との間隔です。上記のサンプルでは「0.3em」（＝0.3文字分）の間隔を設けています。 ぴったりくっつけると読みにくくなるので、ある程度の間隔は開けた方が良いでしょう。もっと広くしたい場合は、大きな値を指定して下さい。
おわりに
今回は、凝った目立つ「縞模様の枠線」を作る方法をご紹介いたしました。
ぜひ、試してみて下さい。
記事中のサンプルで使用した縞模様画像（ 
） は、必要であればご自由にダウンロードしてご活用下さい。
【関連記事】
