HAM MEDIA MEMO

max-width がイメージと違う動きをする？ width と max-width と float を理解する

h2ham

ひとまずネタもとの内容を確認する

HTMLとCSSのセレクタは一部このブログように調整していますが、下記のようなデモでした。

HTML

<div class="demo-block">
  <div class="demo-wrapper">
    <div class="demo-max-width">
      <p>max-width 400px指定</p>
    </div>
    <div class="demo-side">
      <p>side 200px指定</p>
    </div>
  </div>

  <div class="demo-wrapper">
    <div class="demo-normal-width">
      <p>width 400px指定</p>
    </div>
    <div class="demo-side">
      <p>side 200px指定</p>
    </div>
  </div>
</div>

CSS

.demo-wrapper {
  width: 100%;
  border: 5px solid #fcc;
  text-align: center;
  overflow: hidden;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-side {
  float: right;
  width: 200px;
  background: orange;
}

.demo-max-width {
  float: left;
  max-width: 400px;
  background: #f33;
}

.demo-normal-width {
  float: left;
  width: 400px;
  background: #f33;
}

モズデモ

max-width 400px指定

side 200px指定

width 400px指定

side 200px指定

私にとっては想定通り。しかし、ネタ元では以下のようなことを想定していた様子

* 予想ではmax-widthの400pxが下のwidth
400pxと同じ幅になるはずが、すごく小さく表示されてしまった。

* ブラウザの大きさを縮めても、width指定のブロックと同じで max-widthが可変しませんでした。

引用元：【CSS】max-widthについて調べて、floatとセットで使いたいけど使えない現状

予想ではmax-widthの400pxが下のwidth 400pxと同じ幅になるはずとの書いていますが、なりません！

モズは何を理解していないか

max-width の問題ではなく、 float 時の width 変化を理解出来ていない様子。

ひとまず float と width をそれぞれ確認しましょう。

以降利用するサンプルの HTML

<div class="demo-block">
  <div class="demo-wrapper">
    <div class="demo-sample-block">
      <p>ダミーテキスト</p>
    </div>
  </div>
</div>

width の指定をしない CSS

.demo-wrapper {
  width: 100%;
  border: 5px solid #fcc;
  text-align: center;
  overflow: hidden;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-sample-block {
  background: #f33;
}

width の指定をしない場合

ダミーテキスト

width も float も指定していないブロックは 親ブロックのサイズまでのびます。おそらくこれは想定どおりなのかと思います。

float を指定する

width も指定していないブロックに float を指定するとどうなるか。

float を指定した場合 CSS

.demo-wrapper {
  width: 100%;
  border: 5px solid #fcc;
  text-align: center;
  overflow: hidden;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-sample-block {
  background: #f33;
}

.demo-sample-block-left {
  float: left;
}

float を指定した場合

ダミーテキスト

余白を除けばテキストの範囲のサイズになります。これが基本。 ネタ元の想像していたとおりにはならないのです。

では、どうしたら想像していたとおりになるのか。

float と width を指定する

ここからがポイント、float だけでは先程のデモのようにテキストサイズになってしまいます。テキストサイズ以上にするためには width を明示的に指定します。

float と width を指定した場合 CSS

.demo-wrapper {
  width: 100%;
  border: 5px solid #fcc;
  text-align: center;
  overflow: hidden;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-sample-block {
  background: #f33;
}

.demo-sample-block-left-type2 {
  float: left;
  width: 100%;
}

float と width を指定した場合

ダミーテキスト

width: 100%; を指定すると float をかけていても先ほどのようにブロックいっぱいまで伸びます。

今回はこの指定がぬけていたために、伸びないという状況に。

float と width に max-width を加える

では、先ほどのデモに、さらに max-width を加えてみましょう。

max-width も指定 CSS

.demo-wrapper {
  width: 100%;
  border: 5px solid #fcc;
  text-align: center;
  overflow: hidden;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-sample-block {
  background: #f33;
}

.demo-sample-block-left-type3 {
  float: left;
  width: 100%;
  max-width: 400px;
}

max-width も指定場合

ダミーテキスト

width で指定したサイズが max-width 以上になる場合は max-width を最大のサイズとなるように調整してくれるのです。

と、これはすでに想定どおりだったのだと思います。

まとめ：ネタ元のスタイルを修正してイメージ通りにする

ネタ元 CSS をイメージ通りにする CSS

では最後に、ここまでの内容を組み合わせて、ネタ元をイメージしたとおりにしてみましょう。

max-width を指定しているセレクタに、 width: 100%; を指定するだけです。

.demo-wrapper {
  width: 100%;
  border: 5px solid #fcc;
  text-align: center;
  overflow: hidden;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-side {
  float: right;
  width: 200px;
  background: orange;
}

.demo-max-width-type2 {
  float: left;
  width: 100%;
  max-width: 400px;
  background: #f33;
}

.demo-normal-width {
  float: left;
  width: 400px;
  background: #f33;
}

モズデモ改良版

max-width 400px指定

side 200px指定

width 400px指定

side 200px指定

これでネタ元のイメージした通りのものになったのではないかと思います。

ただし、１つ目のイメージのものだけで、２つ目のレスポンシブには対応しているわけではないです。 ２カラムで片方横幅固定、もう一方が可変幅で作りたい場合は、これだけでは足りないです。

が、それもやると長くなるので、それはまたの機会にしたいと思います。

余談

最後にちょっとしたつぶやきを。

モズよ、デモだからって id を２箇所で使いまわすなんて・・・

参照：