Width and height
height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。box-sizing が border-box に設定されていた場合は、 境界領域の高さを定義します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| width は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizing を border-box に設定すると、境界領域の幅を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
is animatable アニメーション可能です | 26 | 12 | 16 | 7 | 26 | 7 |
| その他 | ||||||
| は CSS のデータ型で、 <number> とそれに添付された単位を表します (10px など)。 | 1 | 12 | 1 | 1 | 18 | 1 |
| は CSS のデータ型で、長さの値を表します。長さは width、height、margin、padding、border-width、font-size、text-shadow など数多くの CSS プロパティで使用されています。 | 1 | 12 | 1 | 1 | 18 | 1 |
| は CSS のデータ型で、 length または percentage が取りうる値を表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 width、 height, margin, padding、 font-size など、たくさんのプロパティでパーセント値を使うことができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.fixed { width: 300px; height: 200px; }
.fluid { width: 100%; height: auto; }
.viewport { width: 100vw; height: 100vh; }ライブデモ
実務での使いどころ
-
レスポンシブサイズ指定
パーセンテージやビューポート単位を使用して、画面サイズに応じて自動調整される要素サイズを設定します。
注意点
- width と height を固定値で指定するとコンテンツがオーバーフローする可能性があるため、min-/max- プロパティの併用を検討してください。
アクセシビリティ
- テキストコンテンツの要素には固定の height を避け、フォントサイズの拡大に対応できるようにしてください。