スタイルシートで縞模様の画像を枠線にする
先ほど作成したHTMLに対してスタイルシートを適用し、縞模様の枠線を加えましょう。 その作り方を、STEP.1～6まで、順を追って説明していきます。
STEP.1 縞模様の画像を背景に指定する
まずは、外側のdiv要素に対して背景画像を指定します。背景画像には、枠線として使いたい縞模様の画像ファイルを指定します。
background-image: url("stripe.gif");
}
ここでは、縞模様の画像ファイル名が「stripe.gif」であるとして記述しています。実際に使用する際には、用意した画像ファイル名に合わせて書き換えて下さい。
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
背景画像として指定しているので、ボックス全体に縞模様が背景として広がっています。
STEP.2 内側のボックスに背景色を指定する
次に、文字列を記述している内側のボックスに背景色を指定します。
background-image: url("stripe.gif");
}
div.stripe p {
background-color: white;
}
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
縞模様の背景画像の上から、真っ白の背景色を指定しているので、先ほど指定した縞模様が見えなくなっています。
STEP.3 ボックスの余白を指定する（＝枠線の太さ）
外側のdiv要素の余白や、内側のp要素の余白を指定します。これによって、「縞模様の枠線」の太さを指定することになります。
background-image: url("stripe.gif");
padding: 5px;
}
div.stripe p {
background-color: white;
margin: 0px;
}
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
縞模様の背景画像を指定した（外側の）div要素の内側に余白を設けたため、真っ白の背景色を指定した（内側の）p要素との間に空間ができます。 その結果、縞模様画像が「枠線」のように見えるようになります。
ここで指定する余白のサイズが、「縞模様の枠線」の太さになります。（上記のソースでは、5pxです。）
だんだん形が見えてきました。
上記で、とりあえず「縞模様の枠線」はできています。 あとは、「縞模様の枠線」の枠線を指定したり、見やすいように内側の余白を設けたりしましょう。
