戻る タグ（tag）

ホームページの記述に使用される HTML (Hyper Text Markup Language) 文書は、タグによってブラウザでの表示を制御します。
タグはブラウザの表示を制御する 「命令」 といってもいいでしょう。

タグは "<" と ">" で囲まれていて、 <タグ … > 〜 </タグ> という形式で使用されます。

<タグ … > と </タグ> に挟まれた、"〜" の部分がタグの有効範囲です。 <タグ> で始まる書式制御は、 一般的には </タグ> で終了します。

<BR> のように、 書式制御の終了を表す </BR> がないものや、 <P>、 <TR>、 <TD> などのように </タグ> が省略できるものもあります。

"…" は属性で、これによって更にきめの細かい設定ができます。 タグによって、何種類もの属性が設定できるものもあれば、属性のないタグもあります。

えんどう豆の煮込みだよ
暖かいのや冷たいの
お鍋にあるから召し上がれ
でもいたんでいるかもしれないよ *1

という文章を４行で左右の 「中心」 に表示させたいときは、例えば

<CENTER>
　　　えんどう豆の煮込みだよ<BR> 暖かいのや冷たいの<BR>
　　　お鍋にあるから召し上がれ<BR> でもいたんでいるかもしれないよ
</CENTER>

と書きます。
<CENTER> は、</CENTER> が現れるまで、すべての文書を中心揃えで表示するタグで、 <BR> は改行のタグです。
HTML 文書上での改行や字下げはブラウザでの表示にほとんど影響を与えません。

えんどう豆の煮込みだよ
暖かいのや冷たいの
お鍋にあるから召し上がれ
でもいたんでいるかもしれないよ

というふうに表示され、タグ自身は表示されません。

タグの例：

<A> <B> <BODY> <BR> <CENTER> <FONT> <HEAD> <HTML> <I> <IMG> <META> <P> <TABLE> <TD> <TITLE> <TR>

このページは、タグを系統的に説明するものではありません。 "ちひろ" のホームページ、 クラリネット で使用しているタグについてのみ説明しています。


<A … > 〜 </A> Anchorハイパーリンク 戻る
　href = "URI" <A> と </A> の間の文字等 (画像でも良い) にリンクが設定されます。 "〜" の部分をマウスでクリックすると、URI (Uniform Resource Identifier) で指定されたページが表示されます。
　name = "LABEL" name 属性を使用して HTML 文書に LABEL を付けておくと、 ページ内の任意の位置にリンクを設定することができます。
このページでは、上の 「タグの例：」 のリンクをクリックすると、同じページ内で、 その項目について説明されている部分が表示されます。 ここでも name 属性が使用されています。
<B> 〜 </B> Bold文書を太字で表示します。 戻る
  <B> と </B> の間の文字は太く表示されます。
<BODY … > 〜 </BODY> BodyHTML 文書の本文を表します。 戻る
  HTML 文書はヘッダ <HEAD> と 本文 <BODY> からなっています。 BODY タグには、以下に示すもの以外にも、様々な属性を設定することができます。
　background = "URI" 背景に壁紙を表示します。使用する画像ファイル名を URI に指定します。
　bgcolor = "#RGB" 背景の色を指定します。 色は R,G,B 3色を、それぞれ２桁の 16進数で表します。
"#FF0000" は赤、"#00FF00" は緑、"#0000FF" は青、 "#FFFFFF" は白、"#CCCCCC" は灰色になります。
　text = "#RGB" 文字の色を指定します。色の指定法は bgcolor と同じです。
"#000000" は黒、"#000099" は紺になります。
　link = "#RGB" リンクの色を指定します。色の指定法は bgcolor と同じです。
　vlink = "#RGB" 訪問済みのリンクの色を指定します。色の指定法は bgcolor と同じです。
<BR> Line Break改行 戻る
  HTML 文書では、改行コードや空白文字は一般的には殆ど無視されます。
例えばワープロなどで、
Pease porridge hot
Pease porridge cold
Pease porridge in the pot
Nine days old.
と改行して入力したものも、ブラウザでは
Pease porridge hot Pease porridge cold Pease porridge in the pot Nine days old.
と表示されます。
HTML では、<BR> タグなどを使って、 明示的に改行を指示しなければなりません。
Pease porridge hot <BR>
Pease porridge cold <BR>
Pease porridge in the pot <BR>
Nine days old. <BR>
<CENTER> 〜 </CENTER> Center文字や画像を中心揃えで表示します。 戻る
  <CENTER> と </CENTER> の間の文字や画像は、画面の左右中心揃えで表示されます。
<FONT … > 〜 </FONT> Font文字の大きさや色を指定します。 戻る
　size = n
　size = ±n 		<FONT> と </FONT> の間の文字の大きさを指定します。
文字サイズは 1〜7 の数字で直接指定する方法と、 現在のサイズより大きく、あるいは小さくする程度を数字で指定する方法があります。
　color = "#RGB" <FONT> と </FONT> の間の文字の色を指定します。色の指定の方法は <BODY> の bgcolor 等と同じです。
<HEAD> 〜 </HEAD> HeadHTML 文書のヘッダ部を記述します。 戻る
  HTML 文書はヘッダ <HEAD> と 本文 <BODY> からなっています。 ヘッダの中には、 <TITLE>、 <META> 等のタグによって HTML 文書の情報を記述します。
<HTML> 〜 </HTML> HyperText Markup Language 文書が HTML で記述されていることを宣言します。 戻る
  HTML 文書はヘッダ <HEAD> と 本文 <BODY> からなっています。 ヘッダの中には、 <TITLE>、 <META> 等のタグによって HTML 文書の情報を記述します。
<I> 〜 </I> Italic文書をイタリック（斜体）で表示します。 戻る
  <I> と </I> の間の文字はイタリック（斜体）で表示されます。
<IMG … > Image画像を表示します。 戻る
　src = "URI" URI (Uniform Resource Identifier) で指定された画像ファイルが表示されます。
　height = n　 or 　height = n％ 画像の高さをピクセル数、または原画像との比率 (％) で指定します。
　width = n　 or 　width = n％ 画像の幅をピクセル数、または原画像との比率 (％) で指定します。
　alt = "TEXT" 本来はテキスト表示専用のブラウザで、 画像の代わりに説明を表示するためのものでしたが、 画像が表示できるブラウザでも、画像が表示されるまでの間はここに記入した文章が表示されます。
32×24 ピクセル GIF 画像例 また、右の花の画像にマウスカーソルをあわせると、alt 属性に記述した文章 「32×24 ピクセル GIF 画像例」 が表示されます。
　border = n 画像の周囲の枠線の幅をピクセル数で指定します。 画像を枠線で囲んで強調したい場合は、1 以上の値を指定します。
「ピクセル」 のページへ 画像にリンクを設定したときにも枠が表示されます（右図）。border = 0 にすると表示されなくなります
<META … > Associated Meta - information文書の付随情報。 戻る
  <META> は、 <HEAD> の中で使用されます。
"ちひろ" のホームページでは、 できるだけ文書が正しく表示されるように、シフトJIS漢字コードを使用して書かれていることを <META> タグで定義しています。
<meta http-equiv = "content-type" content = "text/html; charset = Shift_JIS">
<P … > 〜 </P> Paragraph段落を表します。 戻る
  HTML 文書の段落は、 <P> と </P> で表します。ブラウザでは前後に空白行が挿入されて表示されます。
</P> が省略される場合もあります。
　align = "left" or "center" or "right" 段落内のすべての文書の表示位置を指定します。
<TABLE … > 〜 </TABLE> Table文書を表の形式で表示します。 戻る
  表は、例えば

<TABLE border>
　　<TR align="center"> <TD>タグ</TD> <TD>意味</TD></TR>
　　<TR> <TD><TABLE></TD> <TD>表</TD></TR>
　　<TR> <TD><TR></TD> <TD>表の行</TD></TR>
　　<TR> <TD><TD></TD> <TD>表のセル</TD></TR>
</TABLE>

と記述すると、

タグ意味
<TABLE>表
<TR>表の行
<TD>表のセル

というように、表の形で表示されます。

本来はこのような表を作るためのタグですが、ページのレイアウトにも重宝ですのでよく利用されています。
このページも、<TABLE> タグを使ってレイアウトしています。
<TABLE> には、border 以外にも、たくさんの属性が設定できます。
　border = n　 or 　border 表の境界線の幅を指定します。border オプションのない TABLE は、境界線が表示されません。
<TD … > 〜 </TD> Table Data Cells表のセルを作ります。 戻る
  表のデータセルを作ります。 <TD> には、セル内の文書の表示位置の指定や背景色、背景画像の指定など、 さまざまな属性が記述できます。
</TD> は省略することができます。
<TITLE> 〜 </TITLE> TitleHTML 文書の表題を表します。 戻る
  <HEAD> の中で使用される、文書の表題を表すタグです。
ここで指定したタイトルはブラウザの画面には表示されませんが、 ウィンドウのタイトルとして表示されたり、ブックマークやお気に入りで表示されたり、 表題をつける設定で印刷するときに使用されたりします。
<TR … > 〜 </TR> Table Row表の行を定義します。 戻る
  表の行を作ります。 <TR> にも、表の行単位で文書の表示位置の指定や背景色、背景画像の指定など、 さまざまな属性が記述できます。
</TR> も省略することができます。

Pease porridge in the pot
Nine days old.


情報処理概論 に戻る  用語解説 に戻る  HTML に戻る  戻る 

*1 原典はマザーグースのようです。 RFC1866 (Hypertext Markup Language - 2.0) で引用されていましたので、 同じように <BR> のところで引用し、 テキトーに訳したものです。

2004.04.24  ueyama@infonet.co.jp