Width and height
width と height はCSS最も基本的なサイズ指定プロパティです。固定値（px）、相対値（%、em）、ビューポート単位（vw、vh）など様々な単位で指定できます。box-sizing プロパティと組み合わせることで、パディングやボーダーを含めたサイズ計算を制御できます。
概要
width と height はCSS最も基本的なサイズ指定プロパティです。固定値（px）、相対値（%、em）、ビューポート単位（vw、vh）など様々な単位で指定できます。box-sizing プロパティと組み合わせることで、パディングやボーダーを含めたサイズ計算を制御できます。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.fixed { width: 300px; height: 200px; }
.fluid { width: 100%; height: auto; }
.viewport { width: 100vw; height: 100vh; }実務での使いどころ
-
レスポンシブサイズ指定
パーセンテージやビューポート単位を使用して、画面サイズに応じて自動調整される要素サイズを設定します。
注意点
- width と height を固定値で指定するとコンテンツがオーバーフローする可能性があるため、min-/max- プロパティの併用を検討してください。
アクセシビリティ
- テキストコンテンツの要素には固定の height を避け、フォントサイズの拡大に対応できるようにしてください。