ブロック要素とインライン要素の違いをとことん解説

HTMLとCSSを学習していく中で、ブロックレベル要素インライン要素の違いを理解することは必須です!

HTMLで使われる<p>、<a>、<div>などのタグは、大きく分けるとブロックレベル要素とインライン要素というものに分けられます。
(HTML5からはブロックレベル要素とインライン要素という概念がなくなりましたが、一般的にはまだまだ使われています。HTMLとCSSを理解する上でも、かつてのブロックレベル要素とインライン要素の概念を学習することは必要になると思うので解説します。ちなみにHTML5になってからは、ブロック要素のことを「フロー・コンテンツ」、インライン要素のことを「フレージング・コンテンツ」なんて呼んだりします。)

さて、今回はわかりそうで微妙にわかりずらいブロックレベル要素とインライン要素の違いを初心者の方向けにとことん解説していきます。

主なブロックレベル要素とインライン要素のタグ

主なタグの一覧
ブロックレベル要素
div p ul
li ol table
header main footer
section form h1~h6
インライン要素
span a strong
b font img
small input br
textarea u b

これらのブロックレベル要素とインライン要素は一例で、これら以外にもまだたくさんあります。

HTMLとCSSによるコーディングでWEBページの見た目を整えていくにあたって、使うタグ全てがブロックレベル要素かインライン要素かを判別できるようにならなければいけません。

こう言われると「うっ。大変なんだな。」と思ってしまうかもしれませんが、そうは言ってもそれほど難しいことではありません。コーディングに慣れてきたら初めて使うタグであっても用途によってブロックレベル要素かインライン要素かわかってしまうようになりますよ。

間違っても受験勉強のように、「divはブロック要素でspanはインライン要素。pはブロック要素でaはインライン要素…」と丸暗記で覚えようとはしないでくださいね(^^;)

後々勉強していた時間がもったいなかったことに気づきますよ。

それではブロックレベル要素とインライン要素は何が違うのか、説明していきます。

ブロックレベル要素

まずブロックレベル要素は、その名の通り、開始タグと終了タグで囲ったものを一つのブロックにするものです。

ブロックにするとはいったいどういうことでしょうか。
まずは下のHTMLを見てみましょう。

HTML↓

<p>こんにちは。私の名前はトムです。</p>
<div style='width:100px; height:100px; background-color:blue;'></div>

表示結果↓

こんにちは。私の名前はトムです。

<p>と<div>はブロックレベル要素です。
ブロックレベル要素で作られたブロックは、要素が必ず横いっぱいに広がって、次の要素がブロックレベル要素の下に位置されるという特徴があります。

ブロック要素の特徴

インライン要素

一方インライン要素はブロックレベル要素のように横いっぱいに広がらず、インラインという名前の通り、要素(行)の途中に差し込むことができます。

要素の途中に差し込むことができるというのがどういうことか、下のHTMLを見てみましょう。

HTML↓

<p>こんにちは。私の名前は<b>トム</b>です。</p>

表示結果↓

こんにちは。私の名前はトムです。

このようにインライン要素(今回では<b>)は一般的に、ブロック要素(今回では<p>)の中に入れて、効果を付け足すような使い方をします。

今回では、ブロック全体の中にある「トム」を強調するために、インライン要素の<b>が使われているイメージです。

インライン要素はブロックレベル要素とは違い横幅いっぱいには広がらないため、インライン要素を並べた際は、縦に並ぶのではなく横に並ぶことになります。

インライン要素の並び方

ブロックレベル要素とインライン要素の並び方

CSSでスタイルを整えていく際に、ブロックレベル要素は縦に並び、インライン要素は横に並ぶということを必ず理解しておかなければいけません。

<li>を使ってよくあるメニューを作りながらブロックレベル要素とインライン要素の並び方の違いをもう少し深くみてみましょう。

下のHTMLを見てください。

<ul>
	<li>メニュー1</li>
	<li>メニュー2</li>
	<li>メニュー3</li>
	<li>メニュー4</li>
</ul>

表示結果↓

  • メニュー1
  • メニュー2
  • メニュー3
  • メニュー4

<ul>と<li>はブロック要素なので、メニューは縦に並んでいることがわかります。

それでは一般的なホームページやブログでよく見る横に並んでいるメニューを作るにはどうすればいいのでしょうか。

ブロックレベル要素とインライン要素を変えられる

その方法は、<li>をCSSでインライン要素に変えてしまうのです。

<head>
	<style type="text/css">
		li{
			display: inline;
			list-style: none;
		}
	</style>
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</head>

表示結果↓

  • メニュー1
  • メニュー2
  • メニュー3
  • メニュー4

displayでブロックレベル要素とインライン要素を変更できる

<li>はブロック要素ではありますが、CSSでdisplay:inline;を与えることによってインライン要素に変更することができるのです。

<li>がインライン要素になったので、横並びになったということになります。
(横並びにしたとき、<li>の・は邪魔なので、list-style:none;で消してます。)

禁止されていること

以上のように、特徴が分かれるブロックレベル要素とインライン要素ですが、禁止されている使い方もあるので、しっかり理解して正しく使いましょう。

インライン要素で禁止されている使い方

インライン要素の中にブロック要素を入れるのはNG

基本的にインライン要素の中にブロック要素を使うことはできません。あくまでもインライン要素は、ブロック要素の中にある要素に追加の効果を与えるというイメージで利用するので、その意味を理解していたらブロック要素をインライン要素の中で使うという書き方にはならないと思います。

この書き方は間違い↓

<span>
	<div>
		<p>こんにちは</p>
	</div>
</span>

インライン要素である<a>でブロックレベル要素を囲うことでブロック全体にリンクをつけるなど、一部例外的な使い方ができることもあります。ある程度ブロックレベル要素とインライン要素の理解が深まったら調べてみましょう。

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

インライン要素にwidthやheightは指定できない

基本的に、インライン要素ではwidthやheightで大きさを指定することはできません。
(img、input、textareaなどの一部例外はあります。)

↓↓これはNGです。display:inline;でインライン要素にしている<li>にwidthを指定しているので、6行目のwidth:10%;は機能しません。

<head>
	<style type="text/css">
		li{
			display: inline;
			list-style: none;
			width: 10%;
		}
	</style>
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</head>

しかし要素を横並びにした上で、widthやheightで大きさも指定したいという時もあると思います。

そんな時はinline-blockを使いましょう。

<head>
	<style type="text/css">
		li{
			display: inline-block;
			list-style: none;
			width: 10%;
		}
	</style>
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</head>

表示結果↓

  • メニュー1
  • メニュー2
  • メニュー3
  • メニュー4

inline-blockとは、インライン要素とブロックレベル要素の特徴を組み合わせたものです。

インライン要素のように横並びにすることができるが、ブロック要素のようにwidthやheightを使ってサイズの指定をすることができます。

まとめ

ブロックレベル要素とインライン要素の特徴や使い方を解説してきましたがいかがでしたでしょうか?

冒頭でも書きましたが、決して丸暗記で覚えるのではなく、そのタグの意味を考えたらブロックレベル要素かインライン要素であるかの判別が自然とできるようになるので、タグの意味をしっかり理解できるようになりましょう。

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です