Next: 4. WWWサーバによる情報公開 Up: 3. WWWサーバによる情報公開 Previous: 3.2 情報公開

3.3 タグの機能 -- HTML

現在，HTMLで使用できるタグは多数あるが，ここでは基本的なタグ(表 →)の機能を紹介する．それ以外のタグについては市販のマニュアルなどを参照してほしい．

機能	紹介されているタグ	ページ
ページ全体を設定する	`<HTML>`， `<HEAD>`， `<BODY>`， `<TITLE>`	→
文章をレイアウトする	`<H>`， `<BR>`， `<P>`， `<CENTER>`， `<PRE>`， `<HR>`	→
箇条書きをする	`<UL>`， `<OL>`， `<DL>`	→
フォントを変更する	`<FONT>`， `<B>`， `<I>`， `<U>`， `<TT>`，	→
リンクを指定する	`<A>`	→
画像ファイルを貼りつける	`<IMG>`	→
表組みを行う	`<TABLE>`， `<TR>`， `<TD>`， `<TH>`	→

まったく同じタグを使って作成されたページでも，ブラウザにより表示が若干異なる場合がある．これは，ブラウザごとにタグの解釈が微妙に異なることが原因で生じる．また，特定のブラウザでしか解釈できないタグも存在するため，表示するページのレイアウトが崩れるといったことも起こり得る．タグを使用する際は見る側のブラウザを考慮してページを作成することが望ましい．

3.3.1 タグの書式

HTMLでは < と > の間に書かれた文字がタグとして扱われる．基本的にタグは開始タグ(<TA GNAME>)と終了タグ(</TAGNAME>) の2つが対になっている．

<TAGNAME>
タグの設定対象となる部分
</TAGNAME>

ただし例外として，対になっていないタグ(<BR>タグ，<P>タグ，<HR>タグなど)もある．また，タグでは大文字と小文字は区別されない．例えば，<title>，<Title>，<TITLE>はすべて同じ意味に解釈される．

属性

属性を指定できるタグもある．属性とはそのタグの効果を細かく指定するものであり，開始タグの中で指定する．属性には値を持つものと持たないものがあり，値を指定するものは次のように記述する．なお，1つのタグの中に複数の属性を指定できる．

<TAGNAME 属性="値">
タグの設定対象となる部分
</TAGNAME>

色の指定

ページの背景や文字の色を変更するには，16進数で表現されたR (赤)，G (緑)， B (青)の3色の濃淡の組合せにより指定する．例えば，``#FF0000''は，それぞれの色の濃淡がFF (赤)，00 (緑)，00 (青)であり，これは``純粋な赤''を意味する．なお，最初に#をつけるのを忘れないようにすること．16進数による色指定の詳細については→を参照すること．

#RRGGBB

3.3.2 ページ全体を設定するタグ

ページを作成するには，文章を書く前にまずページ全体の設定を行う<HTML>，<HEAD>，<TIT LE>，<BODY>などのタグを書き込む．これらのタグは，ページのタイトルを設定したり，ページの本文とそれ以外の部分(ヘッダ)を区別する役割がある．

<HTML>
<HEAD>
ヘッダ(←<TITLE>タグはこの部分に記述する．)
</HEAD>
<BODY>
本文
</BODY>
</HTML>

ページ全体を設定する `<HTML>`タグ

HTML形式のファイルであることを明示するために，ファイルの最初と最後を <HTML>タグと</HTML>タグで囲む．

ページのヘッダを設定する `<HEAD>`タグ

<HEAD>タグと</HEAD>タグで囲まれた部分をヘッダと呼び，ページのタイトルやそのページの構成情報など本文に記述しない情報を記述する．ヘッダに記述した情報はページには表示されない．

ページのタイトルを設定する `<TITLE>`タグ

<TITLE>タグと</TITLE>タグで囲まれた部分にはページのタイトルを記述する．このタグはヘッダの中に書かなければならない．このタイトルは，ブラウザのウィンドウ枠のタイトル部分に表示されたり，ブックマークリスト(→)の登録名となるので，そのページの内容を端的に表すものにすること．

<TITLE>ページのタイトル</TITLE>

ページの本文を設定する `<BODY>`タグ

<BODY>タグと</BODY>タグで囲まれた部分にはページの本文を記述する．<BODY>タグの属性を指定すると，ページの背景や本文全体の文字の色などを変更できる．色の指定方法は→を参照すること．

BGCOLOR属性
ページの背景色を指定する属性である．

<BODY BGCOLOR="#RRGGBB">

TEXT属性，LINK属性，VLINK属性，ALINK属性
本文全体の文字の色を指定する属性である．それぞれの属性がどの部分の色を指定するための属性であるかを表→に示す．

<BODYTEXT="#RRGGBB"LINK="#RRGGBB"VLINK="#RRGGBB"ALINK="#RRGGBB">
本文
</BODY>

属性名	色が変化する文字
`TEXT`	通常の文字
`LINK`	まだ入手したことのない情報へのリンクが設定されている文字
`VLINK`	すでに入手したことのある情報へのリンクが設定されている文字
`ALINK`	リンクが設定されている文字をクリックしたときの文字

BACKGROUND属性
ページの背景に画像ファイルを貼りつけることができる．貼りつける画像ファイルの場所をURL (→)で指定する．画像ファイルが，それを貼りつけるページと同じディレクトリに保存されている場合は，画像ファイル名だけを記述すればよい．

<BODY BACKGROUND="画像ファイルのURL">
本文
</BODY>

3.3.3 文章をレイアウトするタグ

ここでは文章のレイアウトに関するタグの機能を説明する．これらのタグを使用すると，自由な位置で改行や改段落をしたり，区切り線を入れられる．

見出し `<H>`タグ

文章の見出しを表示するためのタグである．このタグで囲った部分は文字が大きく表示され，さらに前後が改行される．サイズは6段階(最大1から最小6の数値) で指定する．しかし，日本語の場合，ブラウザによっては3段階にしか変化しない場合もある．

<H数値>見出し</H数値>

図: `<H>`タグのサンプル

改行 `<BR>`タグ

ページに書き込んだ文章はブラウザのウィンドウの右端で自動的に改行されるが，<BR>タグを使うと強制的に改行できる．

文1<BR>文2

図: `<BR>`タグのサンプル

改段落 `<P>`タグ

<P>タグを使うと改段落できる．

文1<P>文2

図: `<P>`タグのサンプル

中央寄せ `<CENTER>`タグ

このタグで囲まれた部分を中央寄せ(センタリング)して表示する．

<CENTER>中寄せする文章や画像など</CENTER>

図: `<CENTER>`タグのサンプル

整形済みテキスト `<PRE>`タグ

すでに整形されている文章をそのまま表示する場合は<PRE>タグで囲む．

<PRE>整形されたテキスト</PRE>

図: `<PRE>`タグのサンプル

区切り線の表示 `<HR>`タグ

<hr>タグを使うと，ページの中に区切り線を入れられる．

<HR>

SIZE属性，WIDTH属性
SIZE属性で区切り線の縦幅を，WIDTH属性で横幅を変更できる． SIZE属性はピクセル(→)で，WIDTH属性はピクセルまたはブラウザのウィンドウの横幅に対する割合(``%表示'')で指定する．
```
<HR SIZE="縦幅" WIDTH="横幅">
```
ALIGN属性
ALIGN属性では，区切り線の位置を指定できる．指定する値はRIGHT， LEFT，CENTERの3つである．
```
<HR ALIGN="位置">
```

図: `<HR>`タグのサンプル

3.3.4 箇条書きをするタグ

HTMLには，記号による箇条書き，番号による箇条書き，及び説明付き箇条書，という3種類の箇条書きが用意されている．

記号による箇条書き `<UL>`タグ

記号の箇条書きを行うためのタグであり，L^ATEXにおけるitemize環境と同じである．<UL>と</UL>が\begin{itemize}と\end{itemize}にあたり，<LI>が\itemにあたる．

<UL>
<LI> 項目1
<LI> 項目2
</UL>

TYPE属性
TYPE属性を指定すると，文章の先頭につける記号を変更できる．この属性は<UL>タグでも<LI>タグでも指定できる．指定できる種類は，SQUARE，CIRCLE，DISKの3種類である．指定しない場合はCIRCLEを指定した場合と同じ表示がされる．

<UL TYPE="記号の種類">
<LI> 項目1
<LI TYPE="記号の種類"> 項目2
</UL>

図: `<UL>`タグのサンプル

番号による箇条書き `<OL>`タグ

<OL>タグを使うと，L^ATEXのenumerate環境と同様に番号による箇条書きを行える．

<OL>
<LI> 項目1
<LI> 項目2
</OL>

TYPE属性
<OL>タグや<LI>タグでは，各項目に振られる番号の種類をTYPE属性で指定できる．TYPE属性の種類を表→に示す．指定するとそれ以降の項目すべてに有効となる．

<OL TYPE="番号の種類"> 
<LI TYPE="番号の種類">
</OL>

指定できる値		効果	(出力例)
1		何も指定しない場合と同じ	(1, 2, 3, 4, ...)
A	(大文字)	大文字のアルファベット	(A, B, C, D, ...)
a	(小文字)	小文字のアルファベット	(a, b, c, d, ...)
I	(大文字)	大文字のローマ数字	(I, II, III, IV, ...)
i	(小文字)	小文字のローマ数字	(i, ii, iii, iv, ...)

START属性
項目に振られる番号の最初の値を変更できる．TYPE属性をアルファベットなどに設定している場合でもSTART属性で指定する値は数字に限られるので注意すること．

<OL START="最初の番号(数字)">
<LI>
</OL>

図: `<OL>`タグのサンプル

説明付き箇条書き `<DL>`タグ

<DL>タグを使うと，各項目に説明が付いた箇条書きを行える．項目は<DT>タグの後に，項目の説明は<DD>タグの後に記述する．

<DL>
<DT>項目1
<DD>項目1の説明
<DT>項目2
<DD>項目2の説明
</DL>

図: `<DL>`タグのサンプル

3.3.5 フォントを変更するタグ

ここでは，文字のフォントを変更するためのタグの機能を説明する．これらのタグを使えば，文字の色やサイズを変更したり，形を変えるなどさまざまな効果を指定できる．

フォントの色やサイズの変更 `<FONT>`タグ

<FONT>タグで色やサイズなどのフォント属性を変更できる．

<FONT>フォントを変更する文章</FONT>

SIZE属性
フォントのサイズを最小1から最大7までの数値で指定する．何も指定していない場合のサイズは3である．

<FONT SIZE="数値">サイズを変更する文章</FONT>

COLOR属性
フォントの色をRGBの16進数で指定する．色の指定方法は →を参照すること．

<FONT COLOR="#RRGGBB">色を変更する文章</FONT>

図: `<FONT>`タグのサンプル

フォントスタイルの変更 `<B>`，`<I>`，`<U>`，`<TT>`タグ

<B>，<I>，<U>，<TT>タグで囲まれた部分は，フォントのスタイルが変更される．日本語のフォントには効果がないものもあるので注意すること．表→にそれぞれのタグの効果を示す．

タグ	フォントスタイル
`<B>`	ボールド(太字)
`<I>`	イタリック(斜体)
`<U>`	アンダーライン(下線)
`<TT>`	タイプライタ(等幅)

<B>太字にする文章</B>
<I>斜体にする文章</I>
<U>下線を引く文章</U>
<TT>等幅にする文章</TT>

図: フォントスタイル変更タグのサンプル

特殊文字

HTMLで特殊な意味を持つ文字(<，>，&，")は，そのままではファイルに記述してもブラウザに表示できない．ページ内でこれらの文字を記述するときは，表 →のような特別な書き方をする．

特殊文字	HTMLでの表記
`<`	`<`
`>`	`>`
`&`	`&`
`"`	`"`

図: 特殊文字タグのサンプル

3.3.6 リンクを指定するタグ

ここでは，WWWの最大の特徴である，他の情報へのリンクを記述するためのタグの機能を説明する．

他の情報へのリンク `<A>`タグ

文章や画像などを<A>タグと</A>タグで囲むことで，それらの情報に他の情報へのリンクを設定できる．HREF属性にはリンクの設定先の情報のURLを指定する．リンクの設定先の情報は，画像などページ以外の情報でもよい．

<A HREF="リンク先の情報のURL">リンクを設定する文章や画像など</A>

3.3.7 画像ファイルを貼りつけるタグ

HTMLではGIF やJPEG 形式などの画像ファイルをページに貼りつけられる．また，ただ貼りつけるだけではなく，位置の指定や文章の回り込みの指定なども行える．

画像の貼りつけ `<IMG>`タグ

画像の貼りつけには<IMG>タグを使用する．SRC属性には貼りつける画像ファイルの場所をURLで指定する．

<IMG SRC="画像ファイルのURL">

WIDTH属性，HEIGHT属性
WIDTH属性で画像の横幅，HEIGHT属性で縦幅を指定する．表示の際に画像が指定したサイズに変更される．両属性とも，ピクセル (→)，ブラウザのウィンドウのサイズに対する割合(``% 表示'')のどちらでも指定できる．

<IMG SRC="画像ファイルのURL" WIDTH="横幅" HEIGHT="縦幅">

ALIGN属性
ALIGN属性で画像と文章の並び方を指定する．表示された画像は文章の中で1つの文字として扱われ，後に続く文章はこの属性で指定した位置(上，中，下)に表示される．指定できる位置は，TOP，MIDDLE，BOTTOMの3種類あり，何も指定しないとBOTTOMとして扱われる．

<IMG SRC="画像ファイルのURL" ALIGN="位置">

ALIGN属性
画像の横に複数行の文章を配置する場合にもALIGN属性を指定する． ALIGNにLEFTを指定すると画像が左に表示され，続く文章が右側に表示される．RIGHTを指定すると画像は右に表示される．

<IMG SRC="画像ファイルのURL" ALIGN="文章に対する位置">

図: `<IMG>`タグのサンプル

3.3.8 表組みを行うタグ

HTMLでは次のタグを<TABLE>タグと</TABLE>タグの間で使うことで表組みを作成する．

<TR>タグ
行を区切るタグ．
<TD>タグ
列を区切るタグ．
<TH>タグ
基本的には<TD>タグと同じだが，このタグで囲まれた部分は表の中の見出しになる．

-- 表の作り方 --

表を作成する手順を次に示す．

1.: <TABLE>タグと</TABLE>タグで囲む．
2.: <TR>タグで行を区切る．
3.: <TD>タグや<TH>タグで列を区切る．

<TABLE>
<TR><TH>見出し1</TH><TH>見出し2</TH></TR>
<TR><TD>項目1</TD><TD>項目2</TD></TR>
</TABLE>

`<TABLE>`タグで指定する属性

BORDER属性
BORDER属性では，テーブルの外枠の線の太さを数値で指定する．

<TABLE BORDER="数値">
</TABLE>

WIDTH属性，HEIGHT属性
表全体のサイズを指定する属性である．サイズの値はピクセル (→)またはブラウザのウィンドウサイズに対する割合(``%表示'')で指定する．

<TABLE WIDTH="横幅" HEIGHT="縦幅">
</TABLE>

`<TR>`，`<TD>`タグで指定する属性

ROWSPAN属性，COLSPAN属性
<TD>タグ，<TR>タグともに，縦と横にまたがったセルを作成できる．縦方向に長いセルを作るにはROWSPAN属性を，横方向に長いセルを作るにはCOLSPAN属性を指定する．両属性ともいくつのセルにまたがった長さにするかを数値で指定する．この2つの属性を組み合わせることで複雑な表組みを行える．

<TD ROWSPAN="縦方向の長さ" COLSPAN="横方向の長さ">
<TR ROWSPAN="縦方向の長さ" COLSPAN="横方向の長さ">

図: `<TABLE>`タグのサンプル