タグと改行の関係

タグと改行の関係について説明したページです。タグには改行されるものとされないものがあります。本ページでは各タグが改行されるかされないかで種類分けし、インラインボックスとブロックボックスの違いについて補足しています。

改行されるタグ

 タグには種類分けがあります。まずは改行されるタグを以下に示します。

<h1>、<h2>、<h3>等
 見出しを示します。内容を示す前に使われます。
<p>
 段落を示します。
<div>
 意味を持っていないボックス定義のため、タグで独自定義やクラス等の指定のために使われます。
<pre>
 改行等が記述した通りに表示されます。
<ul>、<ol>、<li>
 リストを番号付き、又は無しで羅列します。
<dl>、 <dt>、<dd>
 用語を定義し、その説明を記述します。
<table>
 表を示します。

 改行されるタグでは次の記述は下に配置されますが、floatで回り込みを利用する事で左右に配置する事が可能です。

改行されないタグ

 改行されないタグを以下に示します。

<a>
 リンクを示します。
<img>
 画像を示します。
<strong>、<em>
 強調を示します。<strong>がより強い強調になります。
<span>
 意味を持っていないボックス定義のため、タグで独自定義やクラス等の指定のために使われます。

 改行されないタグでは次の記述が右に配置されます。このため、テキストの途中でも改行される事なく使えます。

補足:インラインボックス、ブロックボックス

 改行されるタグで囲まれた箇所をブロックボックス、改行されないタグで囲まれた箇所をインラインボックスと言います。

 html記述は、ブロックボックスの中にブロックボックスやインラインボックスを配置していくイメージとも言えます。

タグと改行の関係

 インラインボックスでは図の幅や文字数分しか横幅が確保されませんが、ブロックボックスでは確保出来る幅一杯まで確保します。上の例ではmainの部分はcenterと同じ幅をデフォルトで確保しますが、imgやspan部分は図の幅や文字数文だけ確保します。

 この表示形式を変えるにはスタイルシートでdisplayを使います。

img {display: block;}

 図は本来インラインボックスとして扱われますが、上記を指定する事でブロックボックスとして扱われます。「画像の挿入」の「図のセンタリング」ではインラインボックスのままセンタリングする方法とブロックボックスにしてセンタリングする方法の2つを説明していますので、違いを見比べて下さい。

 逆にブロックボックスとして扱われるタグをインラインボックスとして扱うためにはスタイルシートで以下のようにします。

p {display: inline;}

 通常、以下のようにhtmlでpタグを使うと2行に表示されますが、上記により1行で表示されます。

<p>1行目</p><p>2行目</p>

1行目

2行目

 上記ではimgやpタグに対して定義していますが、タグの使い勝手にも影響するため、通常はスタイルシートでクラスに定義し、必要に応じてhtmlでクラス指定します。

p.block {display:block;}

<p class="block">pをインラインボックスに変更</p>

  • このエントリーをはてなブックマークに追加