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

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

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

見出し - <h>タグ

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

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

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

<h1>ミックスジュース</h1>
<h2>ミックスジュース</h2>
<h3>ミックスジュース</h3>
<h4>ミックスジュース</h4>
<h5>ミックスジュース</h5>
<h6>ミックスジュース</h6>

→

<h>タグのサンプル

改行 - <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.9に<hr>タグを用いた例を示す．

図: <hr>タグのサンプル

区切り線をひいてみます。
<hr>
ということで線が入りました。

↓

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

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

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

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

図: <pre>タグのサンプル

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

→

HTML3.2とHTML4.0

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

3.5.2 文の装飾を行うタグ

ここでは，引用やメールアドレスに関する情報を表示する場合などに用いる，文の装飾を行うタグについて説明する．

引用 - <blockquote>タグ

文章などを引用した場合に用いるタグである．<blockquote>と </blockquote>で囲まれた部分が字下げして表示される．

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

図: <blockquote>タグのサンプル

以下のように始まる。
<blockquote>
吾輩は猫である。
</blockquote>
夏目漱石の文章は、

→

アドレス- <address>タグ

作者の情報や更新情報を表示する場合に用いるタグである． <address>と </address>で囲まれた部分が強調して表示される．

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

図: <address>タグのサンプル

作者および更新情報
<address>
Taro Fujisawa, Keio Univ., Mar 10 2000.
</address>

→

強調 - <strong>タグ

文章を強調する場合に用いるタグである．<strong>と </strong>で囲まれた部分が強調して表示される．

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

図: <strong>タグのサンプル

このタグを用いると<br>
<strong>
strong
</strong><br>
のようにstrongが強調

→

3.5.3 箇条書きをするタグ

ここでは，HTML文書で箇条書きを行う際，記号や番号などを項目の先頭に付加して表示する方法を説明する．

記号による箇条書き - <ul>タグ

記号の箇条書きを行うためのタグである．<ul>と</ul>が，箇条書きのはじまりと終わりを表し， <li>が項目を表す.

<ul>
<li>項目1
<li>項目2
</ul>

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

図: <ul>タグのサンプル

以下に概要を示す。
<ul>
<li> はじめに
<li> そして
<li> 最後に
</ul>
次に詳細について説明する。

→

番号による箇条書き - <ol>タグ

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

<ol>
<li>項目1
<li>項目2
</ol>

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

図: <ol>タグのサンプル

SFCでよく見る動物
<ol>
<li>鴨
<li>猫
</ol>

→

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

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

<dl>
<dt>項目1
<dd>項目1の説明
<dt>項目2
<dd>項目2の説明
</dl>

図3.16に<dl>を用いた例を示す．

図: <dl>タグのサンプル

<dl>
<dt>サリンジャー
<dd>ライ麦畑でつかまえて
<dt>サガン
<dd>悲しみよこんにちは
</dl>

→

3.5.4 リンクを指定するタグ

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

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

文章や画像などを<a>タグと</a>タグで囲むことで，それらの文章や画像に他の情報へのリンクを設定できる．href属性にはリンク先の情報のURLを指定する．リンク先の情報には，ホームページ以外に，画像ファイルや圧縮ファイルなども指定可能である．ブラウザで表示できない形式の情報が設定されているリンクがクリックされた場合，ブラウザはダウンロード用のダイアログを表示し，`OK'ボタンがクリックされることで，設定された情報のダウンロードが開始される．

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

図: <a>タグのサンプル

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

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

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

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

<img src="画像ファイルのURL" alt="画像の説明">

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

<img src="画像ファイルのURL" alt="画像の説明" width="横幅" height="縦幅">

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

図:<img>タグのサンプル

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

↓

ホームページ上で表示するGIFファイルは，unisys社が許可したアプリケーションで作成されたものでなければならない．GIFファイルを使用する際には，作成元のアプリケーションがライセンスを受けているかどうか確認すること．

3.5.6 表組みを行うタグ

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="数値">
{math}ath}
</table>

• width属性
  表全体のサイズを指定する．サイズの値はピクセルまたはWWWブラウザのウィンドウサイズに対する割合(%)で指定する．

<table width="幅">
{math}ath}
</table>

<td>タグで指定する属性

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

<td rowspan="縦方向の長さ" colspan="横方向の長さ">

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

図: <table>タグのサンプル

<table border="10">
<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 colspan=2>なぞ</td>/tr>
</table>

↓

W3C

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

HTMLの仕様はW3Cから``勧告''という形で発表される．W3Cは，一般ユーザも最新の仕様(HTML4.0)に準拠した文書を作成するよう求めている．仕様に関する情報は，http://www.w3.o
rgから入手できる．

3.5.7 フレーム機能

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

ページの文書型の宣言

WWW上の情報については，文書がどのような構造で記述されているのかを指定しなければならない．フレーム機能を利用するには <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frame set//EN"> としてHTML4.0 Framsetの規格に従って記述されていることを宣言する必要がある．

フレームの作成

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>フレームのタイトル</title>
</head>
<frameset>
<frame>
<noframes>
フレーム未対応のWWWブラウザのために記述しておく部分
</noframes>
</frameset>
</html>

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

<frameset cols="割合1,割合2,..." rows="割合1,割合2,...">
</frameset>

• cols属性

  横方向の分割をカンマで区切って指定する．幅の値は，ピクセルかWWWブラウザのウィンドウのサイズに対する割合(%)で指定する．また，残りすべてを指定するには`*'を使用する．

• rows属性
  縦方向の分割をコンマで区切って指定する． 高さの値の指定はcols属性と同じである．
  一つの<frameset>タグの中にrows属性と cols属性を記述すると， 両方が反映された格子状のフレームができる． また，<frameset>タグを複数配置することにより，画面を細かく分割できるようになる．

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

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

<frame name="フレーム名" src="URL" scrolling="キーワード">

• name属性
  フレームの名前を指定する．
• src属性
  フレームに表示するHTMLファイルのURLを指定する．
• scrolling属性
  スクロールバーの振る舞いを指定する．スクロールバーを表示させるには`yes'，非表示にするには`no',フレームの大きさに文章が収まらなかった時に自動的に表示するには`auto'を指定する．なお通常は`auto'に設定されている．

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

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

<noframes>
{math}ath}
</noframes>

フレーム間のリンク

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

<a href="リンク先のページ" target="リンク先を表示する場所">

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

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

図: <frame>タグを使ったページのサンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-2022-jp">
<title>
Frame test Page
</title>   
</head>
<frameset rows="120,*,15
<frame src="head.html" name="head" scrolling="no">
<frame src="body.html" name="body" scrolling="no">
<frameset cols="40
<frame src="menu.html" name="menu">
<frame src="comment.html" name="coment">
</frameset>
<noframes>
<p>
このページは「フレーム機能」を使用しています．
フレーム機能の使えるWWWブラウザでみましょう．
</p>
</noframes>
</frameset>
</html>

<frame>タグを使った結果