STEP.4 内側の余白を加える
見やすくするため、内側のボックス（p要素）に「内側の余白」（パディング）を加えましょう。
div.stripe {
background-image: url("stripe.gif");
padding: 5px;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
}
background-image: url("stripe.gif");
padding: 5px;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
}
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
枠線と文字列との間隔が空いて、見やすくなりました。
STEP.5 枠線の枠線を指定する
STEP.4で終わりにしても構わないのですが、ここでは枠線の存在を強調すべく、「枠線の枠線」を引いてみましょう。
div.stripe {
background-image: url("stripe.gif");
padding: 5px;
border: 1px solid green;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border: 1px solid green;
}
background-image: url("stripe.gif");
padding: 5px;
border: 1px solid green;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border: 1px solid green;
}
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
「縞模様の枠線」の周囲に枠線を引いたことで、縞模様の存在を目立たせることができます。
STEP.6 （必要であれば）横幅を指定する
STEP.5のままでは、横いっぱいに枠線が広がってしまいます。それで構わない場合は良いのですが、横幅をもっと小さくしたい場合にはサイズを指定しましょう。
div.stripe {
background-image: url("stripe.gif");
padding: 5px;
border: 1px solid green;
width: 240px;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border: 1px solid green;
}
background-image: url("stripe.gif");
padding: 5px;
border: 1px solid green;
width: 240px;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border: 1px solid green;
}
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
いかがでしょうか？
これで、冒頭でご紹介した「縞模様の枠線」が完成しました。
最後にオプションとして、「縞模様の枠線」そのものを立体的に見せる装飾方法をご紹介いたします。
