幅・高さの指定
widthheightmax-widthmin-heightaspect-ratio
要素のサイズを制御するプロパティ群です。固定値・割合・ビューポート単位・コンテンツ依存など多彩な値を組み合わせてレスポンシブなレイアウトを構築します。
デモ：様々な width 値
width: 200px — 固定値（px）
width: 200px
width: 50% — 親要素の50%
width: 50%
width: 75% — 親要素の75%
width: 75%
width: 100% — 親要素の100%（デフォルトのブロック要素）
width: 100%
デモ：max-width / min-width
max-width: 300px（ウィンドウを広げても300pxまで）
width: 100% / max-width: 300px
min-width: 250px（コンテンツが少なくても250px確保）
短い
width: 100% + max-width: 600px（レスポンシブの基本）
モバイルでは全幅、デスクトップでは600px上限
デモ：height の指定方法
height: 60px
60px固定
height: 100px
100px固定
min-height: 60px
60px以上（コンテンツに応じて伸びる）
height: auto
コンテンツに合わせて高さが変わります（デフォルト）
コンテンツに合わせて高さが変わります（デフォルト）
auto（デフォルト）
比較：width 100% vs 100vw
| 観点 | width: 100% | width: 100vw |
|---|---|---|
| 基準 | 親要素の幅 | ビューポート（ウィンドウ）の幅 |
| スクロールバー | 含まない | ⚠️ スクロールバー幅を含む場合あり |
| ネスト時 | 親の制約を受ける | 親の制約を無視して全幅 |
| 使いどころ | 通常のコンテンツ幅 | 全画面ヒーロー・モーダル背景 |
NEWaspect-ratio（2021年〜）/ fit-content / min-content / max-content
aspect-ratio は幅に対して自動的に高さを計算します。16:9の動画、1:1のアバターなどに最適です。
aspect-ratio: 1 / 1
正方形
aspect-ratio: 16 / 9
16:9 動画比率
aspect-ratio: 4 / 3
4:3
コンテンツ依存サイズ（fit-content / min-content / max-content）
width: fit-content（コンテンツぴったり）
min-content
width: max-content（折り返しなし最大幅）
/* aspect-ratio */
.video-container {
width: 100%;
aspect-ratio: 16 / 9; /* 高さを自動計算 */
}
/* コンテンツ依存の幅 */
.badge { width: fit-content; } /* コンテンツぴったり */
.nowrap { width: max-content; } /* 折り返しなし */
.wrap { width: min-content; } /* 最小折り返し幅 */
/* 論理プロパティ */
.box {
inline-size: 300px; /* width（横書き時） */
block-size: 200px; /* height（横書き時） */
}コード例
/* 基本的なサイズ指定 */
.element {
width: 300px; /* 固定値 */
width: 50%; /* 親要素の割合 */
width: 100vw; /* ビューポート幅 */
width: auto; /* デフォルト（コンテンツ/ブロックに応じる） */
height: 200px;
height: 100vh; /* ビューポートの高さ */
height: 100svh; /* Small Viewport Height（モバイル対応）*/
}
/* 最大・最小サイズ */
.responsive {
width: 100%;
max-width: 1200px; /* デスクトップで上限 */
min-height: 300px; /* 最低限の高さを確保 */
}
/* 縦横比 */
.thumbnail {
width: 100%;
aspect-ratio: 16 / 9; /* 幅に合わせて高さを自動計算 */
object-fit: cover;
}
/* コンテンツ依存 */
.tag {
width: fit-content; /* ラベルやバッジに */
padding: 4px 12px;
}🤖 AIプロンプトテンプレート
CSSのwidth・heightプロパティを使ったサイズ指定の実装例をReact + Tailwind CSSで作成してください。 要件: - px / % / vw / vhなど様々な単位のwidthを視覚的に比較できるデモ - max-width / min-width / max-height / min-heightを使ったレスポンシブサイズ制御の実装 - width: 100% + max-width: 1200px によるコンテナレイアウトの実装パターン - aspect-ratioを使った16:9動画プレースホルダー・1:1アバターの実装 - fit-content / min-content / max-content の違いを比較するデモ - 100vh vs 100svh（モバイルのアドレスバー対応）の違いを説明するデモ
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。