前のページ見本次のページ】 更新日

U-6 文章の横幅を指定する

1)文章のデザイン設定を書く場所を用意します

<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>

2)文章の横幅を指定します

文章の横幅はwidthで設定出来ます
ここでは横幅を360ピクセルにするため「360px」と指定します

3)横幅を設定

widthでは次の値でコンテンツの横幅を指定します
※widthで指定できる値
数値(pxなど)長さで指定します
割合(%)ウィンドウに対する割合で指定します