【CSS】max-widthについて調べて、floatとセットで使いたいけど使えない現状
某モズが CSS 勉強中とのことですが・・・
floatした要素にmax-widthを指定したときに
思った挙動と違うレンダリングになってしまいました。
そもそも max-width の部分よりも float の挙動を理解しきれていないのでは？と予想。
理解していない部分を確認して、どのようになるかを再確認してみましょう。
ひとまずネタもとの内容を確認する
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 を２箇所で使いまわすなんて・・・
