第7回 Webページの製作技術（HTML)

7.1 今週の目標

学習内容

学習の目的

今週はいよいよ自分オリジナルのWebページの作成に入ります．まずWebページ内文章の構造を記述するための言語であるHTMLを学びます．HTMLは文章の構造を規定する言語であるので，自分が作成するページの内容を構造化し，それに応じたHTML要素をきちんと用いることが試されます．

続いて作成したページにスタイルシートに使用してデザインを加えていくことも行い，今週の内容でWebページを制作するための基本技術が網羅されます．

キーワード

HTML(Hyper Text Markup Language)，要素(element)，属性(attribute)，マークアップ(markup)，マークアップ言語(markup language)，World Wide Web Consortium（通称W3C），スタイルシート(style sheet)，CSS(Cascading Style Sheets)，RGB

7.2 HTMLとは何か

HTML

このオンライン教材のように，リンクによってある文書と別の文書を繋いであると，関連する内容をいちいち探さずとも，すぐに参照できたりして便利ですね．このように文書と文書がリンクによって結ばれた構造を持つ文書をハイパーテキスト(Hyper Text)と言います．

世界中を繋いでいるWWWでこのハイパーテキストを用いて情報を公開するためには誰でも受け取れる共通の記述言語が必要となります．そのために開発されたのがHTML(Hyper Text Markup Language)で，Webページの大半はこのHTMLという言語で書かれています．

試しに現在のページのHTMLの記述を見てみましょう．

  1. [表示]→[ページのソース]を実行します．
  2. 新しいウィンドウが開き，HTML記述が表示されます．
  3. このウィンドウを閉じるには，ウィンドウの左上隅をクリックしてメニューを出し，[Delete] を実行してください．

どのWebページでもこのようなHTMLによる記述がなされています．このHTMLの記述をそのページのページソースまたは単にソースといいます．

HTMLの例 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>　　　　　　　　　　　　　　←開始タグの例
  <title>My Test Home Page</title>
</head> 　　　　　　　　　　　　　←終了タグの例
<body>
  <p>
  Hello HTML World!
  </p>
  <table border="1">　　　　　　　←属性の例
    <tr><td>
    これはHTMLのテストです．
    </td></tr>
  </table>
</body>
</html>

HTMLは「見出し」や「段落」などといった文章の構造を要素(element)というもので指定して表現します．例えば段落を表すのはpという要素になります．

HTMLのように，文章の構造を要素によって指定して行くことをマークアップ(markup)といい，このような言語をマークアップ言語(markup language)と呼びます．

W3C (World Wide Web Consortium)

HTMLの書き方には色々と流儀があり，人によって様々です．しかし世界中の人が誰でもアクセスするウェブ上において，みんなが好き勝手な方法でHTML記述してしまうと，先程述べたように，自分が使っているブラウザで見える通りに，相手に見えていなかったり，場合によってはページそのものが表示されないこともあり得ます．

そこで，HTMLなどウェブ上の技術の使い方を標準化するために，World Wide Web Consortium（通称W3C） という機関があります．この機関はWWWの産みの親であるティム・バーナーズ・リー氏らが1994年に設立し，マサチューセッツ工科大学(MIT)，INRIA(フランス国立情報処理オートメーション研究所)，そして，ここ慶應義塾大学(SFC)の3組織が運営している非営利団体です．

HTMLに関してはW3Cから勧告という形でその仕様が発表されます．強制力はありませんが，W3Cの勧告に従ったHTMLの書き方をするのが望ましいとされています．

詳しいことはW3Cのページを参照してください．

7.3 HTMLファイルの作成

準備

CNSでは、ホームディレクトリの下のpublic_htmlというディレクトリの下に置かれたファイルだけがWEBに公開されます．まず，このディレクトリをつくります．

% cd
% mkdir public_html

以後はこのディレクトリの下で作業しますので，cdでこのディレクトリの下に移動しておきましょう．

注意
~/public_html のアクセス権は，「その他」に対して読み出しと実行を許可するように設定します．通常は，ディレクトリを作った時点でこの設定になるので，自分で設定する必要はありません．他人が読めないように設定すると，ウェブサーバも読めないので，表示できなくなります． →3.5 ファイルのアクセス権

SFC では，~/public_html というディレクトリを作ると，「個人のホームページ一覧」に，自動的に登録されます．ただし登録されるには少し時間がかかります．詳しくは個人のホームページ一覧への登録と削除の方法を見て下さい．

ウェブページ作成開始

それではとりあえずウェブページを作ってみましょう．
まず始めに，~/public_html の下に index.html という名前のファイルを作ります． ファイルの内容は，以下の例に従って書いてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>My Test Home Page</title>
</head>
<body>
<p>
Hello HTML World!
</p>
<p>
これはHTMLのテストです．
</p>
</body>
</html>

上の内容を保存したら，次にこのファイルを mozilla で見てみます．CNSでの個人のページの URLは以下のように指定します．

http://web.sfc.keio.ac.jp/~ログイン名/パス名

パス名の部分は ~/public_html からの相対パス名(→3.3 ファイルパス)です．例えば~/public_html/index.htmlをウェブで見たいならば，そのURLはhttp://web.sfc.keio.ac.jp/~ログイン名/index.htmlです．

  1. mozilla で[ファイル]→[Navigator ウィンドウ]を実行して，新しいウィンドウを作ってください．
  2. ツールバーの「場所：」の右側に，現在表示されているページの URL があります．ここをマウスでクリックすると，文字が入力できるようになります．現在の URI を消去して，自分のページの URI に書き換えてReturnキー を押します．

http://web.sfc.keio.ac.jp/~t02000tf/index.html

HTML文書の構造

HTML文書には要素の使用方法について細かく規定した規格が3種類あります．W3C推奨の正式な HTML 文書では，文書の一番最初の行に，これから書くHTML文書はその3種類の規格うちのどれに従ったものなのかを宣言することになっています．

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

厳密に従うのは難しいので，授業では2番目のloose.dtdに従った書き方を推奨します．

それぞれの規格による具体的な違いなどは，宣言文の中にあるURLを参照してください．

HTML Validator

自分が作成したHTML文書が，自分が選択した規格にあっているかどうかを自動的に判定してくれるHTML Validation Serviceというサービスが，前ページで紹介したW3CのWebサイトにあります．余力のある人は試しに自分のHTML文書をチェックしてみましょう．

宣言の後に文書本体を書きますが，これは全体が html 要素になっていて， その内容はヘッダ部分を表す head 要素と本文を表す body 要素から構成されています．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  ヘッダ部分
</head>
<body>
  本文
</body>
</html>

このHTML文書のタイトルはヘッダ部分に title 要素によって記入します．具体的には前例で作ったように <title>タグと</title>タグによって挟まれた部分がタイトルになります．HTML 文書には，必ずタイトルを付けます．このタイトルは，ブラウザのウィンドウ一番上に表示されたり，ブックマークの名前などに使われます．文書の一部として表示されるわけではありません．
タイトルには，日本語ならば15文字程度，英語なら4, 5ワード程度までの長さで文書の内容を簡潔に表すものをつけるようにしましょう．

注意注意
ブラウザやウィンドウシステムによっては，日本語のタイトルが表示できない場合があります．

● 練習問題

先ほど作ったHTMLファイルの<p>と</p>の間の部分を自分でいろいろ変えてみてどのように変化するか確認してみましょう．

7.4 基本的なHTML要素

HTMLでの要素にはそれぞれ文書構造上での役割が決められており，その役割に応じて使っていくことで意図する内容が伝わりやすいページを作ることができます．みなさんもこれから要素を用いてページを加工していく際は，それぞれの要素が持つ役割を意識しながら使うようにしましょう．

段落や見出し，表組みなどHTMLで表現する上での基本的な要素を以下に紹介します．これらで一通りの表現ができるようになります．このオンライン教材も原則的にここで紹介した要素のみを使って本文を作成しています．

注意注意
HTMLの要素にはこれ以外にも様々なものがありますが，中にはバージョンが古い時代のものであったり特定の環境でしか表示がうまくいかないものなどがあります．本科目ではHTMLを通して文章の構造化の学習を目標としています（詳しくは第9回でやります）ので，以後授業で作成するWebページは今週紹介した要素のみを用いるようにしてください．

改行と改段落 --- <p> <br> <hr>

文章の基本構造の一つとして，段落というものがあります．この段落に対応するのが p 要素です．

<p>最初の段落です．</p>

<p>2番目の段落です．

ここは，まだ2番目の段落です．</p>
<p>3番目の段落です．</p>

HTML では，改行は空白と同じものとして扱われます．また，空白も単語を区切る意味しか持ちません．ブラウザが表示するときには，元のファイルの改行とは無関係に，そのときのウィンドウの幅に合わせて適当な箇所で改行をします．

段落の中で強制的に改行したい場合には，br 要素を使用します．br 要素は開始タグだけで，内容も終了タグもありません．また，hr 要素で，区切りの横線を入れることができます． hr 要素も開始タグだけです．

例えば，以下のような HTML ファイルは，

<p>これは，HTMLの改行のテストです．<br>
この行のように br がないと，
HTMLファイルで改行をしていても無視されます．<br>
また，このように区切り線を指定すると，
<hr>
横方向の線ができます．</p>

次のように表示されます．

これは，HTMLの改行のテストです．
この行のように br がないと， HTMLファイルで改行をしていても無視されます．
また，このように区切り線を指定すると，
横方向の線ができます．

見出し --- <h1> 〜 <h6>

段落と並んで重要なものとして見出しがあります．適切な見出しを文章中につけると，情報を効率よく相手に伝えることができます．見出しには6段階あり，h1 から h6 の要素を使用します．最大の見出しが，h1 で，数が増えるに従って小さくなります．

例えば，以下のようなHTMLファイルは，

<h1>情報処理授業計画 </h1>
<p>情報処理は以下の全13回の構成を予定している</p>
<h2> 第0回 はじめに</h2>
<h3>0.1 はじめに </h3>
<h4>この科目の目的 </h4>
<p>WEBページ製作を題材とし，デジタルコンテンツ開発で必要とされる，
企画，設計，製作，評価能力の基礎を育成すること</p>
<h4>背景 </h4>
<p>情報技術の発展に伴い，現在ではコンピュータやWEBを利用した様々な
デジタルコンテンツが制作，提供されています．企業や大学等の大規模な組織の
みならず，個人レベルにおいても様々…</p>

<h3>0.2 CNS利用上のマナー </h3>
<h3>0.3 演習で使うコンピュータ </h3>
<h3>0.4 アカウント </h3>
<h2> 第1回 CNSを使う</h2>
<h3>1.1 ログイン </h3>
<h3>1.2 コマンド </h3>
<h3>1.3 ブラウザ </h3>
<h3>1.4 SFC-CNSでの電子メール </h3>
<h3>1.5 SFC-CNSでの電子メール(2) </h3>

情報処理授業計画

情報処理は以下の全13回の構成を予定している

第0回 はじめに

0.1 はじめに

この科目の目的

WEBページ製作を題材とし，デジタルコンテンツ開発で必要とされる， 企画，設計，製作，評価能力の基礎を育成すること

背景

情報技術の発展に伴い，現在ではコンピュータやWEBを利用した様々な デジタルコンテンツが制作，提供されています．企業や大学等の大規模な組織の みならず，個人レベルにおいても様々…

0.2 CNS利用上のマナー

0.3 演習で使うコンピュータ

0.4 アカウント

第1回 CNSを使う

1.1 ログイン

1.2 コマンド

1.3 ブラウザ

1.4 SFC-CNSでの電子メール

1.5 SFC-CNSでの電子メール(2)

と表示されます．

注意注意
フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．あまりいろいろな見出しを多用すると，そのような設定で見ている人には文書の構成が分かりにくくなります．

● 練習問題

  1. 自己紹介という見出しをつけ，見出しの後に横線の区切りを入れた後，自己紹介文を一段落書きなさい．
  2. 先ほど作成したHTML文書のタイトルは 「My Test Home Page」でした．このタイトルを自分が作成した内容に合ったものに変えなさい．
    変更した結果をブラウザで確認するには，変更を保存した後，Mozilla の「Reload」ボタンを押すと新しい内容が反映されます．

箇条書き --- <ul> <ol> <li> <dl> <dd> <dt>

HTMLでは，番号無し，番号付き，説明付きの3つのスタイルで箇条書きを指定することができます．

番号無し
ul 要素の中に各項目を li 要素で書いていきます．
<ul>
<li>環境情報学部</li>
<li>総合政策学部</li>
<li>看護医療学部</li>
</ul>

と指定すると，以下のようになります．

  • 環境情報学部
  • 総合政策学部
  • 看護医療学部
番号付き
ul 要素の代わりに ol 要素を使うと，各項目の前に番号が付きます．
<ol>
<li>履修申告をする．</li>
<li>講義に出席し課題をこなす．</li>
<li>期末試験を受験する．</li>
<li>成績が付き単位取得．</li>
</ol>

と指定すると，以下のようになります．

  1. 履修申告をする．
  2. 講義に出席し課題をこなす．
  3. 期末試験を受験する．
  4. 成績が付き単位取得．
説明付き
説明付きの箇条書きとは， 辞書のように， 各項目が用語とその説明からなるようなリストのことです． dl 要素の中に dt 要素と dd 要素を交互 に書いていきます．例えば，
<dl>
<dt>WWW</dt>
<dd>World Wide Web の略</dd>
<dt>URI</dt>
<dd>Uniform Resource Identifier の略</dd>
</dl>

と指定すると，以下のようになります．

WWW
World Wide Web の略
URI
Uniform Resource Identifier の略

また，箇条書きは入れ子にして階層構造を持たせることもできます．次のように書くと，どのような表示になるでしょうか．ブラウザで確認してみると同時に，どのタグがどこで始まってどこで終わっているのかも確認しましょう．

<ul>
<li>オーケストラ
  <dl>
  <dt>弦セクション</dt>
  <dd>弦楽器により構成</dd>
  <dt>パート</dt>
  <dd>
    <ol>
    <li>第一ヴァイオリン</li>
    <li>第二ヴァイオリン</li>
    <li>ヴィオラ</li>
    <li>チェロ</li>
    <li>コントラバス</li>
    </ol>
  </dd>
  </dl>
</li>
</ul>

表組み --- <table> <tr> <td> <th>

表を作るときは，table 要素を使います．表の中の各行は tr 要素で表わし，その中の各項目は td 要素で表します．td 要素を tr 要素の中にいくつも書くことで，項目を横にどんどん増やして行くことが出来ます．また，上端や左端に見出しを書きたい場合は，td 要素の代わりに th 要素を使います．

<table>
  <tr>
    <th>コマンド</th>
    <th>機能</th>
  </tr>
  <tr>
    <td> pwd </td>
    <td> カレントディレクトリの表示 </td>
  </tr>
  <tr>
    <td> cd </td>
    <td> ディレクトリの移動 </td>
  </tr>
  <tr>
    <td> ls </td>
    <td> ディレクトリの内容表示 </td>
  </tr>
</table>
コマンド機能
pwdカレントディレクトリの表示
cdディレクトリの移動
lsディレクトリの内容表示
<table border="1">
  <tr>
    <th>コマンド</th>
    <th>機能</th>
  </tr>
  <tr>
    <td> pwd </td>
    <td> カレントディレクトリの表示 </td>
  </tr>
  <tr>
    <td> cd </td>
    <td> ディレクトリの移動 </td>
  </tr>
  <tr>
    <td> ls </td>
    <td> ディレクトリの内容表示 </td>
  </tr>
</table>
    
	

	  
コマンド機能

	  
pwdカレントディレクトリの表示

	  
cdディレクトリの移動

	  
lsディレクトリの内容表示

	
  
	<table border="1">
	  <tr><th>旧省庁名</th><th>新省庁名</th></tr>
	  <tr><td>大蔵省</td><td>財務省</td></tr>
	  <tr><td>厚生省</td><td rowspan="2">厚生労働省</tr>
	  <tr><td>労働省</td></tr>
	  <tr><td colspan=2>外務省</td></tr>
	</table>
      	  <tr><td>通産省</td><td>経済産業省</td></tr>
旧省庁名新省庁名
大蔵省財務省
厚生省厚生労働省
労働省
外務省
通産省経済産業省

● 練習問題

自分の時間割表をHTMLで作りなさい．

他の情報へリンクを張る --- <a>

HTMLはハイパーテキストの一種なので，文書中に他の情報へのリンクを持たせることができます．他の情報へのリンクは a 要素で表し，href属性の値として，リンク先の情報の位置を示す URI を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします．

<a href="http://www.sfc.keio.ac.jp/">SFCのホームページ</a>

a 要素の内容をソースアンカー (source anchor)と言い，そこをクリックすると指定された情報に飛ぶ ようになります．

現在のページと同じウェブサーバ上にあるページの URI は，ホスト名などを省略することができます．

<ul>
  <li><a href="next.html">同じディレクトリの別のファイル</a>
  <li><a href="/index.html">このサーバのトップへ</a>
  <li><a href="http://www.keio.ac.jp/index.html">慶應義塾のホームページ</a>
</ul>

特殊な文字 --- &lt; &gt; &amp; &quot; &nbsp;

HTMLでは「<」や「 >」は特別な意味を持っているのでそのまま書くことはできません．これらの文字を表示したい時は以下のように書きます．

< &lt;
> &gt;
& &amp;
" &quot;
  (半角スペース) &nbsp;

フォーマット済みテキストの指定 --- <pre>

空白や改行を入力した通りに表示してほしいことがあります． 例えば，以下のような HTML ファイルは，

明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│

以下のように表示されます．

明日，７時から飲み会やります． 　　　　│　　↑ 　　　　│　　北 　　　　駅 　　　　│◎ここ 　　　　│

これではどこに行けばいいのか分かりません．

このような時は pre を使います．pre 要素の内容は，文字幅が一定のフォントを使い，空白・改行もその通りに表示されます．

<pre>
明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│
</pre>

文章中の特定部分の指定 --- <div> <span>

文書の中のある部分をひとまとめにし，周りとは区別して扱いたいときに使うのがdiv要素とspan要素です．主に次ページ（→7.5 スタイルシート）で紹介するスタイルシートを使って色や文字の位置などを指定したい時に使います．

具体的な使用例などは次ページを参照してください．

7.5 スタイルシート

HTMLの基本的な要素によって様々な表現ができるようになりました．しかし文書の構造が表現できるだけではまだ物足りないですね．みなさんの中には文字に色をつけたいとか，幅や高さを指定したいと思った人もいるでしょう．

HTML はもともと学術的な情報交換のために開発されました．従って読む人がどんなコンピュータを使っていようと，その環境に左右されることなく内容を正しく伝えることが重要であり，文書の見栄えはあまり気にしていませんでした．しかし，世の中の多くの人がウェブを使うようになると，文章だけではつまらないので，文書のデザインを気にする人たちも現れました．そこで，HTML の限られた機能を使って美しくページをデザインするために次のような工夫が考え出されました．

ところが，このような工夫はページを複雑にして処理を遅くするだけでなく，ブラウザの種類や設定によって意味不明の表示になったり，テキスト読み上げソフトを使っている視覚障害者を困らせたりすることになります．

さらにデザインを意識するあまり，HTMLによって意味のまとまり毎に規定していた文章の論理構造が崩れてしまい，その結果，外見は綺麗だけど内容が伝わりにくいページが増えてしまいました．

スタイルシート(style sheet)は上のような問題を解決するための，ページのデザインを指定する仕組みです．HTML は文章の論理的な構造を表すマークアップを担当し，色や文字の大きさといったデザインに関するマークアップはスタイルシート言語で書きます．スタイルシート言語にはいくつかありますが，普通は CSS(Cascading Style Sheets)を使います．

注意注意
スタイルシートの解釈はブラウザによってまちまちであったり，ブラウザによっては対応していなかったりで，スタイルシートによる指定が，必ずその通りに表示されるという保証はありません．

CSS によるマークアップの基本的な書き方は「属性名 : 値」です．複数ある時は「;」で区切ります．例えば，12ピクセルサイズの青い文字を使いたい場合は

font-size: 12px; color: blue
というふうに書きます．

色の指定

ページの背景や文字の色を指定するためには，16進数で表現される，RGB カラーモデルを使います．色を赤(R)，緑(G)，青(B)の三原色に分解し，それぞれの明るさを数値化する方式です．書き方はいくつかありますが，前に「#」を付け，2桁の16進数(00〜FF)に数値化して並べる書き方がよく使われます．例えば，赤色は #FF0000 と表わされます．またよく使う色などは予め名前が与えられており，その名前で指定することもできます．例えば先程の赤色は" red "となっていてこれはRGBの #FF0000と同じです．赤色のように色を名前で指定できるのは以下の16色です．

色の名前対応するRGB表記色の名前対応するRGB表記
  赤(R)緑(G)青(B)   赤(R)緑(G)青(B)
black # 000000white # FFFFFF
red # FF0000blue # 0000FF
yellow # FFFF00green # 008000
purple # 800080aqua # 00FFFF
gray # 808080silver # C0C0C0
maroon # 800000lime # 00FF00
olive # 808000navy # 000080
fuchsia # FF00FFteal # 008080

これら以外の色を使いたいときはRGBで自分で指定します．

色を指定できる対象には以下のような属性があります．

文字に関する指定

文字に関して指定できる属性には以下のようなものがあります．

これら以外にもfont-familyやfont-variantなどがあります．

HTMLでのCSSの使い方はインライン指定，style 要素，外部スタイルシートの3通りがあります．

(1) インライン指定

HTML 文書の中のある特定の要素について，スタイルシート言語で書いたマークアップ（以後，「スタイル指定」と呼ぶことにします）を行いたい場合は，その要素の style 属性の値としてスタイル指定を書きます．例えば，ある段落を12ポイントの青い文字で書きたい場合は以下のようにします．

<p style="font-size: 12pt; color: blue">12ポイントの青い文字</p>

また，head 要素の中に，どのスタイルシート言語を使うか書いておく必要があります．例えば，CSS の場合は

<META http-equiv="Content-Style-Type" contnt="text/css">

と書いておきます．

(2) style 要素

HTML 文書の中のある種類の要素全部についてスタイル指定を行いたい場合は，style 要素を使います．

例えば，h1 要素の文字を赤色にし，下線を付け，中央揃えにするためには以下のように記述します．

<head>
 <style type="text/css">
  h1 {color: red; text-decoration: underline; text-align: center}
 </style>
</head>

こうしておいた上で，本文で h1 要素を使うと下のようになります．

見出しのテスト

class 属性

上の例では，文書中のすべての h1 要素に対して同じスタイルを指定します．しかし，同じ種類の要素でも何種類かのスタイルを指定したいことがあります．そのような場合は，必要に応じて要素に class 属性を付けておき，特定の class 属性の値を持った要素に対して「要素名.クラス属性の値 { スタイル指定 }」でスタイルを指定することができます．

例えば，h1 要素で class 属性の値が test-ni-deru のものだけ上と同じスタイルを指定するには

<head>
 <style type="text/css">
  h1.test-ni-deru {color: red; text-decoration: underline; text-align: center}
 </style>
</head>
<body>
 <h1 class="test-ni-deru">重要そうな章</h1>
 <h1>あんまり重要でなさそうな章</h1>
</body>

とします．

span と div 要素

前ページで紹介したdiv 要素や span 要素を使い，それらにクラス属性を付けることで，文書の中の任意の部分にスタイルを指定することができます．以下の例では，段落と表組がまとめて中央に寄せられ，その次の段落では文章の一部分の色が変わっています．

<head>
 <style type="text/css">
  div.center {text-align: center}
  span.blue {color: blue}
 </style>
</head>
<body>
 <div class="center">
  <p>この段落は中央に寄っている．</p>
  <table border="1">
  <tr><td>この表も中央に寄っている．</td></tr>
  </table>
 </div>
  <p>ここは普通の文章<span class="blue">ここだけ青い文字</span>そしてもとに戻る．</p>
</body>

(3) 外部スタイルシート

今までのスタイルの指定のし方は各HTMLファイル固有のものでした．しかし例えばこの情報処理のテキストのように，共通のスタイルを複数の HTML ファイルで指定する場合，HTMLファイル毎にいちいち同じstyle指定をするのは大変です．そこでスタイル指定をHTMLファイルとは独立した別のファイルに書き，各 HTML ファイルの中の link 要素で外部スタイルシートの指定をします．こうすることで，複数のHTMLファイルで共通のスタイル指定が使えるようになります．

外部スタイルシート適用

ひとつの HTML ファイルに複数の外部スタイルシートを指定することができますが，ここではひとつのスタイルシートファイルだけを使うことにします．

まず，HTMLファイルとは別に共通で指定したいスタイルだけをまとめて書いた，CSSファイルを作り保存しておきます．

pagestyle.css ファイル

  span.blue {color: blue}
  div.center {text-align: center}

続いてHTMLファイルの head 要素内に新たにlink 要素を作り，以下の属性を設定します． 

<head>
 <link rel="stylesheet" href="./pagestyle.css" type="text/css">
</head>
<body>
 <div class="center">
  <p>この段落は中央に寄っている．</p>
  <table border="1">
  <tr><td>この表も中央に寄っている．</td></tr>
  </table>
 </div>
  <p>ここは普通の文章<span class="blue">ここだけ青い文字</span>そしてもとに戻る．</p>
</body>

これで，いちいちHTMLファイルでスタイルを指定しなくても pagestyle.cssで指定したスタイルが適用されます．他のHTMLファイルで同じスタイルを適用したい時は，同様に link 要素を指定します．

● 練習問題

スタイルシートを使って，自分が作ったウェブページの見栄えを良くしてみましょう．

● 宿題

先週の宿題としてみなさんに用意してもらった自分が作りたいWEBページ企画書の内容をHTMLで記述しWEBページとして表現してください．

HTMLファイル名は"plan.html"とし，それをpublic_htmlディレクトリ以下の自分が適切と思う場所（必要があれば新規にディレクトリを作成してもよい）に配置し，そのURLを電子メールで先生とTA/SAに送りなさい．