横並びにするためのCSS一覧（float,table,inline,inline-blockなどの違い、メリット・デメリット）

ウェブサイトのメニューで横並びにする時に使用するCSSのプロパティいつも何を使われていますか？

floatがあったりinlineがあったり、最近だとdisplay:tableが主流になっていたりします。
ではどれを使うのが一番最適なのか？そしてどれを使えば何が指定できるのかなどをまとめました。

横並びにさせるときのCSSプロパティ一覧

まずは各タグを実際に使って横並びを表現しました。
わかりやすいようにliにはborderも指定しています。

.ex_float li,.ex_inline li,.ex_inline-block li,.ex_table li{

	width:20%;

	border:1px solid #000;

}

floatの場合

使用しているタグ

.ex_float li{

	float:left;

}

.ex_float:before,.ex_float:after{

	display:block;

	content:" ";

	clear:both;

}

回り込み1
回り込み2
回り込み3

inlineの場合

使用しているタグ

.ex_inline li{

	display:inline;

}

回り込み1
回り込み2
回り込み3

inline-blockの場合

使用しているタグ

.ex_inline-block li{

	display:inline-block;

}

回り込み1
回り込み2
回り込み3

display:tableの場合

使用しているタグ

.ex_table{

	display:table;

}

.ex_table li{

	display:table-cell;

}

回り込み1
回り込み2
回り込み3

同じ回り込みでwidth：20%にしていてもこれだけ違ってきます。
例えばそれぞれの要素でpaddingは効きますが、marginはdisplay:table-cellが使用されたliには効きません。

floatを使う場合のメリット・デメリット

回り込み要素として長らく愛され続けてきたfloat。

floatで回りこまれた要素にはmarginもpaddingもtext-alignも使えて便利です。

ただし上下の要素に必ずclear:bothをかけておかないと意図しない部分で回りこまれてしまいます。

その為親要素には下記のようにbeforeとafterのセレクトでclear:bothかけておくと便利です。

デメリットとしてはvertical-alignが使えないというところでしょうか。

.ex_float li{

	float:left;

}

.ex_float:before,.ex_float:after{

	display:block;

	content:" ";

	clear:both;

}

inlineとinline-blockの違いは？

擬似的に要素をインライン要素にするinline。しかしインライン要素にするとwidthやtext-alignが効きません。

代わりにinline-blockであればインライン要素でなおかつブロック要素に使えるプロパティも使用することができます。
inlineはwidth,height,text-alignが使えずinline-blockはこれらが使える。inlineのデメリットをなくしたプロパティがinline-blockと思えばOK。

inline-blockのデメリットもfloatと同じでvertical-alignが使えないところです。

スマートフォンサイトでも活躍！display:tableでtable要素が使える！

スマートフォンサイトの場合、解像度がスマートフォンによって異なるためwidthでの幅を%で指定する必要があります。

また左右の配置だけではなく上下の配置も指定したいところ。

上下の配置はvertical-alignで使用しますが上の3つのプロパティだとこれが使えません。代わりにdisplay:tableを親要素に、子要素にdisplay:table-cellを使えばvertical-alignが使用できます。

またtable-layoutでfixed(均等)なども指定でき均等割付が簡単です。

それでは最後に各プロパティを指定した場合に使える・使えない要素を一覧でみてみましょう。

プロパティ	margin	padding	height,width	text-align	vertical-align
float	○	○	○	○	×
inline	○	○	×	×	×
inline-block	○	○	○	○	×
table,table-cell	×	○	○	○	○

PhotoShopで作ったWEBデザインを正確に表現できるプロパティを探している時にでも参考にしていただければ幸いです。と。

あわせて読みたいお勧め記事

Fatal error

/home/japanese2017/start-now.link/public_html/100/wp-content/themes/basetheme/single.php