文章のまわりに罫線を表示するため、p{～」に、罫線のデザイン設定を追加します
まず、border-styleで罫線の種類を指定します。
点線で表示させるには「dotted」を指定します
p{～」の中に「;border-style:dotted」を追加します
次に罫線の太さはborder-widthで設定出来ます。ここでは６ピクセルとします
p{～」の中に「;border-width:6px」を追加します
最後に罫線の色をborder-colorで設定します
色の値をコピーライト部分の色と同じ「#377c5f」設定にし
p{～」の中に「;border-color:#377c5f」を追加しました
|
<html> <head> <title>色探しの旅</title> <style type="text/css"><!-- body{color:#666666;background-color:#f0f8ff} h1{font-size:25px; font-family:'Comic Sans MS';color:royalblue} span.iro{color:olive;font-weight:bold} span.sora{color:navy} p{width:360px;text-align:left;background-color:#dbe9dd;padding:20px;border-style:dotted;border-width:6px;border-color:#377c5f} div.copy{background-color:#377c5f;color:#ffffff;font-size:smaller;padding:2px;width:30%} --></style> </head> <body> <div align="center"> <h1>色探しの旅『Sky&Water』</h1> <p>日本の四季には色が満ちています。<span class="sora">空</span> そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p> <div class="copy">copyright(c)sora</div> </div> </body> </html> |
罫線のデザインは、
罫線の種類{border-style}、太さ{border-width}、色{border-color}の設定の組み合わせで指定します。
border-style設定できる値
|
border-width設定できる値
|
border-color設定できる値
|