インライン要素・ブロックレベル要素とCSS「display」の使い方

divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。

CSSでレイアウト装飾するためには上記の違いを理解している必要があります。ここでは、インライン要素・ブロックレベル要素の説明と要素のブロックレベル・インラインの表示形式を変更する際に利用するCSS「display」をについて説明していきます。

よくul、liなどのリストを利用してメニューバーを作っているのを見かけます。リストってふつう縦並びになると思うんですがどうやったら横並びになるんでしょうか？？

リストはもともとブロックレベル要素ですが、displayを利用してインライン要素などに切り替えて横並びにすることができます。
ここでは、インライン要素とブロッックレベル要素の特性とdisplayプロパティの使い方を説明していきますね。

【メルマガ登録はこちら！！】
HTML・CSS・お役立ち情報をGET

1 ブロックレベル要素とインライン要素
2 表示に関するスタイル display
3 displayプロパティを利用したサンプル
- 3.1 ブロックレベルのli要素をinline-block指定して横並びにして幅を指定
- 3.2 display:blockでa要素に幅や高さ・余白を指定する
4 補足 li要素の隙間をなくす
5 まとめ

ブロックレベル要素とインライン要素

<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。

h1タグやdivタグなどは、ブロックレベル要素で改行がつき縦に並ぶのに対して、aタグなどのインライン要素は要素同士で改行がつかず横に並ぶ性質を持っています。

(※注)ブロックレベル要素とインライン要素での分類方法ですが、HTML5からは新たに「カテゴリー」という新たな分類方法でより細かくジャンル分けされるようになりました。しかし簡略のためここではこれまでのブロックレベルとインラインでの分類で説明していきます。

代表的なブロックレベル要素とインライン要素

項目	主な要素	特徴
ブロックレベル要素	div h1〜h6 p ul,ol,li dl,dt,dd table form hr pre blockquote	要素の前後に改行が入り、ブロック要素同士縦に並ぶ横幅や高さを指定できる余白(margin,padding)が指定できる
インライン要素	a span b img(※) label input(※) select(※) textarea(※)	要素の前後に改行が入らず、インライン要素同士横に並ぶ横幅や高さを指定できない(※1) ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2) (※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。 (※2)余白について厳密にいうと外部余白marginについては上下は効きません(左右は効きます) 内部余白paddingについては上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

項目

主な要素

特徴

ブロックレベル要素

div
h1〜h6
p
ul,ol,li
dl,dt,dd
table
form
hr
pre
blockquote

要素の前後に改行が入り、ブロック要素同士縦に並ぶ
横幅や高さを指定できる
余白(margin,padding)が指定できる

インライン要素

a
span
b
img(※)
label
input(※)
select(※)
textarea(※)

要素の前後に改行が入らず、インライン要素同士横に並ぶ
横幅や高さを指定できない(※1)
ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。
(※2)余白について厳密にいうと外部余白marginについては上下は効きません(左右は効きます)
内部余白paddingについては上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

ブロックレベル要素について

ブロックレベル要素の特徴

ブロックレベル要素は各要素が一つのブロックで、以下のような特徴があります。

ブロックレベル要素の特徴

要素の前後に改行が入り、ブロック要素同士縦に並ぶ
横幅や高さを指定できる
余白(margin,padding)が指定できる

代表的なブロックレベル要素

div
h1〜h6
p
ul,ol,li
dl,dt,dd
table
form
hr
pre
blockquote

■ブロックレベル要素 divタグを使った例

[divタグ]ブロック要素は改行が入ります。

[divタグ3]高さと幅も指定できます。

[div4]余白の設定もできます。

インライン要素について

インライン要素の特徴

インライン要素は要素が横並びになり高さや幅を設定できません。以下のような特徴があります。

インライン要素の特徴

要素の前後に改行が入らず、インライン要素同士横に並ぶ
横幅や高さを指定できない(※1)
ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

代表的なインライン要素

a
span
b
img(※)
label
input(※)
select(※)
textarea(※)

■インライン要素 aタグを使った例
[aタグ1]aタグはインライン要素です。[aタグ2]インライン要素は改行が入りません。[aタグ3]幅や高さの指定はできません。

補足1 インライン要素で一部例外の要素

imgタグ、textareaタグ、inputタグ、selectタグなどの一部のインライン要素は改行がつかず横並びになりますが、高さや幅・余白を設定することができるという性質を持っています。

補足2 インライン要素の余白について

インライン要素での余白設定については、性質が少し複雑で下記のような特徴があります。

インライン要素の余白

marginの上下は効かない（左右は効く）
paddingの上下左右効くが、他の要素の領域を考慮せず重なる

■■例. aタグで余白(pading,margin)を設定する
■何もしていない状態

■余白を設定した状態

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>こんにちは</title>
    <style media="screen">
    </style>
  </head>
  <body>
    <p style="margin:0;background:pink">pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。</p>
    <a style="background:rgba(150,150,255,.5);margin:50px;">aタグ1です。aタグ1です。</a><a style="background:rgba(150,150,255,.5);padding:100px;">aタグ2です。aタグ2です。</a>
    <p style="margin:0;background:pink">pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。</p>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>こんにちは</title>

</style>

</head>

<body>

<p style="margin:0;background:pink">pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。</p>

<p style="margin:0;background:pink">pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。</p>

</body>

</html>

上記のようにインライン要素は外部余白marginは左右が効いていますが、上下は効いていません。

またpaddingで内側の余白を設定する事ができますが、他の要素の領域と重なってしまいます。

イメージ的には、ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当すると考えるとわかりやすいかもしれません。(箱やコンテナは高さや幅、余白が設定できるが、中身はぐちゃぐちゃになりやすく高さ幅余白が正しく指定できない)。

ブロックレベル要素とインライン要素のイメージ

表示に関するスタイル display

レイアウトを調整していく中で、インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てきたときにCSSで「display」を利用できます。

displayプロパティには主に以下のような設定があります。(他にも設定値はありますがここでは割愛します。)

項目	意味	備考
display:inline	指定した要素をインライン要素にする	改行なくなり横並びにできる。幅・高さ・上下余白を指定できない
display:block	指定した要素をブロックレベル要素にする	改行ができて縦並びになる。幅・高さ・余白を指定できる
display:inline-block	指定した要素をインラインとブロックレベルの中間の性質にする	インライン要素のように改行がつかず横並びになるが、ブロックレベル要素のように幅・高さ・余白を指定できる
display:none	指定した要素を非表示にする
(補足) display:table-cell	テーブルtableタグのtd要素のようにする
(補足) display:flex	最新のレイアウト技法「フレキシブルボックス」。柔軟な横並び・均等な高さを実現できる。	まだWebブラウザの対応状況に注意が必要

displayプロパティを利用したサンプル

ここでは、CSSのdisplayプロパティを利用したいくつかのサンプルをご紹介します。

ブロックレベルのli要素をinline-block指定して横並びにして幅を指定

■li要素に何もしていない(ブロックレベル)の状態縦に並んでいる

■li要素にdisplay:inline-blockを設定した状態横並びになる

■上記のソースコード

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>はじめてのCSS</title>
		 <style media="screen">
		 .menu a{
			 text-decoration: none;
			 color: #000;
		 }
		 .menu li{
			 width: 150px;
			 text-align: center;
			 background: skyblue;
			 display: inline-block;
		 }
		 </style>
	</head>
	<body>
		<h2>li要素を横並びにする</h2>
		<ul class="menu">
			<li><a href="#">ホーム</a></li>
			<li><a href="#">サービス</a></li>
			<li><a href="#">会社情報</a></li>
			<li><a href="#">お客様の声</a></li>
			<li><a href="#">お問い合わせ</a></li>
		</ul>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSS</title>

.menu a{

text-decoration: none;

color: #000;

}

.menu li{

width: 150px;

text-align: center;

background: skyblue;

display: inline-block;

}

</style>

</head>

<body>

<h2>li要素を横並びにする</h2>

<li><a href="#">お客様の声</a></li>

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

</ul>

</body>

</html>

(※注)ここでliに対してdisplay:inlineにすると幅や高さを設定できなくなるためご注意ください。

display:blockでa要素に幅や高さ・余白を指定する

aタグはもともとインライン要素のため高さ幅を設定できません。そこで下記例ではaタグに対してdisplay:blockを設定して高さ幅をもたせて青色の部分を押したらリンクが押せるようにしています。

■上記のソースコード

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>はじめてのCSS</title>
		 <style media="screen">
		 .menu a{
			 text-decoration: none;
			 color: #000;
       display: block;
		 }
		 .menu li{
			 width: 150px;
			 text-align: center;
			 background: skyblue;
			 display: inline-block;
		 }
		 </style>
	</head>
	<body>
		<h2>li要素を横並びにする</h2>
		<ul class="menu">
			<li><a href="#">ホーム</a></li>
			<li><a href="#">サービス</a></li>
			<li><a href="#">会社情報</a></li>
			<li><a href="#">お客様の声</a></li>
			<li><a href="#">お問い合わせ</a></li>
		</ul>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSS</title>

.menu a{

text-decoration: none;

color: #000;

display: block;

}

.menu li{

width: 150px;

text-align: center;

background: skyblue;

display: inline-block;

}

</style>

</head>

<body>

<h2>li要素を横並びにする</h2>

<li><a href="#">お客様の声</a></li>

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

</ul>

</body>

</html>

補足 li要素の隙間をなくす

li要素をインラインブロックに変えたことによりli要素間で隙間ができています。

これを下記のように隙間をなくす方法をご紹介します。

なんで隙間ができているんですか？？

原因はli要素をインライン要素にしたことで改行した際にul要素のフォントサイズ分半角スペース分の空白ができていることに起因します。(※)インライン要素では改行が一つ以上続くと半角スペース扱いになります。

下記のようにli要素を詰めて記載すると隙間は無くなります。

しかし、上記は視認性が悪くなるため、ここでは例えばul要素のフォントサイズを0にli要素のフォントサイズを16px(通常の値)などに設定して隙間をなくすことができます。

■上記のソースコード

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>はじめてのCSS</title>
		 <style media="screen">
		 .menu a{
			 text-decoration: none;
			 color: #000;
		 }
		 .menu li{
			 width: 150px;
			 text-align: center;
			 background: skyblue;
			 display: inline-block;
			 font-size: 16px;
		 }
		 .menu{
			 font-size: 0px;
		 }
		 </style>
	</head>
	<body>
		<h2>li要素を横並びにする</h2>
		<ul class="menu">
			<li><a href="#">ホーム</a></li>
			<li><a href="#">サービス</a></li>
			<li><a href="#">会社情報</a></li>
			<li><a href="#">お客様の声</a></li>
			<li><a href="#">お問い合わせ</a></li>
		</ul>
	</body>
</html>