2/6 縞模様で目立つ枠線(囲み)を作る [ホームページ作成] All About

枠線に使う画像を用意する

縞模様の枠線の、縞模様部分は画像で作ります。先ほどの例では、以下の3つの画像を使いました。

この画像を、枠線の背景画像として使うことで、縞模様の枠線を実現します。

どんな画像でも自由に作成して枠線として使うことができます。何でも適当な画像を用意して下さい。上記の3画像を使う場合は、上記の画像を右クリックするなどして保存して、ご自由にご活用下さい。

まずは、HTMLを記述しましょう。
スタイルシートのborderプロパティを使った枠線であれば、対象のボックスに対してスタイルを適用するだけで枠線を引けますが、ここではHTML側にも少し記述を加える必要があります。

<div class="stripe">

   <p>ボックスの中身です。</p>

</div>

何も複雑なことはありません。 p要素で作った段落の外側を、div要素で囲んでいるだけです。

p要素の内容には、枠線の内側に表示したい文字列などを記述します。 div要素には、スタイルを適用するために、class属性を用いてクラス名「stripe」を付加しています。

HTMLの記述はこれだけです。
これだけでは、まだ何も装飾を施していないので、以下のようにしか見えません。

ボックスの中身です。

これに、スタイルシートを使って縞模様の枠線を加えます。