displayプロパティの使い方まとめ

CSSで使用する「displayプロパティ」について、おさらいをかねてまとめてみました。

display: inline;
display: block;
display: inline-block;

displayプロパティ

displayプロパティは、要素の「表示形式」を指定するプロパティになります。
ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。構造的にはブロックレベル要素だけど、インライン要素として表示させたいときなどに指定します。（その逆も）

ブロックレベル要素とかインライン要素とかってなに？

ブロックレベル要素

文章の骨組みとなる要素で、見出し要素など「h1,h2,h3,h4,h5,h6,p,ul,ol,li,div,table」などがあります。要素の前後に改行が入り、ブロックが積み重なるような表示の仕方をします。

【特徴】

縦に要素が並んで表示される
幅(width)と高さ(height)が指定できる
上下左右にmarginが指定できる
上下左右にpaddingが指定できる
text-alignは、要素の中身に適応される
vertical-alignは指定できない

インライン要素

ブロックレベル要素の中身として利用される要素で、「a,span,strong」などがあります。
テキストの一部として扱われるので、要素の前後には改行が入らず、横に続けて表示されます。

【特徴】

横に続けて表示される
幅(width)高さ(height)は指定できない。幅や高さに関しては、文字列の長さや文字の大きさなど、内容物のサイズのみ。
左右だけmarginを指定できる
左右にpaddingを指定できる
text-alignを親ブロックに付けることができる
vertical-alignを指定できる

ブロックレベル要素をdisplay:inlineにするとどうなる？

最もポピュラーな使い方は、フッターのナビゲーションのように、リストを横並びにし、かつ画面中央揃えにしたとき。

<ul>
	<li><a href="#">TOP</a></li>
	<li><a href="#">NEWS</a></li>
	<li><a href="#">SERVICE</a></li>
	<li><a href="#">SHOP</a></li>
	<li><a href="#">COMPANY</a></li>
</ul>

<ul>

<li><a href="#">SERVICE</a></li>

<li><a href="#">COMPANY</a></li>

</ul>

liはブロックレベル要素なので、そのままだと縦に並んでしまいます。liをfloatさせたところで、中央揃えにするには、ulの幅を固定してmargin: 0 auto;にしなければなりません。しかし、今回のようにリストがテキストである場合などは横幅を決めにくくなってきます。文字数や文字サイズを変更すれば横幅も変わってきてしまいます。そこで、display:inlineを指定します。liに対してdisplay: inline;を、ulに対してtext-align: center;を指定します。

ul {text-align: center;} <!-- 中身をセンター揃えにする -->
li {display: inline;} <!-- インライン表示 -->

1 2	ul {text-align: center;} <!-- 中身をセンター揃えにする --> li {display: inline;} <!-- インライン表示 -->

そうすると、こんな風になります。

インライン要素をdisplay: block;にするとどうなる？

今度は、先程と同じナビゲーションリストを縦並びにしたい場合のパターンになります。

li要素で縦並びにすれば表示上は問題ありませんが、テキスト以外の部分がリンクエリアにならず、テキストの範囲内のみリンクが適用されてしまいます。これでは、ちょっと不便なのでli要素の範囲全体をリンクエリアにしたい場合はブロック要素にします。そこで、インライン要素であるa要素に対してdisplay:block;を指定します。

a {display: block;} <!-- a要素をブロック要素にする -->

1	a {display: block;} <!-- a要素をブロック要素にする -->

そうすると下のようになります。

display: inline-blockのメリット

最後にdisplay:inline-block;についてですが、これはインライン要素のように表示され、かつブロック要素のように幅と高さ、marginとpaddingが指定できるものです。これは、img要素の特徴に似ています。

【特徴】

横に続けて表示される
幅(width)と高さ(height)が指定できる
上下左右にmarginが指定できる
上下左右にpaddingが指定できる
text-alignを親ブロック要素に適応できる
vertical-alignが指定できる

ページネーションのように、項目を横に並べ、かつボタンのように幅や高さをもたせて表示することができるようになります。

<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

<ul>

</ul>

ul {text-align: center;} <!-- 中身をセンター揃えにする -->
li {display: inline-block;} <!-- インライン表示 -->
a {
	displya: block;	<!-- a要素をブロックレベルにする -->
	width: 50px;	<!-- a要素の幅を固定する -->
}

ul {text-align: center;}

li {display: inline-block;}

a {

displya: block;

width: 50px;

}

ここで、vertical-alignを追加指定してみると、下のようになります。
（「2」と「4」だけサイズを変えてみる）

<ul>
	<li><a href="#">1</a></li>
	<li class="sample"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li class="sample"><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

<ul>

</ul>

sul {text-align: center;} <!-- 中身をセンター揃えにする -->
li {
	display: inline-block;	<!-- li要素をインライン表示にする -->
	vertical-align: bottom;	<!-- li要素を下揃えにする -->
}
li.sample a {line-height: 5em;}	<!-- calssを付けたli要素だけ高さを大きくする -->
a {
	displya: block;		<!-- a要素をブロックレベルにする -->
	width: 50px;		<!-- a要素の幅を固定する -->
}

sul {text-align: center;}

li {

display: inline-block;

vertical-align: bottom;

}

li.sample a {line-height: 5em;}

a {

displya: block;

width: 50px;

}

display: inline-blockでの注意点

display: inline-blockを利用する際に注意しなければならないことがあります。
display: inline-blockは、IE7以下の古いブラウザでは、aやspanなど、インライン要素に対してのみ対応しています。手間ではありますが、IE7以下でも問題なく表示されるように以下のように記述します。

li {
	display: inline-block;
	*display: inline;		<!-- IE用のハック -->
	zoom: 1;				<!-- IE用の hasLayout を true にするための記述 -->
}

li {

display: inline-block;

*display: inline;

zoom: 1;

}

以上になります。