width / height

参考

width | MDN

height | MDN

使い方

参考

CSS の width (幅) と height (高さ) の指定方法をマスターしよう | カルワザ

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 | CSS-Tricks

max-height | CSS-Tricks

max-width | MDN

max-height | MDN

min-width

参考

min-width | スタイルシートリファレンス (htmq.com)

min-width | とほほの WWW 入門

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

min-width | MDN

Intrinsic Sizing

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

単位

  • px
  • em
  • rem
  • %
  • vw
  • vh
  • vmin
  • vmax
こちらのページを参照

参考

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

<length> | MDN

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() の使い方を詳しく解説 | コリス

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;

入れ子になった外側の要素に 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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です