さぁ!検索しよう!

CSSによる要素を横並びにするいくつかの方法です。

display:inline-block

1つ目は、display:inline-blockを使った方法です。

display:inline-blockを指定すると、ブロック要素でありながらインライン要素のように横に並べることや、vertical-alignを指定し、高さの異なる要素がある場合も垂直方向に揃えることが可能です。
加えて、ブロック要素のように上下左右のmarginpaddingを指定することや、横幅・高さを指定することができます。
また、親要素にtext-alignプロパティを指定することで、水平方向に要素を寄せることができます。

使いどころ

display:inline-blockは主に、ナビゲーションやページネーション、タグクラウド等で使われています。

display:table-cell

2つ目は、display:table-cellを使った方法です。

親要素にdisplay:table;を指定し、子要素にdisplay:table-cell;を指定することで、要素をtableのように表現することができます。
なので高さが一定となる他、更に子要素にvertical-align:middle;を指定すると、文字を縦中央に配置することができます。上下のマージンは効きません。

また、一方の要素に横幅を指定し、それ以外の要素を指定なしにすることで、固定と可変が合わさったグリッドを作成することができます。

float

3つ目はfloatを使った方法です。

floatプロパティは、要素を横並びにさせる代表的な方法であり、右寄せ左寄せができることからカラム配置に使われることが多いです。
またレスポンシブWebデザインで、MediaQueryによるレイアウト変更する際にfloat:none;を指定することで、2カラムレイアウトから1カラムレイアウトへの変更が容易となります。

※レスポンシブWebデザインに関する記事はこちらをご覧ください。

position

4つ目はpositionによる横並びです。

positionプロパティは値にrelativeを指定すると要素を相対配置absolute絶対配置fixed固定配置することができます。
座標を指定するにはtop,right,bottom,leftプロパティを併せて用います。

また、要素を配置する際、z-indexプロパティを併せて用いると、要素の階層を指定することができます。  
z-indexプロパティは、positionプロパティが指定されている兄弟要素にのみ適用され、値には-2147483647~2147483647の範囲で指定することができます。この値は、大きくするほど階層が上になります。

position:relative;

要素にrelativeを指定すると、HTMLで定義している位置を基準に配置されます。相対配置された要素は親要素からは独立しないため、それまで要素がいた空間(空いた空間)は維持されるので、レイアウトが崩れる心配はありません。

position:absolute;

要素にabsoluteを指定すると、positionプロパティのstatic以外の値が指定されている直近の祖先要素あればそれを、指定されている要素がなければbody要素を基準に配置されます。
絶対配置された要素は親要素から独立するため、後続の要素絶対配置された要素がいた空間を無視して積めて配置されます。

position:fixed;

要素にfixedを指定すると、top,right,bottom,leftプロパティを指定しなければ、直近の祖先要素を基準に配置されます。
top,right,bottom,leftプロパティを指定すれば、positionプロパティのstatic以外の値が指定されていようが、ウィンドウを基準に配置されます。また、ウィンドウをスクロールしても配置された場所から動くことはなく、固定されたままとなります。
固定配置された要素は絶対配置された場合と同様、親要素から独立するため、後続の要素絶対配置された要素がいた空間を無視して積めて配置されます。

display:flex

display:flexはIE9以下では非対応となっていますが、これまで紹介した方法の中で、最も柔軟且つ簡単に様々なレイアウトを実現することができます。
主な使い方は、親要素にdisplay:flex;を指定後、子要素に横幅を指定するだけです。更に、子要素にオプションを指定することで、並べる方向(左→右,右←左)や寄せ方、配置方法(等間隔等)等を定義することができます。

display:flexについては、以下の記事が大変参考になりました。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

これからのCSSレイアウトはFlexboxで決まり!


以上で、CSSによる要素を横並びにするいくつかの方法を終わります。