Next: 4. WWWサーバによる情報公開 - 応用編 Up: 3. WWWサーバによる情報公開 - 基礎編 Previous: 3.4 スタイルによるページのデザイン

3.5 タグによるページのレイアウト

3.5.1 レイアウトに関するタグ

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

見出し - `<H>`タグ

文書の見出しを表示するためのタグである．見出しの重要度を6段階(最大1から最小6の数値)で指定する．一般に<H>タグに囲まれた部分の文字は大きく表示され，さらに前後が改行される．

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

<H>タグの表示結果は，WWWブラウザのフォントなどに依存しており，期待した結果を得られるとは限らない．図3.6に<H>タグを用いた例を示す．

図:`<H>`タグのサンプル
<H1>ミックスジュース</H1> <H2>ミックスジュース</H2> <H3>ミックスジュース</H3> <H4>ミックスジュース</H4> <H5>ミックスジュース</H5> <H6>ミックスジュース</H6> →

<H1>ミックスジュース</H1>
<H2>ミックスジュース</H2>
<H3>ミックスジュース</H3>
<H4>ミックスジュース</H4>
<H5>ミックスジュース</H5>
<H6>ミックスジュース</H6>

→

表示結果は，UNIX環境のNetscape4.5におけるものであるが，1から3までと4から6までの見出しの文字の大きさが同じとなっており，期待した結果が得られていない．

改行 - `<BR>`タグ

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

文1<BR>文2

図3.7にBRタグを用いた例を示す．

図: `<BR>`タグのサンプル
改行タグを使うとこのように<BR>改行できます。 →

段落 - `<P>`タグ

<P>タグは段落を表す．WWWブラウザは<P>タグ指定した段落にしたがって改行などをして表示する．

<P>文1</P>
<P>文2</P>

図3.8に<P>タグを用いた例を示す．

図: `<P>`タグのサンプル
<P>改段落したいときは、</P> <P>このタグを使いましょう。</P> →

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

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

<HR>

図3.5.1に<HR>タグを用いた例を示す．

図: `<HR>`タグのサンプル
区切り線を引いてみます。 <HR> ということで線が入りました。 ↓

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

すでに整形されている文章をそのまま表示する場合は<PRE>タグで囲む．文章の改行やインデント，スペースなどがそのまま反映される．

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

図3.10に<PRE>タグを用いた例を示す．

図: `<PRE>`タグのサンプル
\|\|↑ ←原宿　表参道\|\|外苑前　　　　　　　\|\| 　￣￣￣￣￣￣￣￣￣　＿＿＿＿＿＿＿＿＿　　　慶応銀行*\|\|青　　　　　　　 \|\|山　　　　　渋谷 \|\|通　　　　　　↓ \|\|り →


 　　　　　　　||↑
 ←原宿　表参道||外苑前
 　　　　　　　||
 　￣￣￣￣￣￣  ￣￣￣
 　＿＿＿＿＿＿  ＿＿＿
　　　慶応銀行*||青
　　　　　　　 ||山
　　　　　渋谷 ||通
　　　　　　↓ ||り

→

HTML3.2とHTML4.0

HTML4.0では，ページのデザインに関する情報を，スタイルシートを用いて記述することが推奨されている．このため，HTML3.2では利用できたデザインに関するタグや属性(<FONT>タグや<CENTER>タグなど)が，HTML4.0では非推奨となっていることが多い．

3.5.2 文の構造を変更するタグ

ここでは，引用を行った場合の表示やアドレスに関する情報を表示する場合，および文章を強調する場合に用いるタグについて説明する．

引用 - `<BLOCKQUOTE>`タグ

文章などを引用した場合に用いるタグである．<BLOCKQUOTE>と </BLOCKQUOTE>が引用の始まりと終わりを表わす．

図に<BLOCKQUOTE>タグを用いた例を示す．

図: `<BLOCKQUOTE>`タグのサンプル
以下のように始まる。 <BLOCKQUOTE> わが輩は猫である。 </BLOCKQUOTE> 夏目漱石の文章は、 →

アドレス- `<ADDRESS>`タグ

作者の情報や更新情報を表示する場合に用いるタグである． <ADDRESS>と </ADDRESS>が情報の始まりと終わりを表わす．

図に<ADDRESS>タグを用いた例を示す．

図: `<ADDRESS>`タグのサンプル
作者および更新情報 <ADDRESS> Taro Fujisawa, Keio Univ., Mar 10 1999. </ADDRESS> →

強調 - `<STRONG>`タグ

文章を強調する場合に用いるタグである．<STRONG>と </STRONG>が強調の始まりと終わりを表わす．

図に<STRONG>タグを用いた例を示す．

図: `<STRONG>`タグのサンプル
このタグを用いると<BR> <STRONG> strong </STRONG><BR> のようにstrongが強調 →

3.5.3 箇条書をするタグ

HTMLでは，記号による箇条書，番号による箇条書，及び説明付き箇条書，という3種類の箇条書を利用できる．

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

記号の箇条書を行うためのタグである．<UL>と</UL>が，箇条書の始まりと終わりを表し， <LI>が項目を表す

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

図3.5.2に<UL>タグを用いた例を示す．

図: `<UL>`タグのサンプル
以下に概要を示す。 <UL> <LI> はじめに <LI> そして <LI> 最後に </UL> 次に詳細について説明する。 →

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

<OL>タグを使うと，通し番号による箇条書が表現できる．

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

図に<OL>タグを用いた例を示す．

図: `<OL>`タグのサンプル
<OL> <LI>らっこのゆらゆら <LI>ぱんだのういうい </OL> →

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

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

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

図3.5.2に<DL>を用いた例を示す．

図: `<DL>`タグのサンプル
<DL> <DT>サリンジャー <DD>ライ麦畑でつかまえて <DT>サガン <DD>悲しみよこんにちは </DL> →

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

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

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

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

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

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

図3.15に各フォントスタイル変更タグを用いた例を示す．

**図 3.15:**フォントスタイル変更タグのサンプル
NORMAL<BR> <B>BOLD</B><BR> <I>italian?!</I><BR> <U>under the sea</U><BR> <TT>typewriter</TT><BR> →

3.5.5 リンクを指定するタグ

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

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

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

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

また，リンクをクリックするとメールを送るように設定するには，

<A HREF="mailto:メールアドレス">リンクに設定する文章や画像など</A>

とする．

3.5.6 ターゲットを指定するタグ

通常のリンクをたどってあるページを表示させた場合，WWWブラウザ上ではそのページの先頭が表示される．しかし，ページの途中や末尾を表示させたい場合がある．その場合，ターゲットをリンク先にのページに設定する．

<A NAME="ターゲット名"></A>

というタグをリンク先に埋め込み，ターゲットのあるページへのリンクを

<A HREF="リンク先の情報のURI#ターゲット名">リンクに設定する文章や画像など</A>

と記述する．

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

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

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

画像の貼りつけには<IMG>タグを使用する．SRC属性には貼りつける画像ファイルの場所をURIで指定する．ALT属性には画像が表示される前，または画像が表示されないWWWブラウザを使っている場合などに，代わりに表示される文字を指定する．ALT属性がないと，画像が表示されない場合に情報が欠落することになるので，必ず指定すること．

<IMG SRC="画像ファイルのURI" ALT="画像の説明">

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

<IMG SRC="画像ファイルのURI" ALT="画像の説明" WIDTH="横幅" HEIGHT="縦幅">

図3.16に<IMG>タグを用いた例を示す．

図:`<IMG>`タグのサンプル
<P> <IMG SRC="lounge.jpg" WIDTH="200" ALT="カモ池からみたラウンジ"><BR> SFC生には、ラウンジが好きって人もいますよね。学食でもごはんは食べられるけど、いつも休憩はラウンジ派って人、けっこういます。カモ池もすぐそば… </P> <P> <IMG SRC="omicron.jpg" WIDTH="15 ここはオミクロン棟の前です。インテンシブの休憩の時間や、お昼どきになると多くの学生が通ります。敷かれている石と石との間がけっこう空いているので… </P> ↓

<P>
<IMG SRC="lounge.jpg" WIDTH="200" ALT="カモ池からみたラウンジ"><BR>
SFC生には、ラウンジが好きって人もいますよね。学食でもごはんは食べられるけど、いつも
休憩はラウンジ派って人、けっこういます。カモ池もすぐそば…
</P>
<P>
<IMG SRC="omicron.jpg" WIDTH="15
ここはオミクロン棟の前です。インテンシブの休憩の時間や、お昼どきになると多くの学生が
通ります。敷かれている石と石との間がけっこう空いているので…
</P>

↓

3.5.8 表組みを行うタグ

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

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

表の作成

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

1.: <TABLE>タグと</TABLE>タグで囲む．
2.: <CAPTION>タグで表に名前をつける．
3.: <TR>タグで行を区切る．
4.: <TD>タグや<TH>タグで列を区切る．

<TABLE>
<CAPTION>表の名前</CAPTION>
<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属性
表全体のサイズを指定する属性である．サイズの値はピクセルまたはWWWブラウザのウィンドウサイズに対する割合(%)で指定する．

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

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

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

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

図に<TABLE>タグを用いた例を示す．

図: `<TABLE>`タグのサンプル
<TABLE BORDER="10" HEIGHT="150"> <CAPTION>表の練習</CAPTION> <TR><TH>名前</TH><TH>特徴</TH><TH>足の数</TH></TR> <TR><TD>いぬ</TD><TD>よくなつく</TD><TD ROWSPAN="2">4</TD></TR> <TR><TD>うし</TD><TD>大きい</TD></TR> <TR><TD>つる</TD><TD>空を飛べる</TD><TD ROWSPAN="2">3</TD></TR> <TR><TD>ぺんぎん</TD><TD>空は飛べない</TD></TR> <TR><TD>げじげじ</TD><TD>なぞ</TD><TD>なぞ</TD></TR> </TABLE> ↓

<TABLE BORDER="10" HEIGHT="150">
<CAPTION>表の練習</CAPTION>
<TR><TH>名前</TH><TH>特徴</TH><TH>足の数</TH></TR>
<TR><TD>いぬ</TD><TD>よくなつく</TD><TD ROWSPAN="2">4</TD></TR>
<TR><TD>うし</TD><TD>大きい</TD></TR>
<TR><TD>つる</TD><TD>空を飛べる</TD><TD ROWSPAN="2">3</TD></TR>
<TR><TD>ぺんぎん</TD><TD>空は飛べない</TD></TR>
<TR><TD>げじげじ</TD><TD>なぞ</TD><TD>なぞ</TD></TR>
</TABLE>

↓

W3C

W3C(The World Wide Web Consortium)は，WWWの可能性を最大限に引き出すことを目的に1994年に設立された国際組織である．WWWで利用される技術の標準化や，新技術を応用したサンプルアプリケーションの開発などに取り組んでいる．SFCは，マサチューセッツ工科大学計算機科学研究所やフランス国立情報処理自動化研究所とともにW3Cにホストとして参加している．

HTMLの仕様はW3Cから``勧告''という形で発表される．W3Cは，一般ユーザーも最新の仕様(HTML4.0)に準拠した文書を作るよう求めている．

3.5.9 フレーム機能

フレーム機能とは，WWWブラウザの画面をいくつかに区切って，それぞれの領域に別々のHTMLファイルを表示させる機能のことである．画面を分割することにより表示する情報量が増え，ページをスクロールする手間が省けるが，1つのファイル毎のスペースが減少する上，同時に複数のファイル読み込むため通常より表示に時間がかかるという欠点がある．また，フレームに対応していないWWWブラウザもあるので，注意すること．

フレームの作成

まず，フレームを表示させるためのHTMLファイルを作成する．フレームを表示するには，フレーム構成の情報を<FRAMESET>タグと</FRAMESET>タグで囲む．フレームを表示できないWWWブラウザでは，<NOFRAMES>タグで囲まれた内容が表示される．

<HTML>
<HEAD>
<TITLE>フレームのタイトル</TITLE>
</HEAD>
<FRAMESET>
<FRAME>
<NOFRAMES>
<BODY>
フレームに未対応のWWWブラウザの為に記述しておく部分
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

フレームの配置を行う - `<FRAMESET>`タグ

フレームの配置を指定するには，<FRAMESET>タグを用いる．

<FRAMESET COLS="割合1,割合2,..." ROWS="割合1,割合2,...">
</FRAMESET>

COLS属性
横方向の分割をコンマで区切って指定する．幅の値は，ピクセルかWWWブラウザのウィンドウのサイズに対する割合(%)で指定する．また，残りすべてを指定するには`*'を使用する．
ROWS属性
縦方向の分割をコンマで区切って指定する．高さの値の指定はCOLS属性と同じである．
一つの<FRAMESET>タグの中にROWS属性と COLS属性を記述すると，両方が反映された格子状のフレームができる．
また，<FRAMESET>タグを複数配置することにより，画面を細かく分割できるようになる．

フレームの設定を行う - `<FRAME>`タグ

各フレームの名前やリンク先の情報を指定するには，<FRAME>タグを利用する．

<FRAME NAME="フレーム名" SRC="URI" SCROLLING="キーワード">

NAME属性
フレームの名前を指定する．
SRC属性
フレームに表示するHTMLファイルのURIを指定する．
SCROLLING属性
スクロールバーの振る舞いを指定する．スクロールバーを表示させるには YES，非表示にするにはNO,フレームの大きさに文章が収まらなかった時に自動的に表示するには AUTOを指定する．なお通常はAUTOに設定されている．

フレームに対応していないときに表示する - `<NOFRAMES>`タグ

フレームを表示できないWWWブラウザに対して情報を表示するには， <NOFRAMES>タグを利用する．

<NOFRAMES>
<BODY>
...
</BODY>
</NOFRAMES>

フレーム間のリンク

フレーム内にあるリンクをクリックすると，通常は同じフレーム内にリンク先の文書が表示される．<A>タグのTARGET属性を利用すると，リンク先の文書を任意のフレームや新しいウィンドウに表示できる．

<A HREF="リンク先のページ" TARGET="リンク先を表示する場所">

TARGET属性には次のような値が指定できる．

フレーム名
<FRAME>タグのNAME属性で設定したフレーム名を指定すると，リンク先の文書をそのフレーム内に表示する．
_top
現在のフレームを破棄しリンク先の文書を表示する．
_parent
その位置のフレームを管理する<FRAMESET>のみを破棄する．
_self
リンクがあるフレーム内にリンク先の文書を表示する．
_blank
新しいウインドウにリンク先の文書を表示する．

図: `<FRAME>`タグを使ったページのサンプル
<HTML> <HEAD> <TITLE> フレームのテストページ </TITLE> </HEAD> <FRAMESET ROWS="120,*,15 <FRAME SRC="hello.html" NAME="hello" SCROLLING="no"> <FRAME SRC="link.html" NAME="link" SCROLLING="no"> <FRAMESET COLS="40 <FRAME SRC="menu.html" NAME="menu"> <FRAME SRC="comment.html" NAME="coment"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> このページは「フレーム機能」を使用しています。フレーム機能の使えるWWWブラウザでみてくださいね。 </BODY> </NOFRAMES> </HTML>

<HTML>
<HEAD>
<TITLE>
フレームのテストページ
</TITLE>   
</HEAD>
<FRAMESET ROWS="120,*,15
<FRAME SRC="hello.html" NAME="hello" SCROLLING="no">
<FRAME SRC="link.html" NAME="link" SCROLLING="no">
<FRAMESET COLS="40
<FRAME SRC="menu.html" NAME="menu">
<FRAME SRC="comment.html" NAME="coment">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
このページは「フレーム機能」を使用しています。
フレーム機能の使えるWWWブラウザでみてくださいね。
</BODY>
</NOFRAMES>
</HTML>

図: `<FRAME>`タグを使った結果

Next: 4. WWWサーバによる情報公開 - 応用編 Up: 3. WWWサーバによる情報公開 - 基礎編 Previous: 3.4 スタイルによるページのデザイン