図4.1: リンクが深いと読みにくくなる。
まず、 他人の書いたWebページを見てみましょう。 見やすいWebページ、 わかりやすいWebページがあったら、 それが 「良いWebページ」 なのです。 逆に、 見にくいWebページ、 わかりにくいWebページは 「悪いWebページ」 になります。
良いWebページを書こうとするならば、 まず最初に、 「良いWebページと思われるものを探すこと」 が大切です。
あるまとまった内容をWWWを使って情報発信する時、 最初に訪れてもらうようにするのが、 扉ページの役割です。 扉ページは、 ひと目見ただけでその中身のおおよその検討がつき、 しかも、 その中身を読む気にさせるものに工夫して書かれます。
しかし、 グラフィックに凝ってしまった結果、 そのページを閲覧するために時間がかかってしまうと、 遅い回線を使ってる人にとっては事実上読むことができないことになります。
従って、 扉ページは 「早く、 分かりやすく」 という一見すると矛盾する条件を満たすことが求められます。
同じ量の文書をWWWを使って掲示する際に、 それをいくつのHTML文書に分割するかによって、 見え方が違ってきます。
しかし、 リンク機能を使いたいために、 不必要に多くの文書に分割をしてしまい、 本当に得たい文書にたどり着く迄に、 いくつものリンクをたどる必要がある文書は、 読むのが非常に面倒です。 多くても3回程度で最終的な文書にたどり着けるようなリンク構成を考えるべきでしょう。 WWWでの情報発信への道のり
前節までで、 WWW上にはさまざまな人がさまざまな目的で公開しているさまざまなページがあることが分かりました。 この節では、 自分でWWWのページを作り公開することについて学びます。
しかし、 ひと口に 「ページを作り公開する」 といっても、 そのためには次のような多くの作業が必要になります。
コンピュータになじみのない人にとっては、 一見すると 「ページ群のファイルを作成する」 ことや 「サーバにページ群を置いて公開する」 ことが一番難しくかつ重要であるように思えてしまいがちですが、 実際にはその他の部分も等しく重要なことなのです。
以下ではこれらのことがらについて、 順に学んでゆきます。 この節では、 上の課題のうち前半の3項目を取り上げます。 残りの内容は次の節以降で取り上げます。
どのようなプレゼンテーションを作るのであっても、 まず次の2点は、 はっきりさせておかなければなりません。
これらがあいまいなままプレゼンテーションを作成しても、 結果は 「ただ何となく作っただけ」 に終わってしまい、 役に立たないものになりがちです。
目的は、 明快にひとことで言いあらわせるようなものであるべきです。 たとえば、 「WWWのページを作成する練習をする」 ということでもよいのです。 しかしWWWは他の人に何かを伝えるための手段ですから、 「これこれのことを伝える」 という目的の方がよいプレゼンテーション (他の人から見て面白いプレゼンテーション) になりやすいでしょう。
プレゼンテーションに含まれる情報の範囲を決めることも重要です。 そうしておかないと、 プレゼンテーションが何パーセントぐらい完成したのか、 まだ何が足りないのかといったことが分かりませんし、 情報の構成を決めるのもうまく行かないでしょう。 ここでは例題として、 目的と範囲を次のように決めてプレゼンテーションを作成して行くことにします。
【演習】
WWWのプレゼンテーションを作成するにあたって、 どのようなページにどのようなつながりを持たせて構成するか決めることは、 自分たちの表現したいことを相手に効率よく伝える上でとても重要です。 構成がでたらめだと、 読み手は必要な情報にたどりつく前にあきらめてよそへ行ってしまうかも知れません。
WWWのようなハイパーテキストのシステムでは、 次の2とおりの構造が基本になると考えてよいでしょう (図4.2)。
実際には、 線形構造でも途中で枝分かれがあったり、 階層構造の下の方で一部に線形構造が使われたりして両者が組み合わされることが多いものです。 しかしともかく、 自分がプレゼンテーションを作る場合にはどちらの構造を基本にするかを決めてから始めるのがよいでしょう。
ここの例題では、 簡単な階層構造を採用することにして、 次のような構成を採用します (図4.3)。
【演習】
プレゼンテーション全体の構成が決まったら、 次は個々のページの構成に進みますが、 その前に1つ考えておくことがあります。 それは、 プレゼンテーションに含まれるページのスタイル (見え方) を決めておくことです。 1つのプレゼンテーション内で各ページが共通のスタイルを持つようにしておくと、 読み手は 「まだ同じプレゼンテーション内を見ている」 と安心できますし、 複数人で分担してページを作成してもばらばらな印象にならずに済みます。
ここの例題では簡単ながら、 次のようなスタイルを取ることにします。
ではいよいよ、 ページの構成に進みます。 きちんとやるなら、 主要なページすべてについて構成を考えて検討してから作成に進むことになりますが、 この例題プレゼンテーションはごく簡単なものですから、 入口ページの構成だけ決めて、 残りのページは作るときにそのつど構成を考えることにしました。
Webページに書いておきたいこと
多くの場合、 WWWのWebページは次の4つの部分からなります。
これらは内容による分類です。
表題とは、 そのページ全体の主題となっている言葉のことで、 ブラウザーで閲覧すると、 多くの場合はブラウザーのウィンドゥの最上部に表示されます。 ここには短く端的に内容を表わす言葉を入れるべきでしょう。
Webページをデザインする場合、 その冒頭部には表題で示された内容を視認性を高めて掲示するのが一般的です。 また、 この部分に画像を挿入することも多いようです。 中身
中身の部分は、 今までに述べてきたような普通の文書が表示されるように書けばよいでしょう。
本の場合、 本の最初か最後のページ付近に、
などが表示されています。 これは、 その本についての 「出版業的な情報」 を書いたもので 「奥付」 と呼ばれる部分です。 書店、 図書館などは奥付をみて本を整理し、 読者は奥付を見てその本の著者を知ります。 また、 その本の内容を引用したり、 紹介するときにも、 奥付にかかれた内容が正式な情報になるのが通例です。 即ち、 奥付とは 「本の権利を守る部分」 です。 そこで、 WWWによる情報発信を考えてみます。 WWWで発信された情報は、 情報作成者・情報発信者がさまざまな権利を有しています。 そこで、 そのような権利が存在していることを明示し、 権利保有者を明示すれば、 これらの権利を見ず知らずのうちに侵害してしまうことを防ぐ効果が期待出来ます。 そこで、 Webページには必ず奥付をつけるようにします。 本の奥付に倣ってWebページの奥付を考えると、 以下の項目を表示するとよいでしょう。
コンピュータは、 さまざまな種類の情報をさまざまな形でビット列に符号化して表し、 ディジタル情報として取り扱います。 ここで、 情報の種類として 「人間から計算機への指示や意思の伝達」 について考えてみましょう。
人間どうしで指示や意思を伝達するときには、 日本語や英語などの言語 (自然言語) を使います。 コンピュータに対しても同じにできればよいのですが、 それには次のような問題があります。
そこで、 コンピュータに指示や意思を伝達するために、 自然言語の代わりにコンピュータで取り扱うのに適した人工言語を定めて使うことが行なわれています。 これを計算機言語と呼びます。
計算機言語の代表は、 BASICやCOBOLなど、 コンピュータの動作 (プログラム) を記述するためのプログラミング言語です。 しかしそれ以外にも、 データベースのデータを取り扱うためのデータ操作言語や、 コンピュータで扱う文書を表すためのマークアップ言語など、 さまざまな計算機言語が作られ使われています。
それぞれの計算機言語は、 それ固有の書き方の規則があり、 それに厳密に従っておかないとコンピュータでうまく扱ってもらえません。 非常に杓子定規で不便な感じがしますが、 その代わりとても短い記述でコンピュータにさまざまな指示を与えられるという利点が得られるのです。
HTML言語
HTML(HyperText Markup Language) は、 WWWのページを記述するために作られたマークアップ言語です。 HTMLを使うことで、 箇条書き、 画像、 表、 リンクなど WWWページに現われるすべてのものを作りだすことができます。
HTMLの基本構造
HTMLによる記述は、 基本的に次の形をしています。 ここで1行目 (DOCTYPE宣言) は、 以下の記述がHTML4.0と呼ばれる規格に従っていることを示しています (ほかにHTML2.0、 HTML3.2などもありますが、 HTML4.0が最新版です)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> ... ヘッダ部分... </HEAD> <BODY> ... 本体部分... </BODY> </HTML>
2行目からがHTMLによる記述ですが、 「<なんとか…>」 という形のものが多数ありますね。 これをHTMLではタグと言います。 タグはさらに、 開始タグ (例: <HTML>) と終了タグ (例:</HTML>) に分けられ、 一対の開始タグと終了タグではさまれた範囲を要素 (例:HTML要素) と言います。 HTMLでは要素の中に別の要素が含まれることができます。 上に示したように、 HTML記述ではHTML要素の中にHEAD要素とBODY要素がこの順で含まれます。
HEAD要素の内側をヘッダといい、 ここにはこのWWWページがどのようなページであるかについての情報を記述します。 一方、 BODY要素の内側を本体といい、 ここにページの内容 (ブラウザの窓の中に現われるもの) を記述します。 表示させてみよう
いつまでもお話ばかりではつまりませんから、 WWWページを作ってブラウザで表示させてみましょう。 次に示すのは、 そのままブラウザで表示させられる、 完結したHTMLコードです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>We Study Computers. Why?</TITLE> </HEAD> <BODY> <P> 私たちは教科「情報」で、コンピュータをはじめとする、 情報技術について学ぶようになりました。 </P> </BODY> </HTML>
ここでは新しいタグが2つ、 出て来ています。 TITLE(表題) は、 ヘッダに入る代表的な要素で、 ページの表題を定めます。 表題はブラウザの窓のタイトルバーに表示されたり、 しおり (bookmark) の項目名として使われたりします。 P(paragraph、 段落) は、 本体に入る代表的な要素で、 普通の文章 (地の文) を書くのに使われます。
では実際にやって見ましょう。 ファイルhome.htmlに上の内容を打ち込んで、 ブラウザの 「ファイルを開く」 機能で表示させたところを図4.4に示します。
これを見ると、 確かに表題がブラウザのタイトルバーに、 また段落がブラウザ窓の中に表示されています。 ここで、 段落の行の折り返しが元のHTMLファイルと違っていることに注意してください。 ブラウザは窓の幅に合わせて段落の中の折り返しを自動的に調整します。 一般にHTMLファイルの中での行かえや空白の入れ方はブラウザによる表示には影響しません。
ではいよいよページの内容を予定に沿って作っていくことにしましょう。 その場合、 上から順番にいきなり打ち込んでいくのではなく、 まず見出しなど全体構造の分かるものを作り、 そのあとでその項目ごとの内容を追加して行くのがよいでしょう。 こうすると、 ページ全体の内容のなかで現在作っている部分がどのような位置にあるかを常に見直しながら、 ページを作っていくことができます。 このように、 自由な順序で文書を作成していけることも、 コンピュータで文書を作ることの利点の1 つです。
HTMLでの見出しは、 H1、 H2、 H3、 H4、 H5、 H6 という6 種類の要素で表します。 H1 が一番上のレベルの大見出しで、 H2、 H3 と数字が大きくなるほど小見出しになっていくのです。
HTMLでは区切りの横線は、 HR という要素で表します。 ただしこれまでと違って、 HR は
ついでに、 ページの最後の署名にはそれが署名であることを表すADDRESS 要素を使うのが通例です。 これらを使って入口ページの骨組みを完成させたところを次に示します。
<!DOCTYPE HTML PUBILC "-//W3C//DTD HTML 4.0//EN"> <HEAD> <TITLE>We Study Computers. Why?</TITLE> </HEAD> <BODY> <H1>なぜコンピュータを学ぶのか?</H1> <P> 私たちは教科「情報」で、コンピュータをはじめとする、 情報技術について学ぶようになりました。 </P> <HR> <H2>教科「情報」の構成</H2> <H2>教科「情報」の内容</H2> <H2>不要な(?)内容</H2> <H2>もっと知りたい内容</H2> <H2>まとめ</H2> <HR> <ADDRESS>コンピュータと教育研究会</ADDRESS> </BODY> </HTML>
ここからはいよいよ、 それぞれの項目の内容を書いていきながら、 HTMLの機能を学んで行きます。
情報をまとめる文章では、 箇条書きを多く活用しますから、 次にHTMLの箇条書きについてまとめましょう。 まず、 いちばん多く使われる箇条書きである番号なしリスト (UL、 unordered list) は次の形をしています。
要素LI (list item) が1 つの項目に対応します。 項目はいくつあっても構いません。 <LI>の閉じタグは書いてもいいのですが、 省略してもよいので、 ここではそうしました。
ではこれを利用して書いた内容の追加部分を見てみましょう (箇条書きでない部分はこれまで通りP 要素になります)。
<P> コンピュータを学ぶ目的について納得しておくと、 次のようなよいことがあります。 </P> <UL> <LI>学ぶことに対して意欲的になり効率よく学習できる。 <LI>自分にとって重要なテーマに的を絞ることができる。 <LI>目標をどれくらい達成したか自分で評価できる。 </UL> <P> このページでは、「なぜコンピュータを学ぶのか?」というテーマについて、 私たちなりに調べたことや、考えたことをまとめてみました。 </P>
<LI>タグが他の行より1 文字下げて書かれていますが、 これはHTMLのファイルを見たり編集するときに分かりやすくするためです (HTMLファイルでの行かえや字下げはブラウザでの表示には影響しません)。 これを表示したようすを図4.6に示します。
ここでタグ <UL>...</UL>を <OL>...</OL>に取り換えると、 番号つきリスト (OL、 ordered list) になり、 図4.7のように項目に1 から順に番号が振られます。 番号つきリストは、 項目の順番に意味があるような箇条書きに使うとよいでしょう。
箇条書きの3 番目の形として、 項目ごとに短い語が見出しのようになった定義リスト (DL、 definition list) があります。 これは各項目がDT 要素とDD 要素の対になっていて、 全体として次の形をしています。
<DL> <DT>用語1 <DD> ... 説明1 ... <DT>用語2 <DD> ... 説明2 ... ... </DL>
DT要素やDD要素もLI要素と同様、 閉じタグは省略できます。
ではこれを使った内容を見てみましょう (図4.8)。
<HR> <H2>教科「情報」の構成</H2> <P> 教科「情報」には情報A、情報B、情報C の3 つの科目があります。 </P> <DL> <DT>情報A <DD>コンピュータネットワークの成り立ちについて学ぶ。 コンピュータを用いてネットワーク上の情報を利用したり、ネットワークに情報を発信する。 <DT>情報B <DD>コンピュータ上での情報の表現やプログラムについて学ぶ。 コンピュータネットワークの利用を通じて、情報技術と社会の関わりについて学ぶ。 <DT>情報C <DD>プログラミングや応用プログラムの利用を通じて、コンピュータを用いた問題解決について学ぶ。 </DL>
表
箇条書きと並んで情報を整理するのに有効な手段に、 表があります。 表もタグの構造は箇条書きに似ていますが、 箇条書きが1 次元なのに対して表は2 次元だという違いがあります。 具体的には次のようになります。
なお、 TH とTD は、 そのます目の内容が見出しであるか普通の情報であるかで使い分けます (見出しの場合はやや太字で中央揃えして表示されます)。 そして、 TR、 TH、 TD の閉じタグは省略できます。
これらをまとめると、 具体的には表をHTMLで書くと次のようになるわけです (すべてTD 要素にした場合)。
<TABLE BORDER=1> <TR> <TD> 項目<TD> 項目… <TR> <TD> 項目<TD> 項目…... </TABLE>
表の行数や列数は中に入っているTR 要素やTH、 TD 要素の数から自動的に決まります。
なお、 TABLE の開始タグについている 「BORDER=1」 というのは、 表の罫線の太さを指定するもので、 0 を指定するか、 またはこの指定をまったく書かないと罫線は描かれません。 またもっと大きい数字を指定すると太い罫線になります。 このように、 開始タグの内側に書いてその要素に関する特性を調整するための指定をHTMLでは属性 (attribute) と呼んでいます。
では、 表を使った内容を見てみましょう (図4.9)。
<TABLE BORDER=1> <TR><TH>項目<TH>概要 <TR><TH>情報の表現 <TD>ディジタル情報、ビット、2 進数、各種の情報の表現 <TR><TH>コンピュータ <TD>コンピュータの原理、ハードウェア、ソフトウェア <TR> ... (途中略)... <TR><TH>応用ソフトウェアによる問題解決 <TD>表計算ソフト、 シミュレーション </TABLE>
ここまででは、 プレゼンテーションの内容はすべて1 つのHTMLファイルで 「閉じて」 いました。 しかしWWWの良いところは、 あるファイルから別のファイルを参照できるところにあります。 ここではそのようは方法を2 つ、 取り上げます。
1 つ目は、 あるページの中に画像 (イメージ) を埋め込むことです。 これをインラインイメージ (inline image) と呼びます (inline というのは 「その場所に」 という意味です)。 そのためには、 次のようなIMGタグを使います。
<img src="ファイル名" ALT="説明">
ここでSRC 属性はイメージ (GIF 形式またはJPEG 形式) を格納したファイルを指定し、 ALT 属性はそのイメージに関する説明を書くようになっています。 たとえば末尾の署名のところに自分たちの写真 (?) を入れたとしましょう。 そのファイル名をourphoto.gif であるとして、 最後の部分を次のように直しました。
<HR> <ADDRESS><IMG SRC="ourphoto.gif" ALT="Our Photo"> コンピュータと教育研究会</ADDRESS> </BODY> </HTML>
これを表示しているようすを図4.10に示します。
他のファイルを参照するもう1 つの方法であるリンクは、 機能的にはページの中のある部分を選択すると表示が別のページに切り替わるというもので、 これまでにも多く利用してきましたが、 これもHTMLのコードにおいて別のファイルを参照しているわけです。 HTMLでリンクを作る場合は、 A(anchor) タグと呼ばれるタグを使い、 次のように記述します。
<A HREF="ファイル名"> ... リンクテキスト...</A>
ここでリンクテキストと書いた部分は下線つきなど他とは区別できるように表示され、 ここを選択する (多くのブラウザではマウスでクリックする) と、 HREF 属性で指定したファイルに表示が切り替わり
ます。 なお、 「リンクテキスト」 の部分は実はテキストに限らず、 インラインイメージなどを含んでいても構いません。
ここでは、 先に出てきた教科の各内容に関する表を手直しして、 各項目の部分をリンクテキストにしてみます。
<TABLE BORDER=1> <TR> <TH>項目<TH>概要<TR> <TH><A HREF="info-repl.html">情報の表現</A> <TD>ディジタル情報、ビット、2 進数、各種の情報の表現 <TR> <TH><A HREF="computers.html">コンピュータ</A> <TD>コンピュータの原理、ハードウェア、ソフトウェア <TR> ... (以下略)...
このように手直しした表の表示のようすを図4.11に示します。 ここで 「情報の表現」 と記された部分を選択すると、 info-repl.htmlというファイルの内容がブラウザに表示されるのです。
URL の参照
上ではインラインイメージもリンクも、 元のページのファイルと一緒に置いたファイルの名前を指定していました。 しかし実際には、 SRC 属性やHREF 属性では任意のURL を指定できます。 これによって、 リンクを選択すると他のサーバのページが表示されるようにできますし、 (必要なら) 他のサーバにあるイメージをページに埋め込んだりできるのです。
たとえば、 この章で最初に出てきたWWWページのHTMLコードは次のようになっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Welcome Page of "Jouhou"</TITLE> </HEAD> <BODY> <H1>科目「情報」の入口ページ</H1> <UL> <LI><A HREF="http://www.ntt.co.jp/japan/index-j.html">日本の情報(NTT)</A> <HR> <LI><A HREF="http://www.yahoo.co.jp/">ディレクトリサービス(Yahoo)</A> <LI><A HREF="http://www.infoseek.co.jp/">検索サービス(Infoseek)</A> </UL> </BODY> </HTML>
ここまでは、 自分が作成したページやそれが参照する画像のファイルなどは、 すべて手元のコンピュータに置かれていました。 実際にこれらのページをWWW に公開するためには、 これらのファイルをWWWサーバ (正確にはWWWサーバプログラムを実行しているコンピュータ) に転送する必要があります。
サーバへのファイル転送にはさまざまな方法があり得ますが、 ここではftpコマンドを使うものとして例を示します。 ftpによる転送では、 次の手順を踏みます。
1. 転送先のサーバを指定してftpコマンドを起動する。
2. サーバ上でのユーザ名とパスワードを入力する。
3. サーバ上のファイルを置くディレクトリを指定する。
4. バイナリ転送モードにする。
5. 各ファイルを転送する。
6. ftpコマンドを終了する。
では実際にこの手順にしたがって転送しているようすを見てみましょう。
% ftp www.kou1.ne.jp ←ftp コマンドを起動 220 kou1 FTP server ready. →OK の表示 Name: masa ←ユーザ名を入力 331 Password required ... →パスワード必要 Password: xxxxxxx ←パスワードを入力 (表示されない) 230 User masa logged in. →接続成功 ftp> cd /put/htdocs/masa ←ディレクトリを指定 250 CWD command saccuessful. →指定OK ftp> bin ←バイナリモードに変更 200 Type set to I. →変更OK ftp> put home.html ←ファイルを指定して転送 150 Binary data connection ... ... →転送のメッセージ ftp> put ourphoto.gif ←別のファイルを指定して転送 150 Binary data connection ... ... →転送のメッセージ ftp> bye ←これでおしまい 221 Goodbye. →終了OK %
転送が完了したらただちに、 作成したページはWWW経由で世界中からアクセス可能になります。 たとえば、 上の例ではファイルhome.html のURL は
http://www.kou1.ne.jp/users/masa/home.html
になります。
ここまでで、 コンテンツをサーバに転送してサーバから表示できるようになりました。 しかし、 「一応表示できる」 ということと 「プレゼンテーションとして完成した」 ということはまったく別のことです。 作成したプレゼンテーションは、 最終的には世界中の人が (日本語で作ったのな日本語ができる人に限られはしますが) 見ることになるのです。 ですから、 あなたがプレゼンテーションを良くするために1分間を掛けることが、 多数の人の1分間を節約するのだと思ってください。
そのためにはまず、 作成したプレゼンテーションに欠陥がないか確認します。 具体的には、 次の点をチェックしてください。
言うのは簡単ですが、 これらをきちんとチェックするのは結構大変です。 しかしもちろん、 これらのことを自動的にチェックしてくれるプログラムがいくつも用意されています。 そのようなプログラムの助けが借りられるのなら、 ぜひ利用してください。
しかし実は、 もっと大切なのは上に挙げたような 「機械的にチェックできる」 ことがらではなく、 「読み手にとってわかりやすいプレゼンテーションであるかどうか」 なのです。 このために、 次のようなチェックをしてください。
これでようやく、 自分のプレゼンテーションが公開できたことになります。 しかしそれは 「終わり」 ではなく 「始まり」 にすぎません。 プレゼンテーションを公開すれば、 それを見た人からさまざまな反応が (電子メールなどで) あるかも知れません。
また、 そのような反応はなくても、 WWWサーバはいつどのページが取り寄せられたか、 どのようなエラーが発生したかなどをログファイルと呼ばれるファイルに記録していますから、 これを見ることでどのページがどれくらい参照されているか、 どんなエラーが起きているかを知ることができます。
そして、 WWWページは生きものですから、 これらの反応に対応して、 絶えずよりよく改良して行くべきものです。 また、 公開した内容自体も、 状況が変化したり、 新しい情報が現われるのに対応して改訂して行くべきなのです (何か月もほったらかしのWWWページは見るからにつまらなそうに感じられるものです)。 ですから、 ページの公開を続ける限り、 改良と更新は続けて行ってください。
ここまでに学んだHTMLの機能はすべて、 「ここは箇条書き」「ここは見出し」 のようにテキストの論理的構造を規定するものでした。 具体的に箇条書きがどのように整形され、 見出しがどのような大きさの文字で表示されるかはブラウザに任されることになります。
実は、 HTMLには文字の大きさや色など、 見ため (表現) を直接指定するような機能も用意されています。 しかし、 最新のHTML規格 (HTML4.0) ではこのような機能を非推奨 (なるべく使わない) と指定しています。 なぜでしょう? それは、 HTMLで論理的構造と表現を両方とも指定してしまうと、 文章をさまざまな形で利用しようとしたとき、 じゃまになったりするからです。
そこでHTML4.0では、 HTMLそのものは文章の論理的構造を指定するのに用い、 表現を指定するためにはスタイルシートと呼ばれる別の指定方法を併用するという方針になったのです。 スタイルシートとは簡単に言えば、 「<H1>の見出しはすべてゴシック体で」 というふうにHTMLの各要素単位でその表現を指定する機能です。
以下では現在もっとも普及しているスタイルシートの記法であるCSS(直列スタイルシート) を取り上げ、 その機能や使い方を見てみましょう。
HTMLでスタイルシートを使う場合、 次の3通りの指定方法があります。
(1)<P STYLE="color: blue">...</P>のように、 表現を指定したい箇所のタグに<STYLE>属性を指定して、 その値としてスタイル記述を行う。 この方法は、 全体に統一的なスタイルを指定するのには向いていません。
(2)HTMLファイルのヘッダ (<HEAD>...</HEAD>の中) にスタイル記述を書く。 まとめて統一的にスタイルが設定できる。 具体的には次のようにする。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">←HTML4.0 だという指定 <HTML> <HEAD> <TITLE>... 表題...</TITLE> <STYLE TYPE="text/css"> ... スタイル定義... </STYLE> </HEAD> <BODY> ... 本文... ←これまで通り</BODY> </HTML>
(3)HTMLファイルのヘッダで、 スタイルシートを格納したファイルのURLを指定する。 この場合は、 上記の<STYLE>...</STYLE>の代わりに次のように<LINK>タグを使う。
<LINK REL="stylesheet" HREF="スタイルシートファイル">
やや繁雑だが、 複数のHTMLファイルでスタイルシートを共通に利用できるという利点がある。 以下では (2) の方法を使うことにします。
4.4.3 CSSの指定方法
ではいよいよ、 CSSの指定方法を説明しましょう。 CSSではスタイル定義は
セレクタ, セレクタ, …- 規則; 規則; …; 規則"
という形をしています。 セレクタはとりあえずタグ名だと考えてください。 そしてそれぞれの規則は
プロパティ: 値
という形になっています。 たとえばページ全体の背景をうす青にするには、 セレクタBODYに対してbackground-colorプロパティを指定します。
BODY - background-color: #CCCCFF "
また、 H1とH3の見出しすべてに対して青い枠をつけたければ、 borderプロパティとしてsolid、 border-colorプロパティとしてblueを指定します。
H1, H3 - border: solid; border-color: blue "
上の2つのスタイル規則を適用したようすを、 図4.12に示します。
4.4.4 CSSのおもなプロパティ
上の例に出て来たものを含めて、 代表的なプロパティについて紹介しておきましょう。
文字などの色を指定
背景の色を指定
ふちをつける指定。 ふちのスタイルとしては solid(実線のふち)、 dashed(点線のふち)、 double(2本線のふち)、 groove(溝)、 ridge(土手) が指定できる。
ふちの色。 幅や長さは10px(10ピクセル)、 8pt(ポイント 1ptは1/72インチ)、 12mm(ミリメートル) など単位をつけて指定できる。
ふちの幅。
文字の大きさ。 10ptのように長さでも指定できるが、 xx-small、 x-small、 small、 normal、 large、 x-large、 xx-large(それぞれ、 極小、 とても小さい、 小さい、 普通、 大きい、 とても大きい、 極大) という指定もできる。
行間を指定。 200%はダブルスペース。
左右のマージン (余白) を指定。
段落1行目の字下げを指定。 長さのほかに、 10%のように全体幅に対する百分率でも指定できる。
left(左寄せ)、 right(右寄せ)、 center(中央揃え) のいずれかを指定する。
underline(下線)、 line-through(横線抹消)、 blink(点滅) のいずれかを指定。 点滅は目障りだから最少限度にすること。
例として、 先と同じ内容に
H1 - text-decoration: underline " P - text-indent: 20px; border: ridge " UL - background: #CCCCFF "
というスタイルを適用したものを図4.13に示す。
ここまででスタイルシートの機能について説明しましたが、 どのようにスタイルを利用するべきかについては説明しませんでした。 単に 「目立てばよい」 では、 見ためだけ派手になってしまい、 かえって伝えたい内容が読み手に伝わらなくなるため逆効果です。
ですから、 ちょうど内容 (コンテンツ) について行ったように、 いきなり気ままにスタイルをつけるのではなく、 どのようにスタイルをつけるか予め設計するべきなのです。 スタイルの設計に際しては次のことがらを参考にしましょう。
おまけ1:個別的なスタイル指定
ここまででは、 スタイルを 「すべてのH1」 とか 「すべてのP」 のようにタグごとに指定していました。 しかし場合によっては、 「このH1の見出は重要なので赤にしたい」 ということもあるでしょう。 そのような場合はまず、 セレクタとしてタグの代わりに 「クラス」 を指定します。 セレクタにクラス名を指定するときは、 先頭にピリオドをつけて
.important - color: red; font-size: x-large "
のように指定します。 次に、 タグの方はCLASS属性でクラス名 (こんどはピリオドなし) を指定します。
<H1 CLASS="important">.....</H1>
こうすると、 そのH1の見出しには通常のH1のスタイルに加えてimportantクラスとして指定されたスタイルが追加適用されます。
しかし、 これでもまだスタイルの適用範囲はタグの範囲と一緒ですね。 そこで HTMLでは、 スタイル指定に便利な次の2つのタグを用意しています。
たとえば、 段落のある1フレーズだけにimportantクラスを適用したければ、 次のようにするわけです。
<P>この段落は<SPAN CLASS="important">きわめて重要</SPAN>なので…
SPANはこのように段落の内側に使いますが、 もっと広い範囲 (複数の段落、 箇条書き、 見出しなどを含む範囲) を囲む場合にはDIVを使ってください。
おまけ2:要素の独立配置 ここまでのところ、 ある要素にスタイルをつけてもその要素が置かれる位置は他の要素との関係で決まってきました。 しかし、 スタイルシートで要素に position指定を行うことで、 その要素を本来の位置からずらしたり、 他の要素と独立に任意の位置に置いたりできます。 具体的には次のプロパティを使います。
たとえばスタイルの部分で
.overlay {position: absolute; left: 100px; top: 100px;
font-size: xx-large; color: red}
のように指定し、 本文に
<DIV CLASS="overlay"><P>やっほー!</P></DIV>
を入れた様子を図4.14に示します。
