width / height

参考:

width | MDN

height | MDN

width | CSS-Tricks

height | CSS-Tricks

max-width / max-height

参考:

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

使い方

参考:

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

Using Min/Max Width and Height in CSS | Impressive Webs

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

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

参考:

CSS3 calc(), min() and max() functions | Dreamdealer

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

clamp

※未実装。CSS4 に向けて策定中。

参考:

clamp() | MDN

最大値に % と px の両方の制限をかける方法

width: 80%;
max-width: 600px;
<div class="outer">
  <div class="inner">
    content
  </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 エンジニアの記録。(blog.fagai.net)

css 100% width div not taking up full width of parent – Stack Overflow

タグ:

コメントを残す

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