ブロックとインラインの説明
タグには大きく分けて初期状態でブロック要素とインライン要素のものがあります。違いは、ブロックには範囲があり、それに対してインラインは名前の通り直線的というか文の一部分、という感じです。
ブロックは範囲なので高さなどがありますがインラインにはありません、直線的です。ですからページ全体のレイアウトをしていく場合は、基本的にブロック要素のタグに色々スタイルを付けて並べていくことになります。
タグに直接スタイルが指定できるのはとても大きな利点です。いままではまずテーブルで枠を作る必要がありました。しかしCSSでは例えばh1タグという見出しそのものを枠付きにすることもできます。h1はブロック要素なので、枠や、線のスタイルを指定出来るからです。
CSSデザインの場合、HTML内で使うタグの種類はあまり多くありません。次の一覧のものでほぼ間に合います。デザインそのもののタグがないことに注目。 つまり情報を文章としてわかりやすく構造化するタグがほとんどということですね。
なおインライン要素のタグは、間にブロック要素のタグを入れることができません。ブロック要素のタグも、ブロック要素のタグを含むことのできるものとできないものがあります。
よく使われるブロック要素タグ |
|
<hx>～</hx> |
見出しのタグです。数字の小さいものほど重要、あるいは上位レベルの見出しです。 含むことができるのはインライン要素のみ。 |
<p>～</p> |
段落を表すタグ。文章で一番多く使うかと思います。 含むことができるのはインライン要素のみ。 |
<ul>～</ul> |
箇条書きのタグ。数字順のときは<ol>～</ol> 含むことができるのは構成要素の<li>～</li>のみ。liにはブロック要素も、インライン要素も含むことができます。 |
<dl>～</dl> |
定義リストのタグ。 含むことができるのは構成要素のdt、ddのみ。ddはブロック要素も、インライン要素も含むことができます。 |
<blockquote>～</blockquote> |
引用文のタグ。 基本的にブロック要素も、インライン要素も含むことができます。一部例外有り。 |
<address>～</address> |
そのページに関する問い合わせ先のタグ。著作権等もいっしょに記述したりします。 基本的にインライン要素と<p>～</p>を含むことができます。一部例外有り。 |
<div>～</div> |
任意の範囲、グループのタグ。CSSデザインではこれを使用してレイアウトするのが一般的です。ただしあくまでも範囲であり、四角ではないことに注意。使い方によっては四角以外に変形します。 ブロック要素も、インライン要素も含むことができます。 |
よく使われるインライン要素タグ |
|
<a>～</a> |
リンクのタグ。 |
<img /> |
画像のタグ。XHTMLの場合/で閉める必要があります。 |
<br /> |
改行のタグ。XHTMLの場合/で閉める必要があります。 |
<span>～</span> |
任意の範囲のタグ。あくまでもラインとしての範囲です。 |
<strong>～</strong> |
強い強調。太字になります。 |
<em>～</em> |
強調。文字が斜体になります。 |