12. 要素を横並びにする float・display:inline-block;

目次

floatで要素を横並びにする

まず、下の例では正方形の箱3つはすべてdiv(ブロック要素)で書かれているので、縦に並びます。


これを横並びにするには、floatプロパティを使います。左から順に並べたいなら、横並びにしたい要素全てに値をleft、右からならrightを指定します。


反対に、rightを指定すると右から並んでくれます。


このように、floatを指定した要素は、親要素のスペースを埋めるように左右の一方から順に並んでいきます。

(注)floatした際の注意点

floatとは「浮く」という意味の単語で、文字通りパソコンの画面上から外れてプカプカ浮いているような扱いになります。そのため、子要素がすべてfloatしていると、親要素の高さは0になってしまいます(子要素の高さが0になるわけではありません)。

上の画像では、floatさせたbox3つの親要素としてdiv(id=”back”)を作り、背景をグレーに指定しています。
ブラウザで表示すると・・・

div要素(ブロック要素)の幅はwidthを指定しなければ横いっぱいに広がるので、3つの箱の横からグレーの背景が出てくるはずなのに、そうなっていません。これは、子要素がすべてfloatしているため、親要素div(id=”back”)の高さが0になっているからです。

これを解決するには、div(id=”box3″)の下に空タグを作り、それにclearプロパティを指定すればOKです。

clearプロパティの値はleft・right・bothを指定でき、leftはfloat:left;、rightはfloat:right;、bothはfloat:leftとfloat:right;の両方を解除する値です。

ブラウザでは、ちゃんとグレーの背景が出てきているのが分かります。

↓また、空タグでなくても、下に他の要素があれば、それに対してclearを指定すれば親要素の高さが元に戻り、背景が表示されます。



display:inline-block;で要素を横並びに

floatだけでなく、display:inline-block;でインラインブロック要素にすることで要素を横並びにすることもできます。


ただし、この方法では要素の間に微妙な余白ができてしまいます。
この余白をなくすにはいくつか方法がありますが、一番分かりやすいのは、HTMLで要素を改行しないで1行で書くことでしょう。多少見栄えは悪くなりますが、この方法だとclearを指定しなくていいという利点があります。