領域の幅／高さ
参考：
目次
使い方
参考：
CSS の width と height の指定方法をマスターしよう | サルワカ
width と height の解説！効かない時の解消法 | RAMUNE BLOG
Using Min/Max Width and Height in CSS | Impressive Webs
max-width / max-height
参考：
max-width と min-width の使い方まとめ | サルワカ
max-width と min-width を解説！効かない時の対処法 | RAMUNE BLOG
CSS の便利なプロパティ min-width と max-width、min-height と max-height の効果的な使い方のまとめ | コリス
How do I auto-resize an image to fit a ‘div’ container? – Stack Overflow
min-width
参考：
min-width とは | コーディングのプロが作る CSS 辞典
内在サイズ (Intrinsic Sizing)
max-contentmin-contentfit-contentstretch/fill
参考：
CSS での横幅／高さの指定にキーワード値を使う – Qiita
要素内容に依存する幅の指定について | Unformed Building
fit-content / min-content / max-content の便利な使い方／CSS でコンテンツに依存してサイズを決める | コリス
fit-content プロパティの便利な使い方 | コリス
見出しに使える fit-content を解説してみる | Pulp Note
max-content と min-content の違い | ミフネ WEB
意外と知らないけど知っておきたい／内包するコンテンツの大きさに応じて要素の幅を可変させるレスポンシブテクニック | ウェブまなぶ
要素内容に依存する幅の指定について | Unformed Building
fit-content and fit-content() | CSS-Tricks
Intrinsic & Extrinsic Sizing | Can I Use Support Tables
CSS Intrinsic & Extrinsic Sizing Module Level 3 | W3C
単位
pxemrem%vwvhvminvmax
参考：
px、em、%、rem – CSS のフォントサイズ指定／それぞれの違いと変換 | InfinityScope
px, %, em, rem, vw, vh など、CSS の異なる単位が互いにどのように変換されているかが分かる便利ツール | コリス
CSS には vw / vh / vmin / vmax という単位がある | DevelopersIO
ビューポート (vw / vh) とパーセント (%)、レスポンシブに適した単位の賢い使い分け方法 | コリス
ビューポート単位 vw / vh / vmin / vmax を使った CSS のテクニックのまとめ | コリス
CSS の width とは？特徴から状況に応じた使い方まで徹底解説！ | WEBCAMP MEDIA
vw / vh / vmin / vmax という CSS で使える単位について | ホームページ制作のアテンド
Viewport Units (vw / vh / vmin / vmax) | Can I Use Support Tables
calc
参考：
知っていると便利な calc() 関数の使い方のまとめ | コリス
画像の最大幅を calc() で制御する | terkel.jp
A Couple of Use Cases for Calc() | CSS-Tricks
min / max
参考：
CSS の比較関数が便利すぎる！ min() / max() / clamp() の使い方を詳しく解説 | コリス
Calc of max, or max of calc in CSS – Stack Overflow
clamp
参考：
CSS の比較関数が便利すぎる！ min(), max(), clamp() の使い方を詳しく解説 | コリス
clamp() | Can I Use Support Tables
最大値に % と px の両方の制限をかける方法
width をパーセントで指定し、max-width をピクセル単位で指定する。
width: 80%;
max-width: 600px;Code language: CSS (css)入れ子になった外側の要素に max-width をパーセントで指定し、内側の要素に max-width をピクセル単位で指定する。
<div class="outer">
<div class="inner">
contents
</div>
</div>
<style>
.outer { max-width: 80%; }
.inner { max-width: 600px; }
</style>Code language: HTML, XML (xml)参考：
要素の幅指定 width と max-width、どちらに100%と固定幅を指定すべきか | コリス
How to set a max-width as percent AND pixels? – Stack Overflow
width が効かない
参考：
display: block で width 100% にならない要素 – Qiita
width と height の解説！効かない時の解消法 | RAMUNE BLOG
width: auto と width: 100% の違い
参考：
width: auto と width: 100% の違い | けんちゃん先生の Web 講座
width: 100% と、width: auto の違い – teratail
width: 100vw
参考：
親要素を無視してブラウザ幅100%で表示する | 動かざることバグの如し
高さ 100%
要素をクライアント領域の高さ 100% にするには、html 及び body 要素に高さを指定する。
html, body {
height: 100%
margin: 0;
}Code language: CSS (css)参考：
height: 100% の要素が画面の高さ 100% にならない場合の対応方法 – Qiita
CSS で height: 100% を使う方法について | Ginpen.com
height: 100% が効かない！ CSS の height の使い方について | NatsukiMemo
親要素を子要素の大きさに合わせる
- 親要素に「
width: fit-content;」を指定する。 - 親要素に「
display: inline-block;」を指定する。
参考：
ブロック要素の横幅を内容／中身に合わせる2つの方法 | 32Web
CSS でブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス
Flexbox の親要素を可変の子要素に合わせる – Qiita
親要素の width を子要素の width に合わせる | NER
親要素の width を子要素の width に合わせる | bbr-webapp-memo
親要素の幅を子要素に合わせる方法 | マンガでわかるホームページ作成
子要素に合わせて親要素の幅を変える | Production 586
子要素の高さに合わせて親要素の高さを変更したい – teratail
Expand container div with content width – Stack Overflow
width equal to content – Stack Overflow
How to size div to fit the image inside? – Stack Overflow
div height 100% and expands to fit content – Stack Overflow
スクロールすると背景が消える
横スクロールさせると背景が幅いっぱいになっておらず消えてしまう。
<body>
<div class="container">
<div class="wider-than-window">Blah Blah</div>
</div>
</body>Code language: HTML, XML (xml)コンテナで背景を設定しているが、内部の要素をそれ以上の幅に設定している。
.container {
background: url("background.png");
}
.wider-than-window {
width: 1200px;
height: 300px;
}Code language: CSS (css)原因：
コンテナにおいて親要素である body の幅を基準に背景を設定しており、body の幅はデフォルトではウィンドウの幅と同じになる。(内部の要素は、body やコンテナの大きさを突き抜けてはみ出している。)
対処法：
body の最小幅として必要な幅を設定する。
body {
min-width: 1200px;
}Code language: CSS (css)参考：
良くある CSS での width の勘違いやミス | 新人 Web エンジニアの記録。
100% width div not taking up full width of parent – Stack Overflow