徒然畑

徒然なるままに。

boxのwidthをパーセント指定して扱うとぶち当たったよくある落とし穴

どうもです。
天気良い日は部屋から窓の外の青空を見てるのが好きな引きこもりです。

1カラムレイアウトで一つのボックス内にボックス二つ並べたろーとwidthをパーセント指定しながらコーディングしていたら
なんだかうまくいかない現象にぶち当たったのでちょっと調べてみました。

結論から言うと、boxレイアウトするなら知っておくべき基礎的なことでした。ぶちあたってよかった。

横並びにならないboxのCSS指定とその対処法

【HTML】

<div id="sub">
      <div id="sub1">
      	<ul>
        	<li>side bar1</li>
        	<li>side bar2</li>
        </ul>
      </div> <!-- / #sub1 -->
      <div id="sub2">
      	<ul>
        	<li>side bar1</li>
        	<li>side bar2</li>
            <li>side bar3</li>
        	<li>side bar4</li>
        </ul>
      </div> <!-- / #sub2 -->
   </div> <!-- / #sub -->

CSS

#sub {
	color: #fff;
	width: 830px;
	background: #F36;
	padding: 15px;
	margin-bottom: 10px;
}

#sub:after {
	content: "";
	clear: both;
	display: block;
}

#sub1 {
	float: left;
	width: 50%;
	padding: 10px;
	background: #F36;
}

#sub2 {
	float: left;
	width: 50%;
	padding: 10px;
	background: #F36;
}

これでイメージ的にはsub1とsub2が横に二つトントンと並んでくれるだろうーと思ってブラウザ立ち上げたらこうなりました。

f:id:mio_U_M:20161105123924j:plain

(゜ω゜)?

「あれ…?幅50%ずつ指定だから綺麗に二分割されるんじゃ…?なんでカラム落ち…?」とちょと悩みましたが、
CSS見ていたらなんか怪しいところあったので修正してみたのがこう。

【HTML】

   <div id="sub">
      <div id="sub1">
      	<div id="paddingSetting">
	      	<ul>
    	    	<li>side bar1</li>
        		<li>side bar2</li>
        	</ul>
        </div> <!-- / #paddingSetting -->
      </div> <!-- / #sub1 -->
      <div id="sub2">
    	<div id="paddinfSetting">
      		<ul>
        		<li>side bar1</li>
        		<li>side bar2</li>
            	<li>side bar3</li>
        		<li>side bar4</li>
        	</ul>
        </div> <!-- / #paddingSetting -->
      </div> <!-- / #sub2 -->
   </div> <!-- / #sub -->

CSS

#sub {
	color: #fff;
	width: 830px;
	background: #F36;
	padding: 15px;
	margin-bottom: 10px;
}

#sub:after {
	content: "";
	clear: both;
	display: block;
}

#sub1 {
	float: left;
	width: 50%;
	background: #F36;
}

#sub2 {
	float: left;
	width: 50%;
	background: #F36;
}

sub1とsub2のpaddingとっぱらいました。そもそもこれいらないだろうと思ったし。

f:id:mio_U_M:20161105124532j:plain

なおりましたワーイ。

どうも内部の計算的には、sub1の幅=sub1のwidth + sub1のpaddingとなっていた模様で
どうもここら辺の理解ちゃんとできてないっぽいぞ、と思い、
なぜこの現象が起きたかググってみました。

幅指定の考え方

f:id:mio_U_M:20161105125227j:plain

よく見かけるboxの関係図です。
このboxに対してwidthを指定したとき、初め私はBorderまでを含めてwidthかと考えていたのですが
実際のところboxで指定するwidthとはContentの幅のことを言っているのです。

つまりContentの部分はちゃんと親のsubから見ると50%の幅になってはいますが、
修正前のCSSだとさらにPadding分の幅も加わって結果的にboxが幅50%以上になりでカラム落ちしてしまったわけなのです。
(もちろん指定があればBorder、Margin分も広がるとのこと)

カラム落ちしないようにwidthとpaddingを同時に設定するには

今回は練習用に作っていたのでpadding絶対にいる!ということはないのですが
もしどーしても指定したいという事態が起こったときに対処するにはどうしたらいいか、ついでに見っけたので書いておきます。

①入れ子にして別々に指定

widthとpaddingを同時に指定したらおかしくなるなら
widthとpaddingを別々に指定するように変えればいいじゃないという考え方。

【HTML】

<div id="sub">
      <div id="sub1">
      	<div id="paddingSetting">
	      	<ul>
    	    	<li>side bar1</li>
        		<li>side bar2</li>
        	</ul>
        </div> <!-- / #paddingSetting -->
      </div> <!-- / #sub1 -->
      <div id="sub2">
    	<div id="paddinfSetting">
      		<ul>
        		<li>side bar1</li>
        		<li>side bar2</li>
            	<li>side bar3</li>
        		<li>side bar4</li>
        	</ul>
        </div> <!-- / #paddingSetting -->
      </div> <!-- / #sub2 -->
   </div> <!-- / #sub -->

CSS

#sub {
	color: #fff;
	width: 830px;
	background: #F36;
	padding: 15px;
	margin-bottom: 10px;
}

#sub:after {
	content: "";
	clear: both;
	display: block;
}

#sub1 {
	float: left;
	width: 50%;
	background: #F36;
}

#sub2 {
	float: left;
	width: 50%;
	background: #F36;
}

#paddinfSetting {
	padding: 10px;
}

f:id:mio_U_M:20161105180331j:plain

※sub2のboxの上に変な余白で来たのがちょっと謎…
すんませんまだここは解明できてないです;;

②box-sizingを利用する
要素の幅と高さを計算する為に使用されるboxの既定のルールを変更することができるそうです。もとのルールから変えてしまえホトトギス

【HTML】

   <div id="sub">
      <div id="sub1">
      	<ul>
        	<li>side bar1</li>
        	<li>side bar2</li>
        </ul>
      </div> <!-- / #sub1 -->
      <div id="sub2">
      	<ul>
        	<li>side bar1</li>
        	<li>side bar2</li>
            <li>side bar3</li>
        	<li>side bar4</li>
        </ul>
      </div> <!-- / #sub2 -->
   </div> <!-- / #sub -->

CSS

#sub {
	color: #fff;
	width: 830px;
	background: #F36;
	padding: 15px;
	margin-bottom: 10px;
}

#sub:after {
	content: "";
	clear: both;
	display: block;
}

#sub1 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	float: left;
	width: 50%;
	background: #F36;
	padding: 10px;
}

#sub2 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	float: left;
	width: 50%;
	background: #F36;
	padding: 10px;
}

f:id:mio_U_M:20161105203535j:plain

※うまいこといったんですけど…
これ、DreamweaverCS6のデザインモードでみるとやっぱりカラム落ちしたままに見えてしまうので
ちょいと「は?」となってしまいますので注意。ブラウザで見るとちゃんとなるのにな…

てなてな感じで。
レスポンシブデザインは今やスマホが主流の現在において避けて通れないこと。
んでそんな中でwidthにパーセンテージ指定って結構ザラなので
今回けつまずいて勉強になったのでよかったです。ふう。

今度はベンダープレフィックスについてちょっと調べてみないとな。