display: inline-block を使って要素を横並びにする

公開日：2014年9月4日
最終更新日：2014年9月11日

CSSのプロパティ「display: inline-block」は要素を横並びにできる上、幅や高さを指定できる非常に便利な設定です。floatを使わなくても項目を横並びにできるため、メニューやナビゲーションで利用すると効果的です。

display: inline-block はインライン要素とブロック要素を合体させたようなものです。
インライン要素の特徴からは、要素が横に並びvertical-alignの指定が可能となります。
ブロック要素の特徴からは、要素に対してwidth/height/margin/padding/borderを指定できます。

なおIE7以下では、display: inline-block はインライン要素にだけ対応していますので注意しましょう。

ブロック要素とインライン要素のおさらい

ここで、ブロック要素(ブロックレベル要素ともいう)と、インライン要素についておさらいをしておきましょう。

ブロック要素は、見出しや本文など文書を構成する基本要素です。

それに対してインライン要素は、行内に含まれる特定の部分に書式を設定したり何らかの機能を持たせる要素です。

ブロック要素とインライン要素の違い

ブロック要素は親要素の幅全体に広がって配置されるため改行を伴い縦に並びますが、インライン要素は改行を伴わず横に並んでいきます。
ブロック要素は幅(width)と高さ(height)の指定ができますが、インライン要素は指定できません。
ブロック要素は上下左右のmargin/padding/borderを指定できます。それに対してインライン要素は左右は指定できますが、上下は指定しても効果がなかったり前後の行に重なったりします。
ブロック要素にvertical-alignは指定できませんが、インライン要素には指定できます。

配置ルール

ブロック要素の中には、他のブロック要素やインライン要素を配置することができます。
インライン要素の中には、他のインライン要素は配置できますが、ブロック要素を配置することはできません。

センタリング方法

ブロック要素を横方向にセンタリングするには「text-align: center;」を指定します。
インライン要素をセンタリングするには、親要素に「text-align: center;」を指定します。

主なブロック要素とインライン要素

【ブロック要素】
ddress,div,form,ul,ol,li,dt,dl,h1～h6,table,p

【インライン要素】
a,br,cite,em,i,span,strong

なお、インライン要素の中で高さと幅を指定できる要素を「置換要素」呼び、以下のものが存在します。
img,input,object,select,button,textarea

display: inline-block の使用例

以下は、ul/li要素によるメニューの例です。

ホーム
製品紹介
会社概要
お問い合わせ

ここではli要素をインラインブロックにして、幅/高さ/ボーダー/マージンを指定しています。
親要素のulには「text-align: center;」を指定し、li要素のテキストを左右中央揃えにしています。
テキストを上下中央揃えにするには、line-heightで行の高さと要素の高さを同じにしています。

HTMLとCSSのコードは以下になります。

<ul class="tips-inline-block">
	<li>ホーム</li>
	<li>製品紹介</li>
	<li>会社概要</li>
	<li>お問い合わせ</li>
</ul>

<li>お問い合わせ</li>

</ul>

.tips-inline-block {
	text-align: center;
}
.tips-inline-block li {
	display: inline-block;
	width: 120px;
	height: 40px;
	margin: 0 3px;
	border: 1px solid #555;
	background-color: #c93;
	line-height: 40px;
}

.tips-inline-block {

text-align: center;

}

.tips-inline-block li {

display: inline-block;

width: 120px;

height: 40px;

margin: 0 3px;

border: 1px solid #555;

background-color: #c93;

line-height: 40px;

}

次にメニューらしく、アンカーリンクを入れてみましょう。
a要素をブロック要素にして幅を指定します。

ホーム
製品紹介
会社概要
お問い合わせ

HTMLとCSSのコードは以下になります。

<ul class="tips-inline-block">
	<li><a href="#">ホーム</a></li>
	<li><a href="#">製品紹介</a></li>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">お問い合わせ</a></li>
</ul>

<li><a href="#">お問い合わせ</a></li>

</ul>

.tips-inline-block li a {
	display: block;
	width: 100%;
}

.tips-inline-block li a {

display: block;

width: 100%;

}

【補足】
IE7以下では、インライン要素にだけ対応しています。
これをブロック要素でも動作させるには、以下のようにします。

li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

li {

display: inline-block;

*display: inline;

*zoom: 1;

}

特集記事

WordPress の基礎から応用まで

Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
jQuery Mobile を基本から覚える

スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。