3.1 プロパティ width
CSSでのブロックのサイズは、ウェブページレイアウトの構築において重要な役割を果たすんだよ。これらは、要素がどのように表示され、周囲の要素とどのように相互作用するかを決定するんだ。ここでは、width, height, max-width, max-heightプロパティを見ていくよ。これらはブロックのサイズを指定するのに使うんだ。
widthプロパティは要素の幅を指定するんだ。これはピクセル(px)、パーセンテージ(%)、em、remなどの様々な単位で指定できるんだよ。
値
- 自動値:
auto— 要素の幅はその内容と環境に基づいて自動的に決定される - 絶対単位:
px,pt,cm,mm,inなど - 相対単位:
%,em,rem,vw,vhなど
使用例:
CSS
.box {
background-color: #3498db;
color: white;
padding: 10px;
margin: 10px;
}
.box-fixed {
width: 200px;
}
.box-percentage {
width: 50%;
}
HTML
<div class="box box-fixed">固定幅 (200px)</div>
<div class="box box-percentage">パーセンテージ幅 (50%)</div>
コードの説明:
.box-fixed: 幅が200ピクセルに固定されている要素.box-percentage: 親要素の50%の幅を持つ要素
3.2 プロパティ height
heightプロパティは要素の高さを指定するものだよ。これも様々な単位で指定できるんだ。
値:
- 自動値:
auto— 要素の高さはその内容と環境に基づいて自動的に決定される - 絶対単位:
px,pt,cm,mm,inなど - 相対単位:
%,em,rem,vh,vwなど
使用例:
CSS
.container {
height: 300px;
}
.box {
color: white;
padding: 10px;
}
.box-fixed-height {
height: 150px;
background-color: #2ecc71;
}
.box-percentage-height {
height: 50%;
background-color: #7a5c71;
}
HTML
<div class="container">
<div class="box box-fixed-height">固定高さ (150px)</div>
<div class="box box-percentage-height">パーセンテージ高さ (50%)</div>
</div>
コードの説明:
.box-fixed-height: 高さが150ピクセルに固定されている要素.box-percentage-height: 親要素の50%の高さを持つ要素
3.3 プロパティ max-width
max-widthプロパティは要素の最大幅を設定するんだ。これは、要素が設定された値を超えて拡張するのを防ぐための制限なんだよ。
値:
- 制限なし:
none— 要素は任意の幅まで拡張可能 - 絶対単位:
px,pt,cm,mm,inなど - 相対単位:
%,em,rem,vh,vwなど
使用例:
CSS
.box {
background-color: #e74c3c;
color: white;
padding: 10px;
margin: 10px;
}
.box-max-width {
width: 100%;
max-width: 300px;
}
HTML
<div class="box">幅100% (デフォルト)</div>
<div class="box box-max-width">最大幅300px</div>
コードの説明:
.box-max-width: 最大幅が300ピクセルの要素。コンテンツは要素が300ピクセルを超えることを許さないんだ
3.4 プロパティ max-height
max-heightプロパティは要素の最大高さを設定するんだ。これは、要素が設定された値を超えて増加するのを防ぐための制限なんだよ。
値:
- 制限なし:
none— 要素は任意の幅まで拡張可能 - 絶対単位:
px,pt,cm,mm,inなど - 相対単位:
%,em,rem,vh,vwなど
使用例:
CSS
.box {
background-color: #9b59b6;
color: white;
padding: 10px;
max-height: 35px;
overflow: auto;
}
HTML
<div class="box">
<p>スクロールをデモンストレーションするための追加テキストです。<br>スクロールをデモンストレーションするための追加テキストです。<br>スクロールをデモンストレーションするための追加テキストです。</p>
</div>
コードの説明:
.box-max-height: 最大高さが100ピクセルの要素。もし要素の内容がこの値を超えた場合、overflow: auto;プロパティのおかげでスクロールされるんだ
GO TO FULL VERSION