幅を指定する
上部
スタイルシートを使ってボックスの幅を指定する方法について説明していくよ。
学
はい！お願いします。
上部
ボックスの幅を指定するには「width」を使うんだよ。
「%」と「px」を使って指定する場合について説明しよう。
%でボックスの幅を指定する
例えば、「見出し２」の幅を50%にしたい場合はスタイルシートに次のように書こう。
h2{width:50%;}
学
ん？これは何に対して50%になるんでしょうか？
上部
うん、例えば「見出し２」に対して幅100%を指定した場合、「見出し２」を含んでいるすぐ外側のタグの最大の幅まで広がるんだよ。
学
んー。難しい・・・。
上部
例えば、「見出し２」を含むすぐ外側のタグが<body>〜</body>で、<body>に対して500pxの幅を指定している場合を考えてみよう。この場合、「見出し２」に100%を指定すると、「見出し２」の実際の幅は500pxになる。一方で「見出し２」に50%を指定すると「見出し２」の実際の幅は250pxになるよ。
学
幅を100%にすると広がれる目いっぱいのところまで広がるって事ですかね。
上部
うん。その通り。そう考えると分かりやすいかな。
pxでボックスの幅を指定する
次に、例えば「見出し２」の幅を300pxにしたい場合はスタイルシートに次のように書こう。
h2{width:300px;}
学
はい！こっちの方法はすぐに理解できました！
