ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト 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

<a> <b> <button> <br> <em> <font> <img>
<i> <iframe> <input> <strong> <span>
<small> <select> <textarea> <u>

入れ子の例

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

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

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

間違いの例

<form method="post" action="bbs.cgi">
<font size="4">名前</font>
</form>

正しい例

<form method="post" action="bbs.cgi">
<p>名前</p>
</form>

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

インライン要素の中にブロック要素は記述できません。<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

Copyright (C) 2003-2012 ホームページマスター All rights reserved.