<p>〜</p>の中に書いた文章の横幅を短くするため、
デザイン設定の場所として、「p{ }」を追加します
|
<html> <head> <title>色探しの旅</title> <style type="text/css"><!-- body{color:#666666} 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} --></style> </head> <body> <h1>色探しの旅『Sky&Water』</h1> <p>日本の四季には色が満ちています。<span class="sora">空</span> そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p> <div>copyright(c)sora</div> </body> </html> |
文章の横幅はwidthで設定出来ます
ここでは横幅を360ピクセルにするため「360px」と指定します
widthでは次の値でコンテンツの横幅を指定します
※widthで指定できる値
| 数値(pxなど) | 長さで指定します |
| 割合(%) | ウィンドウに対する割合で指定します |