
初心者の為のホームページ作成支援サイト powerd by Google
HOME>ブロック要素とインライン要素

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

body要素内で使用するHTMLのタグ要素は概ねブロック要素とインライン要素に分けられます。 body直下に文字やインライン要素を記述することはできません。また、ソースにタグを記述する時に前者と後者の使い分けが必要になってきます。

■ブロック要素

ブロック要素とはテーブルタグやリストタグのように一つの文書のまとまりで前後に改行が入る要素です。
以下は普段よく使用するブロック要素の一覧です。
ブロック要素の中に入れることができる要素は次のようなパターンがあります。

ブロック要素一覧（HTML4.01）
ブロック要素だけを入れることができる。	<form> <noframes>
インライン要素、文字だけを入れることができる。	<h1>～<h6> <p> <pre>
ブロック要素、インライン要素、文字を入れることができる。	<center> <div>
特定の要素（<tr><td><li>等）だけを入れることができる。	<table> <ol> <ul>
空要素	<hr>

■インライン要素

インライン要素とは<font>や<em>のタグのように行内の文字を装飾したり論理的な意味をなす要素です。
インライン要素の中に入れることのできる要素はインライン要素や文字だけです。但し<button>や<iframe>等のタグはブロック要素も入れることができます。以下は普段よく使用するインライン要素の一覧です。

HTML4.01 Transitional

入れ子の例

入れ子（nesting）とはある要素の中に別の要素を入れることです。上の項目で述べたことを踏まえて各要素の入れ子関係について説明します。分かり易いようにインライン要素だけ青色で表示します。

◆ブロック要素の中にブロック要素だけを入れる

フォームタグ直下にはブロック要素しか記述できません。

間違いの例

正しい例

◆ブロック要素の中にインライン要素、文字だけを入れる

インライン要素の中にブロック要素は記述できません。<h1>と<a>のタグが逆になってしまっています。

間違いの例

<a href="index.html"><h1>TOPページへ</h1></a>

正しい例

<h1><a href="index.html">TOPページへ</a></h1>

◆ブロック要素の中にブロック要素、インライン要素、文字を入れる。

<p>タグはブロック要素ですがブロック要素である<center>やテーブルタグを入れることはできません。特に<p>タグの中にテーブルタグの記述は初心者の方が間違えやすく文法違反になってしまうので注意が必要です。また、<p>～</p>内に<p>～</p>を入れることもできません。
間違いの例

<p>
<table border="1">
<tr>
<td>
<font color="blue"><center>中央に青色</center></font>
</td>
</tr>
</table>
</p>

正しい例

<center>
<table border="1">
<tr>
<td>
<p><font color="blue">中央に青色</font></p>
</td>
</tr>
</table>
</center>

div要素の入れ子

初心者の方がdiv要素内にdiv要素を入れ子として多用している場合がありますが見出しや段落にはdiv要素は使用しないようにしましょう。 div（division:区切り）を多用してしまうと開始の<div>が<body>内のどの行まで適用されているのか分かりづらくなります。 <p>（paragraph:段落）や<h1>（heading:見出し）などのタグと違い、div要素自体に見出しや段落などの意味は持ちません。

好ましくない例

<div style="font-size:20px;">ホームページの作り方</div>
<div>1.メモ帳を起動</div>
<div>2.HTMLタグを打ち込む</div>
<div>3.ファイル名を付けてブラウザで表示</div>
<div class="space1">ホームページの公開</div>

正しい例

<h4">ホームページの作り方</h4>・・・1番目の見出し
<p>1.メモ帳を起動</p>
<p>2.HTMLタグを打ち込む</p>
<p>3.ファイル名を付けてブラウザで表示</p>
<h4 class="space1">ホームページの公開</h4>・・・2番目の見出し

上のようにミニタイトルは見出し用のタグ、段落は段落用のタグというようにそれぞれの役割を持ったタグを使うよう心がけましょう。

HTMLタグ一覧

HOME