width / height
参考：
目次
使い方
参考：
CSS の width (幅) と height (高さ) の指定方法をマスターしよう | カルワザ
Using Min/Max Width and Height in CSS | Impressive Webs
max-width / max-height
参考：
max-width と min-width の使い方まとめ | サルワカ
min-width
参考：
min-width | スタイルシートリファレンス (htmq.com)
min-width とは｜コーディングのプロが作る CSS 辞典
Intrinsic Sizing
max-contentmin-contentfit-contentstretch/fill
※ IE / Edge / Opera は非対応 (2019年現在)
参考：
CSS での横幅 (width) 、高さ (height) の指定にキーワード値を使う – Qiita
要素内容に依存する幅の指定について | Unformed Building
Intrinsic & Extrinsic Sizing | Can I use… Support tables
CSS Intrinsic & Extrinsic Sizing Module Level 3 | W3C
単位
pxemrem%vwvhvminvmax
参考：
CSS のフォントサイズ指定『px、em、%、rem』それぞれの違いと変換 | InfinityScope
px, %, em, rem, vw, vh など、CSS の異なる単位が互いにどのように変換されているかが分かる便利ツール | コリス
CSS には vw, vh, vmin, vmax という単位がある | Developers.IO
ビューポート (vw, vh) とパーセント (%)、レスポンシブに適した単位の賢い使い分け方法 | コリス
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;
入れ子になった外側の要素に max-width をパーセントで指定し、内側の要素に max-width をピクセル単位で指定する。
<div class="outer">
<div class="inner">
contents
</div>
</div>
<style>
.outer { max-width: 80%; }
.inner { max-width: 600px; }
</style>
参考：
要素の幅指定 width と max-width、どちらに100%と固定幅を指定すべきか | コリス
How to set a max-width as percent AND pixels? – Stack Overflow
width が効かない
参考：
display: block で width 100% にならない要素 – Qiita
width: auto と width: 100% の違い
参考：
width: auto と width: 100% の違い| けんちゃん先生の Web 講座
width: 100% と、width: auto の違い | teratail
width: 100vw
参考：
親要素を無視してブラウザ幅100%で表示する CSS | 動かざることバグの如し
スクロールすると背景が消える
横スクロールさせると背景が幅いっぱいになっておらず消えてしまう。
<body>
<div class="container">
<div class="wider-than-window">Blah Blah</div>
</div>
</body>
コンテナで背景を設定しているが、内部の要素をそれ以上の幅に設定している。
.container {
background: url("background.png");
}
.wider-than-window {
width: 1200px;
height: 300px;
}
原因
コンテナにおいて親要素である body の幅を基準に背景を設定しており、body の幅はデフォルトではウィンドウの幅と同じになる。(内部の要素は、body やコンテナの大きさを突き抜けてはみ出している。)
対処法
body の最小幅として必要な幅を設定する。
body {
min-width: 1200px;
}
参考：
良くある CSS での width の勘違いやミス | 新人 Web エンジニアの記録。
css 100% width div not taking up full width of parent – Stack Overflow