要素の幅／高さを指定する方法 (width / height) [CSS]

領域の幅／高さ

• width
• height

参考：

基本ボックスモデル入門 | MDN

使い方

参考：

CSS の width と height の指定方法をマスターしよう | サルワカ

width と height の解説！効かない時の解消法 | RAMUNE BLOG

width | CSS-Tricks

height | CSS-Tricks

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 の効果的な使い方のまとめ | コリス

max-width | CSS-Tricks

max-height | CSS-Tricks

max-width | MDN

max-height | MDN

How do I auto-resize an image to fit a ‘div’ container? – Stack Overflow

min-width

参考：

min-width | HTML クイックリファレンス

min-width | とほほの WWW 入門

min-width とは | コーディングのプロが作る CSS 辞典

min-width | MDN

内在サイズ (Intrinsic Sizing)

• max-content
• min-content
• fit-content
• stretch/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

内在サイズ (Intrinsic size) | MDN

max-content | MDN

min-content | MDN

fit-content | MDN

fit-content and fit-content() | CSS-Tricks

Intrinsic & Extrinsic Sizing | Can I Use Support Tables

CSS Intrinsic & Extrinsic Sizing Module Level 3 | W3C

単位

• px
• em
• rem
• %
• vw
• vh
• vmin
• vmax

参考：

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 で使える単位について | ホームページ制作のアテンド

length | MDN

Viewport Units (vw / vh / vmin / vmax) | Can I Use Support Tables

calc

参考：

知っていると便利な calc() 関数の使い方のまとめ | コリス

画像の最大幅を calc() で制御する | terkel.jp

calc() | MDN

A Couple of Use Cases for Calc() | CSS-Tricks

min / max

参考：

CSS の比較関数が便利すぎる！ min() / max() / clamp() の使い方を詳しく解説 | コリス

min() | MDN

max() | MDN

Calc of max, or max of calc in CSS – Stack Overflow

clamp

参考：

CSS の比較関数が便利すぎる！ min(), max(), clamp() の使い方を詳しく解説 | コリス

clamp() | MDN

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