要素のサイズを指定するプロパティを紹介します。
width
widthは要素の高さを指定するプロパティです。
HTMLは前回のレクチャーのままで大丈夫です。
<!-- 省略 -->
<body>
<div class="content">
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</div>
</body>
<!-- 省略 -->style.cssは文字コードの宣言以外削除し、以下のように記述してください。
.content {
background-color: #eee;
}要素のサイズが分かりやすいようにbackground-colorで色をつけます。
div要素はwidthが指定されていない場合、幅いっぱいに表示されます。
次に、style.cssにwidthを追加してみましょう。
.content {
background-color: #eee;
width: 200px;
}横幅が200pxになりました。次に、200pxを50%に書き換えてみましょう。
.content {
background-color: #eee;
width: 50%;
}ブラウザの幅を動かして確認みると、半分の幅で可変します。
%で指定すると、親要素（ここではbody要素）の幅を基準にその要素の幅が決まります。
body要素の幅が1000pxの場合、width: 50%を指定すると、1000×0.5で500pxになります。
max-width
max-widthは要素の最大幅を指定するプロパティです。
style.cssにmax-widthを追加してください。
.content {
background-color: #eee;
width: 50%;
max-width: 400px;
}ブラウザの幅を動かして挙動を確認してください。
ブラウザが広くなると一定の幅に固定されます。狭くすると50%の幅で可変します。
これは、「幅（width）は50%だけど、400pxより大きくはしない」という指定になります。
min-width
min-widthは幅の最小値を指定するプロパティです。
style.cssのmax-widthを削除し、min-widthを追加してください。
.content {
background-color: #eee;
width: 50%;
min-width: 400px;
}ブラウザの幅を動かして挙動を確認してください。
ブラウザが広くなると50%の幅で可変しますが、狭くなると400pxで固定されます。
これは、「幅（width）は50%だけど、400pxより小さくはしない」という指定になります。
height
heightは、高さを指定するプロパティです。
style.cssを以下のように書き換えてください。
.content {
background-color: #eee;
height: 300px;
}要素の高さが高くなりました。
次に、heightの値を以下のように書き換えてください。
.content {
background-color: #eee;
height: 50vh;
}vhという単位は、ウィンドウの高さを基準とした単位です。
ブラウザの高さを動かして、挙動を確認してください。
ウィンドウの高さ=100vhで、50vhの場合は半分の高さになります。
他にもvwという単位もあり、これはウィンドウの幅を基準とした単位となります。
max-height
max-heightは、最大の高さを指定するプロパティです。
.content {
background-color: #eee;
height: 50vh;
max-height: 300px;
}ブラウザの高さを動かして挙動を確認してください。
ブラウザの高さが広くなると、一定の高さに固定されます。ブラウザの高さが狭くなると、半分の高さで可変します。
min-height
min-heightは、ブラウザの高さの最小値を指定するプロパティです。
style.cssのmax-heightを削除し、以下のようにmin-heightを追加してください。
.content {
background-color: #eee;
height: 50vh;
min-height: 200px;
}ブラウザの高さが広くなると半分の高さで可変しますが、狭くなると一定の高さで固定されます。