HTML・CSSリファレンス

CSSで要素の幅と高さを指定

CSSで要素の幅と高さを指定するにはwidthプロパティとheightプロパティを使います。

この時、DOCTYPEスイッチによって標準準拠モードと過去互換モードで解釈が異なるので注意が必要です。詳しくは下図及び標準準拠モードと互換モードを参照してください。

width、max-width、min-width

指定できる値は「数値＋単位」です。

プロパティ	説明	適用できない要素
width	内容領域の幅を指定する	非置換インライン要素 表の行 行グループ要素
max-width	内容領域の最大幅を指定 指定した値以上の幅には広がらない	非置換インライン要素 表関連要素
min-width	内容領域の最小幅を指定する 指定した値以下には狭まらない	非置換インライン要素 表関連要素

記述例

div.sample1 {
width: 200px;
background: #fc9;
}
div.sample2 {
min-width: 600px;
max-width: 80%;
background: #ccf;
}

サンプル

height、max-height、min-height

指定できる値は「数値＋単位」です。

プロパティ	説明	適用できない要素
height	内容領域の高さを指定する	非置換インライン要素 表の行 行グループ要素
max-height	内容領域の最大高さを指定 指定した値以上の幅には広がらない	非置換インライン要素 表関連要素
min-height	内容領域の最小高さを指定する 指定した値以下には狭まらない	非置換インライン要素 表関連要素

記述例

div.sample3 {
height: 200px;
background: #fc9;
}
div.sample4 {
min-height: 100px;
max-height: 200px;
background: #ccf;
}

サンプル

はみ出した部分の表示を指定（overflow）

はみ出した部分の表示を指定するにはoverflowプロパティを使います。ブロック要素及び置換要素に適用されます。

プロパティ:値	説明
overflow:visible	幅・高さを超えた部分ははみ出して表示される 指定した値以上の幅には広がらない デフォルト（初期値）である
overflow:hidden	幅・高さを超えた部分は表示されない
overflow:scroll	常にスクロールバーを表示 幅・高さを超えた部分はスクロールして見ることが出来る
overflow:auto	幅・高さを超えた場合の表示はブラウザに依存される 殆どのブラウザでは幅・高さを超えた場合はスクロールバーが表示される

記述例

div.sample5 {
margin: 5em 0;
height: 3em;
overflow: visible;
background: #fc9;
}
div.sample6 {
width: 200px;
height: 3em;
overflow: hidden;
background: #ccf;
}
div.sample7 {
width: 200px;
height: 3em;
overflow: scroll;
background: #fc9;
}
div.sample8 {
width: 200px;
height: 3em;
overflow: auto;
background: #ccf;
}

サンプル