By U Zensen.

欲しいものはプログラミングで自分で作る。

可変の要素を横並びにするにはfloatとoverflowを使うと便利‼︎

2015 / 11 / 1 2016 / 10 / 30
CSS
2

はじめに!!

みなさんお疲れ様です!ぴーすけと申します。

今回はHTMLで可変の要素を横並びにする方法を解説します。

スポンサードリンク

可変要素を横並びにする方法

固定幅要素
可変幅要素

要素を横並びにするには、floatとoverflowを使用します。

css

//外側を囲っている要素 #wrapper1 { width: 100%;//外側の幅を決める } //左側の固定幅要素 #wrapper1 .left { float: left;//固定する位置を決める(左側に固定) width: 100px;//固定幅を決める } //右側の可変幅要素 #wrapper1 .right { overflow: hidden;//これが大事 width: auto;//幅を決めない }

固定したい要素(width: ○○px)にfloatをかけて、可変の要素(width: auto;)にoverflow:hidden;を書くと横並びになります。もちろんfloatとoverflowをかけた要素達を囲って幅を指定することで、好きな幅や位置でこの横並びを実装できます。イメージとしては、決められた幅の中にfloatで固定した要素を用意して、その固定された幅以外の残りの部分にoverflow:hidden;の要素が収まるという感じです。

書き方のポイントとしては、overflowをかけた要素はfloatをかけた要素よりも後ろに記述するということです。

固定幅と可変幅の横ならする方法には固定幅分のmarginを用意する方法があります。

固定幅要素
可変幅要素

css

#wrapper2 { width: 100%; } #wrapper2 .left { width: 100px; float: left; } #wrapper2 .right { width: auto; margin-left: 100px; }

floatとoverflowを使った横並びの利点

floatとoverflowを使った横並びの利点は、固定幅の要素をいくつか用意しても、可変幅の要素がちょうど良くおさまってくれるところです。以下のように左と右に固定の幅を用意しても、その間の隙間を可変幅が埋めてくれます。

固定幅要素1
固定幅要素2
可変幅要素

css

//外側 #wrapper3 { width: 100%; } //左の固定幅 #wrapper3 .left { float: left; width: 100px; } //右の固定幅 #wrapper3 .right { float: right; width: 100px; } //真ん中の可変幅 #wrapper3 .center { overflow: hidden; width: auto; }

html

//普通はこうしたいところだけど <div id="wrapper3"> <div class="left">固定幅要素1</div> <div class="center">可変幅要素</div> <div class="right">固定幅要素2</div> </div> //overflowは後ろに書く <div id="wrapper3"> <div class="left">固定幅要素1</div> <div class="right">固定幅要素2</div> <div class="center">可変幅要素</div> </div>

参考までにamazonの検索バーはこの方法で検索ワード入力欄を可変にして実装しています。

まとめ!!

固定幅の要素に挟まれた可変幅の要素を配置するには、floatとoverflowを使おう!!

Pocket

コメント

コメントを残す