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

ブロック要素

これまでご説明してきましたいわゆる「要素」は、html、head、body、meta、titleを除くと（つまりbody要素内で使うものに限定すると）

  1. h1～h6（見出し）
  2. p（段落）
  3. dl+dt,dd（定義リスト）
  4. ul+li（順不同リスト）
  5. ol+li（序列リスト）
  6. hr（罫線）
  7. address（問い合わせ先情報）

ですね。これらの要素は「１つの領域（ブロック、まとまり、固まり）を示す」ものであり、ブロック要素と呼びます。

インライン要素

ブロック要素に対し、（ブロック要素内の）特定の部分に何らかの役割や機能を持たせる要素があります。それらをインライン要素と呼びます。「インライン（行内）」なのですから、ブロック要素の外側に書くことはできませんので注意が必要です。

言い換えますと、原則としてbody要素直下にブロック要素を置くことはできますが、インライン要素を置くことはできない、ということです。（もちろん、body要素直下にポツンとただテキストを書く、というのもルール違反になります。）インライン要素はすべてブロック要素の中に含まれる訳ですね。（ブロック要素が他のブロック要素を含むケースというのはあります）

よくある図で表現しますと、下のようになります。

インライン要素のご紹介

それでは、インライン要素を具体的に紹介します。

強調 em

ブロック要素内の特定の部分を強調したい場合にマークアップします。用いるタグは<em>～</em>です。

<p>ここは重要ですので、<em>試験に出ます</em>よ。</p>

より強い強調 strong

em要素以上に強調したい場合のマークアップに使用します。使用タグは<strong>～</strong>です。

<p>ここは非常に重要ですので、<strong>必ず試験に出ますよ！</strong></p>

アンカー a

HTML文書にとって最重要、と言っても過言ではないインライン要素です。アンカーは本来「錨」という意味ですが、HTMLでは「文書と文書をつなぐ」機能を提供するものです。この要素があるからこそHTML文書たり得ます。HyperTextのことを「高度なテキスト文書」と説明しましたが、どこが高度なのかと言いますと「ハイパーリンク付きテキスト」だからです。リンクをたどれば次々と関連した別の文書にジャンプできる、これこそHTML文書たる所以ですね。

他の文書をリンク先として示す（いわゆる"リンクする"）

他の文書をリンク先として示したい（他の文書へリンクしたい）時のマークアップ方法ですが、

<a href="リンク先文書のURL">～</a>

となります。マークアップ例を示しましょう。定義リストを使った、リンク集風の文書です。

<dl>
<dt><a href="http://pasokon-yugi.cool.ne.jp/">パソコン遊戯</a></dt>
<dd>パソコンを使いこなすことによって、パソコンを大好きになり楽しくなれることを目指すウェブサイト</dd>
</dl>

文書の特定部分へのリンク

ある文書の特定の部分（起点）から、同じ文書または他の文書の特定の部分（終点）へリンクさせたい時、終点となる部分にまず名前を付けます。名前を付けるには、id属性を使います。

<h2 id="COMPUTER">コンピュータとは？</h2>

上の例では、ある文書（aru.htmlということにしましょう）の「コンピュータとは？」という見出しにid属性で「COMPUTER」という名前を付けたことになります。

この見出しへ、同じ文書（aru.html）の別の部分からリンクしたい場合は、別の部分（起点）の方に下記の様にマークアップします。

<p>これにつきましては、<a href="#COMPUTER">コンピュータとは？</a>で述べましたとおり・・・</p>

また、別の文書からaru.htmlの「コンピュータとは？」という見出しにリンクしたい時は、別の文書の起点にしたい部分に下記のようにマークアップします。（aru.htmlと同ディレクトリにあるファイルからリンクする場合）

<p>これにつきましては前ページの<a href="aru.html#COMPUTER">コンピュータとは？</a>で述べましたとおり・・・</p>

（注）
id属性を使うにあたり、１つのページ内で同じ名前を２回以上使うことはできません。ある場所に「COMPUTER」と名前を付けたら、他の場所の名前には「COMPUTER」は使えません。他の名前を付けてあげてください。
また id 属性に使う文字列にはアルファベットの大文字を使用し小文字は使用しないほうがよい、という考え方が定説になりつつあります。（参考…HTMLにおけるid属性問題について、今更ながら - 徒書）

画像を埋め込む img

画像を埋め込む要素です。このimg要素というのはHTMLの要素としてはちょっと異色と言えるかもしれません。「文章をマークアップする」というのとは少し違います。ブロック要素である罫線（hr）もそうですけどね。（すなわちimg要素も空要素です。よって終了タグを省略しなければなりません。）

ブロック要素内の、画像を埋め込みたい場所にマークアップします。もちろんインライン要素ですので、body要素直下に書くことはできません。

マークアップ方法は以下のとおり。

<img src="画像ファイルのURL" width="画像の幅" height="画像の高さ" alt="画像の代わりに表示させたい文字列">

widthとheightはそれぞれピクセルで指定します。画像の幅や高さはプロパティを見るとわかります。

例を示しましょう。定義リスト内に画像を埋め込み、画像にアンカーをマークアップしてみます。

<dl>
<dt><a href="http://pasokon-yugi.cool.ne.jp/"><img src="image/sn-noriya.gif" width="88" height="31" alt="パソコン遊戯"></a></dt>
<dd>パソコンを使いこなすことによって、パソコンを大好きになり楽しくなれることを目指すウェブサイト</dd>
</dl>

かなりリンク集っぽくなりましたね。

URLについて

ここで、img要素やa要素を示す時に記述する「URL（Uniform Resource Locator）」について少し説明を加えます。

  1. http://pasokon-yugi.cool.ne.jp/image/sn-noriya.gif
  2. image/sn-noriya.gif

あるファイルから見て、１も２も実は同じ画像ファイルのURLを表しています。が、表記の仕方が少し違いますよね。

１の表記方法を「絶対URL」、２の表記方法を「相対URL」と言います。

２つの違いはと言いますと、

絶対URL
インターネット全体から見た住所
相対URL
特定のファイルから見た住所

ということになります。「絶対URL」はすぐわかると思いますが、問題は「相対URL」の方でしょうね。

当サイトのサーバー内は下のようになっています。

上の「自ファイル」から見て、sn-noriya.gifまでの相対URLが、

image/sn-noriya.gif

になります。"../"は「１つ上のディレクトリ（フォルダ）」という意味です。よって、../image/sn-noriya.gifは、

（自ファイルから見て）１つ上のディレクトリ（この場合は基準ディレクトリ）内にあるimageディレクトリの中のsn-noriya.gifというファイル

という意味になります。

相対URLに関しては、"./"が「自ファイルがあるディレクトリ」、"../"が「１つ上位のディレクトリ」を示す、ということさえわかれば、理解できると思います。応用すると、"../../"は「２つ上のディレクトリ」という意味になります。

絶対URLと相対URLの使い分け

リンクする場合、すべて絶対URLを指定しておけばもちろんリンクとして問題なく機能します。しかしながら、自サイト内の他の文書へリンクする場合は通常相対URLを指定します。

自サイト内リンクに相対URLを指定するメリット

  1. サーバーにファイルをアップロードしなくても、自分のパソコン内でリンクの確認をすることができます。
  2. もしサーバーを移転した場合でも、文書内のURL部分を書きかえる必要がありません。

Information