ウェブページの作成と情報発信

2007年7月11, 18日　担当：國分

第1.2.2版　2007年7月17日

目次

教育用システムでウェブページ公開をするための準備
なぜウェブページなのか
著作権
必要最小限のHTMLファイル
文書構造と要素、視覚的効果
リンクと絶対パス、相対パス
要素とタグ
HTMLに入れてはいけない文字と文字実体参照
自分で作ったHTMLを採点してみよう
用語集
参考文献

教育用システムでウェブページ公開をするための準備

注意

公開される範囲は千葉大学限定（chiba-u.jp, chiba-u.ac.jpドメイン）で、外部からは見えない。

概要

教育用システムでは個人のアカウントの~/public_html/に置いたHTMLファイルが自動的に公開され、他人からはhttp://www.students.chiba-u.ac.jp/~アカウント名/でアクセスできる。例えばアカウントがz9h1234の人が~/public_html/index.htmlというファイルを作ったとすると外からはhttp://www.students.chiba-u.ac.jp/~z9h1234/index.htmlというURLで読むことができる。

ただし、この~/public_html/はWindowsからは操作することができないので、以下の手順でシンボリックリンク（Windowsのショートカットと同じようなもの）をWindowsのホームディレクトリに作成してWindowsからも自由に書き込めるようにする。

手順

  1. linuxを起動する。Windowsを使っている場合はシャットダウンから再起動を選ぶ。画面にPress F8 to view menu.と表示されたら、すかさずF8を押す。windowsかlinuxの選択肢が表示されるので、↓を押してlinuxを選択し、Enter。
  2. ユーザ名とパスワードを入力。
  3. 起動したら左下の赤い帽子のメニューからシステムツール->ターミナルを選ぶ。
  4. Terminalが起動し、画面に[z9h1234@m2c000 ~]$ のように表示される。この$をプロンプトと呼ぶ。
  5. プロンプトに続けてmkdir public_htmlと入力する。
  6. エラーが出なければ続けて次のコマンドを順番に実行する。２番目のコマンドでa+rxの後にスペースを空けてピリオドを１つ打つことに気をつける。
    chmod a+rx public_html
chmod a+rx .
cd win_home
ln -s ../public_html
exit
    これらのコマンドを簡単に説明すると、５ではpublic_htmlというフォルダを作成、６の１行目でこのフォルダのアクセス権を変更、２行目でホームフォルダのアクセス権を変更、３行目でwin_homeフォルダ（Windowsでのマイドキュメント）に移動、４行目でこのフォルダの中に５で作ったpublic_htmlフォルダへのシンボリックリンクを作成、５行目でターミナルを終了している。
  7. デスクトップ上の「z9h1234のホーム」を開き、public_htmlというフォルダができていることを確認する。（上の５−６の手順はここからグラフィカルなインターフェースで行うこともできるが、説明が長くなりすぎるのでこのようにした。）
  8. Linuxを終了し、Windowsで再起動する。
  9. マイドキュメントの中にpublic_htmlというフォルダができているはずである。この中にHTML文書を作成すると他の人がこのフォルダの内容をウェブブラウザで見ることができる。ただし、文書の作成後に次のことをする必要がある。
  10. メモ帳でHTML文書を作成した場合、保存後にそのファイルのプロパティを開き、「セキュリティ」タブの中の「読み取り」の許可のチェックボックスをオンにする。

「メモ帳」でHTML文書を作成する時の注意点

なぜウェブページなのか

ウェブページとはインターネット上のWWW（World Wide Web）という仕組みに従ってやり取りされる文書の総称で、俗に「ホームページ」とも呼ばれるが、本来のホームページは別の意味なので使わないほうがよい。最も普通のウェブページはHTML文書であり、通常の文章の中に「リンク」を埋め込むことにより関連する情報を多彩な方法で提供することができるようになっている。また、文字だけでなく、画像、音声、動画なども埋め込むことが可能になっている。HTML文書は静的であり、ページの著者が編集しない限り自動的に変更されることはない。これに対し、動的なページもあり、CGIという仕組みによってそのページがアクセスされるたびにプログラムがページを生成して送り出すことができる。このため、動的なページはリアルタイムな情報を発信するのに適している。

WWWが作られたのは1989年と比較的最近のことであるが、使うコンピュータの種類に依存せず、多様な情報を複雑に関連づけて発信できることから急速に拡大し、現在ではWWW抜きの生活は考えられない。

このような背景から、ウェブページを自分で作って情報を発信することはコンピュータリテラシーには必要不可欠な技術である。ただし、最近ではブログ（blog, weB LOGの略）と呼ばれる仕組みが整備され、HTMLについて一切知らなくても同様の情報発信ができるようになってきた。それでも、その背景にある技術を習うことは意義がある。例えば、自動車の仕組みを全く知らなくても運転はできるが、仕組みを知ることによって効率的に運転ができるし、車が故障したときの対処も適切にできるだろう。

できるだけ多くの人に情報を発信するためにはユニバーサルデザインの考え方が欠かせない。例えば、世の中には文字が読めなかったりマウスの操作ができない人もいる。そのような人達も等しく情報が手に入ることが理想である。目が見えない人のためにはウェブページの読み上げソフトというものが存在している。見えないわけではないが、小さい文字は読みにくいという人もいる（最近、私もそうなりつつある）。さらに、テキストブラウザ（Lynxというソフトが最も有名）というものも存在していて、文字だけしか表示できない端末からウェブページを閲覧している人もいる。ウェブページをHTMLの規則に従ってうまく書くことにより、ページの読み上げソフトや個人のフォントの大きさの設定、テキストブラウザなどが正しく働き、情報の受け手に有利になる。ユニバーサルデザインを念頭に置いてページのデザインをするようにしよう。ユニバーサルデザインやWeb標準については神崎 (2000)や益子 (2005)を参照。（残念ながら千葉大の図書館にはない。）

著作権

ウェブページを公開する上で常に問題になるのが著作権である。基本を理解して正しく情報を発信しよう。

人のページにある文章や画像はすべて他の人が著作権を持っている。それらを勝手に切り取ってきて自分のページに貼り付けることは違法行為である。もしもどうしても参照したい画像や文書があったらコピーペーストではなくリンクを張るようにする。「リンクフリー」と断っていないページでも、勝手にリンクしても法律上は問題ないとされている。ただし、画像が必要なときもその画像に直接リンクを張るのではなく、ページ全体のアドレスにリンクするようにする。ページそのもののアドレスが公開されている限り、それをリンクすることは全く問題ないのだが、中に使われている画像に直接リンクすることはそのページの作者の意図するデザインを改変することになるため、著作権の侵害と見なされる。また、法律上は勝手にリンクすることに問題はないとしても礼儀として作者に知らせておくことは悪いことではない。

著作権に関する詳しい議論は「新しい大学情報リテラシー」第５章、特にp. 141–145を参照すること。さらに詳しい情報は図書館にインターネット著作権に関する本がある。蔵書検索で「ネット著作権」をキーワードに検索したところ、8冊の図書があった。また、図書館にはないが、中村(2006)がネット上の著作権問題について具体例を挙げて説明している。

このページのトップへ

必要最小限のHTMLファイル

これだけあれば正しいHTMLファイルである。最後に紹介するHTML文法チェックでも100点になる。世の中に対して、「私は一応HTMLの何たるかを勉強して、それを実践しようとしています」と言っていることになる、と思われる。ただし、環境によってcharset=UTF-8というところを適宜修正すること。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title lang="ja">題名</title>
</head>
<body>
<p>本文</p>
</body>
</html>

1-2行目はDOCTYPE宣言といって、おまじないのようなものである。この文書がHTML4.01版という規則で書かれていることを表明している。
3行目ではhtml文書の始まりを宣言し、しかもこの文書が日本語で書かれていることを明記している。
4行目はhead要素の開始。
5行目も再びおまじない。charsetは使用する環境によってUTF-8, Shift_JIS, EUC-JP, ISO-2022-JPのいずれかを指定する。ユニコード (UTF-8) が世界的な標準となりつつあるので、特別な理由がない限りUTF-8を使うようにする。
6行目は文書の題名を表している。ここで書いた内容は多くの場合、ブラウザウインドウの上部に表示される。HTML全体とは違った言語を指定できることに注意。（ただし、対応していないブラウザもある。）
7行目でhead要素が終わる。
8行目はbody要素の始まり。
9行目がこの文書の本文。文章は必ず<p>や <h>、<ul>、<table>などのブロック要素の中に書かなくていはいけない。最も普通には上の例のように<p></p>を使う。
10行目でbody要素が終わる。
11行目でこのHTML文書の終わりになる。この後にも何かを書くことはできるが、文法的には間違いであり、ブラウザによっては予期しない動作をする。（表示されたりされなかったり、エラーが出たり）

このページのトップへ

文書構造と要素、視覚的効果

１つの文書を考えてみる。まず、前書きがあり、目次があり、第1章、第2章などと章立てがあり、１つの章は見出しと複数の段落からなり、段落の中には文があり、文字があり、図や写真も含まれる。これら、文書として意味のある構造を持つものを要素と呼ぶ。ウェブサイトや個々のページにも同様な構造がある。一つのページに上に挙げたすべての要素を含めることもできるし、一つの章を一つのファイルで表すようにしてファイル間の関係を明記することでウェブサイトそのものを一つの文書とすることもできる。

HTMLはこの文書構造を明確にし、複数のファイルの間に関係を持たせること（リンクする、リンクを張るなどという）を目的として設計された。

一方、文書構造にはそれに対応した視覚的効果が付随する。例えば、章の見出しは字を大きくする、太くする、色や活字を変えるといった視覚的効果によって目立つようにしている。本来HTMLは文書の構造を記述するためにあり、視覚的効果を設定するのではない。視覚的効果を設定するためにはスタイルシート（CSS）を用いる。しかし、時間の関係もあるため、本講義ではCSSは扱わず、HTML本来の姿である、文書の構造化を中心とする。

リンクと絶対パス、相対パス

複数のファイルを関係づけてサイトを構成する場合、ページの数が増えるに従って関係のあるファイルをまとめてフォルダに入れたほうが都合が良くなる。この時に問題となるのがファイルを相互ににリンクする時のURIの指定の仕方である。一般には自分のサイトの文書にリンクする時は相対パス、他のサイトにリンクする時は絶対パスを使う。

絶対パスはブラウザの上のほうに表示される指定方法で、"http://some.server.jp/page.html"のように表記される。自分のサイトのファイル同士を絶対リンクで指定することもできるが、ファイルをフォルダ間で移動すると全てを書き換える必要が出てくる。

相対パスはHTMLファイルが置かれているフォルダを基準にして、その中に含まれるフォルダや一つ上のレベルのフォルダを指定する方法である。そのため、ファイル同士の相対的なフォルダ構造に変化がないかぎりリンクを書き換える必要がない。

フォルダ構造の例

この図においてindex.htmlからchapter1.htmlへのリンクは<a href="chapter1/chapter1.html">となる。「chapter1/」の部分がフォルダを表している。chapter1.htmlからindex.htmlは<a href="../index.html">で、「../」が現在のファイルが置かれているフォルダを含むフォルダ（親フォルダ）を示す。また、chapter1.htmlからsection1-1.htmlは同じフォルダなので単に<a href="section1-1.html">とすればよい。

さらに、index.htmlからpractice2.htmlへのリンクは<a href="chapter2/practice/practice2.html">となる。その逆のpractice2.htmlからindex.htmlはややわかりにくいが、<a href="../../index.html">で２つ上の階層のフォルダにリンクできる。また、chapter1.htmlからchapter2.htmlは<a href="../chapter2/chapter2.html">となる。

このページのトップへ

要素とタグ

上でも説明したとおり、HTML文書はいろいろな要素から構成される。それらの要素を示すのがタグ<xx>○○○</xx>の役割である。要素は通常開始タグ<xx>で始まり終了タグ</xx>で終わるが、終了タグをもたない要素や終了タグが省略可能な要素もある。タグは大文字で書かれることが多いが、大文字、小文字どちらでも構わない。XHTMLという、XMLを使ったHTMLの再定義版（今後、HTML文書の標準になると思われる）では小文字しか許されないのと、大文字はソースを読む時に邪魔になるという理由で私は小文字を使っているが、このあたりは個人の好みでよい。（英語をnative languageとする人が大文字だけの文を見ると何かを強調している、または叫んでいる感じがするらしい。）

さらに、要素には「属性」と呼ばれるものが付くことがある。上の例では3行目と6行目のlang="ja"がそれである。html要素のlang属性がjaである、などと言い、この場合はHTML文書が日本語で書かれていることを示している。

ブロック（レベル）要素とインライン要素

上にも書いたとおり、文書には構造があり、いろいろな要素で構成される。ここで、文、文字、図などは文書の一番小さい構成要素で、これらをインライン要素（インラインレベル要素）と呼ぶ。インライン要素が集まって章や段落、箇条書き、表などを構成する。これをブロック要素と呼ぶ。

ブロック要素には<div>, <table>, <ul>, <ol>などがある。ブロック要素の中にはインライン要素を入れることができるが、インライン要素の中にブロック要素を入れることはできない。また、ブロック要素の中にはdivやliのようにインライン要素と他のブロック要素を入れることができるものや、blockquoteのように直接インライン要素が置けず、他のブロック要素を含む必要があるものもある。

例えば


<div lang="ja">
<p>段落1</p>
<p>段落2</p>
</div>
<div lang="en">
<p>Paragraph 1 <strong>HTML</strong> primer</p>
<p>Paragraph 2</p>
</div>

などと書ける。ここで<strong>は文字の強調で、インライン要素の１つである。しかし、次のように書くと正しいHTMLとならない。


<strong>
<p>段落1</p>
<p>段落2</p>
</strong>

これはインライン要素の中にブロック要素が入っているので間違いになる。

ブロック要素

よく使われるブロック要素を説明する。

h1〜h6
見出し（<h>eading）を意味する。h1が一番大きな見出しで、以下順番にh2、h3と使用する。ここで言う「大きな」は字の大きさではなく（実際にブラウザ上でも大きく表示されるけれど）、論理的な構造の大きさのこと。もし、字の大きさや色を指定したければ、スタイルシートを使う。この文書でもh2〜h4要素に使っている。
p
１つの段落（<p>aragraph）を意味する。
div
これは例えば本の章や節にあたり（<div>ision）、複数の段落をまとめて言語を指定するような使い方が考えられる。一般的にはスタイルシートと組み合わせて文字や背景の色を指定するのに使われている。このため、ブロックレベルスタイルコンテナとも呼ばれる（span要素を参照）。ホームページ作成ソフトで作ったページを見てみると<div>が頻繁に使われているのがわかる。
table
表を作るのに使う。一番簡単な2行2列の表はこのようになる。

<table>
<tr><td>1行1列</td><td>1行2列</td></tr>
<tr><td>2行1列</td><td>2行2列</td></tr>
</table>
この中で、td要素もブロックレベルであり、インライン要素は当然として、ul, olなども含むことができる。
ul
箇条書きの１つ、番号なしリスト (Unordered List)。項目の順番が重要でない時に使う。ブラウザ上では項目の先頭に・（中黒、bullet）がついて表示されることが多い。
ol
箇条書きの１つ、番号付きリスト (Ordered List)。手順を説明する時など、項目の順番が必要な時に使う。ブラウザ上では項目の前に番号が自動的に振られる。
li
箇条書きの一項目 (List Item)。<ul>にも<ol>にも使われる。番号付きリスト（ol）の例を挙げる。
  1. 一番初め
  2. 二番目
  3. 三番目
このソースは次のようになる。

<ol>
<li>一番初め</li>
<li>二番目</li>
<li>三番目</li>
</ol>
dl
箇条書きの１つ、定義リスト (Definition List)。用語の定義などにも使われる。この文書のこの部分に使っている。ulやolと違ってliは使わず、代わりにdt (definition term)とdd (definition description)を使う。この文書のソースを参照。
pre
整形済みテキスト（<pre>formatted text）。あらかじめ改行や空白などで形を整えた文章をそのまま表示したい時に使う。ただし、タブを使ってはいけない。
hr
横線（Horizontal Rule）。文書内の大きな区切りを目立たせたい時に使う。終了タグはない。
address
ページの著者とその連絡先で、すべてのウェブページに書くべき要素の一つ。ページの先頭か最後に書くのが普通。この文書でも使っている。トップページから順番にあるページにたどり着いた場合は誰が書いたページなのかわからないことはあまり考えられないが、検索エンジンなどで直接あるページが表示された時に著者の情報が含まれていなければ誰が書いた文書なのか全くわからないこともあり得る。ブラウザ上では斜体字で表示されることが多いようだが、そのような決まりがあるわけではないので、文字を修飾したい場合は当然スタイルシートを使う。

インライン要素

よく使われるインライン要素を説明する。

最も基本となるのはタグに囲まれていない、単なる文字列で、これが文書の主要な構成要素である。

a
アンカー要素（<a>nchor）。ハイパーテキストを実現するための最も基本となる要素。<a href="URItext">リンク</a>とすると「リンク」という文字列がリンクとなり、URItextで指定したURIの情報を表示する。同じHTML文書内の別の場所へリンクするには飛びたい先のテキストに<a name="a_name">飛び先</a>と名前をつけ、リンクするテキストを<a href="#a_name">ここから飛び先にいく</a>とすればよい。実例はこのページの目次と各見出しのソースを参照。
img
画像（IMaGe）を表示する。画像はファイルとしてローカルサーバにあってもいいし、URIでネット上の画像を指定してもよい。<img src="ファイル名やURI" width="横幅" height="縦" alt="画像が表示できない環境で画像の代わりになるテキスト">とすると指定した画像が文章の中に１つの巨大な文字として表示される。終了タグがないことに注意。
em
強調（<em>phasis）。単語や文を目立たせたい時に使う。一般的なブラウザでは斜体字で表示されるが、必ずそのようにする決まりがあるわけではない。英語の文章で外国語が混じっている時に斜体字を使う慣習があることに由来すると思われる。必ず斜体字で表示したい時は<i>を使う（<i>talic）が、これは物理的要素といって、推奨されていない。ただし、学名などは強調の意味はないが斜体字で書くことが決まっているのでi要素を使うことに全く問題はない。それでもやはりその部分が学名であることがわかるようにしておくことは重要であろう。私の場合は、em要素にCSSを使って学名であるという意味を持たせている。<em class="sci_name">Echinocactus texensis</em>などとし、スタイルシートで斜体字を指定する。
strong
さらに強い強調。一般的なブラウザでは太字で表示される。emと同様、そのように表示する決まりがあるのではない。必ず太字で表示したい時は<b>を使う（<b>old）が、これもi要素と同様の考慮が必要。
sup
上付き（<sup>er script）。32Pのように使う。[<sup>32</sup>P]
sub
下付き（<sub> script）。H2Oのように使う。[H<sub>2</sub>O]
br
強制改行（<br>eak）。一つのブロック要素は改行なしで表示されるが、どうしても途中で改行したいときに使う。終了タグはない。
span
インラインレベルスタイルコンテナ。文字、あるいは行単位で言語などを指定するのに使う。また、CSSと組み合わせてフォントや色を指定する。div要素を参照。

このページのトップへ

HTMLに入れてはいけない文字と文字実体参照

HTMLの文章の部分には入れてはいけない文字がある。半角の不等号（<, >）とアンパーサンド（アンド記号、&）である。これらはそのまま書くとタグやここで解説する文字実体参照の一部と見なされ、ブラウザがHTMLを解釈する時に不都合が生じるためである。それでは私はここでどうやって“<”と書いたのだろうか。全角の記号を使う手もあるが、このページのソースを見てみればわかるように、“<”は“&lt;”と書いてある。このように&で始まり;（セミコロン）で終わる、一連の文字の固まりを文字実体参照（character entity reference）という。

また、charset=UTF-8（と、多分ISO-2022-JPも）の場合は問題ないのだが、Shift_JISで文書を書いた場合、アクセント記号付きの半角文字を入れることができない。このときに例えば「ウェブページはスペイン語では“página web”と言います」などと書きたい場合も文字実体参照を使う。また、数学の記号やギリシャ文字なども用意されている。これらを表にまとめた。詳しくはHTML4.01仕様書の文字実体参照の項を見ること。

文字実体参照表
文字文字実体参照記号の意味
&&amp;
<&lt;
>&gt;
–&ndash;エヌダッシュ (en dash)
—&mdash;エムダッシュ (em dash)
‘&lsquo;左引用符
”&rdquo;右二重引用符
¿&iquest;逆疑問符
¡&iexcl;逆感嘆符
×&times;乗算記号
÷&divide;除算記号
±&plusmn;プラスマイナス
∪&cup;和集合
∩&cap;積集合
∀&forall;すべての〜について
∂&part;偏微分記号
∇&nabla;ナブラ演算子
á&aacute;
É&Eacute;
ü&uuml;
ñ&ntilde;
ò&ograve;
Ç&Ccedil;
î&icirc;

自分で作ったHTMLを採点してみよう

Another HTML-lint

このページではHTMLファイルの文法を採点してくれる。別に100点でないHTMLがブラウザで全く表示できないわけではないが、HTMLの主旨をよく理解し、文法にそった書き方をすることでより多くの人があなたのページを問題なく読むことができるはずである。

このとき、チェック方式はFILEを選び、「ファイルを選択」ボタンを押してチェックしたいファイルを指定すること。前にも述べたように教育用システムのウェブページは外部からは見ることができないため、このチェックプログラムもURLからは読むことができない。

さて、結果はどうだったろうか。ここで何か減点されている時はどうしてそうなのか解説を読んで理解するように努める。解説を読んでもよくわからない時はHTMLの解説書やウェブ検索で答えを探す。ただし、多くの解説書は他の本の孫引きをしていることがあるので、本来ならばHTML4.01仕様書を参考にすべきである。しかしやはり、英語の壁は大きいかも。この文書の日本語訳が出ているが、自分で探すこと。

このページのトップへ

用語集

CSS（スタイルシート）
Cascading Style Sheetsの略。ウェブページの文脈では単にスタイルシートとも言う。HTMLと組み合わせて画面上の体裁や読み上げ時の動作を細かく指定する仕組み。現在の最新規格はCSS2（CSS2仕様書）。凝ったレイアウトを作りたいと思ったら覚える必要があるが、ウェブページ作成用ソフトを使うのであれば全く気にする必要がないのも事実。ウェブページ作成用ソフトが吐き出すコードが美しくない・論理的でないと考える人はやはり手で打つのがよい。[このページに使っているCSSの例を見る]
HTML
HyperText Markup Languageの略。ハイパーテキストを実現するための規則。文書の構造を論理的に記述し、ハイパーテキストを作りやすくするのが本来の目的であり、文書を飾るために定義されたものではない。とはいえ、フォントを変えたり、色やサイズを変える仕組みは一応含まれている。文書を本格的に飾るためにはCSSという別の仕組みを使うのが正解。ただし、この授業では触れない。HTMLにはいくつかのバージョンが存在するが、最新の4.01を使うべきである（仕様書）。ウェブページ作成用ソフトを使うのであれば全く気にする必要がないとも言えるが、ウェブページ作成用ソフトが吐き出すコードが美しくない・論理的でないと考える人はやはり手で打つのがよい。
URI
Uniform Resource Identifierの略。インターネット上に存在する情報資源の場所を指し示す記述方式。いわゆるインターネットアドレスであり、インターネットにおける情報の「住所」にあたる。たとえば、http://www.h.chiba-u.jp/florista/kokubun/kokubunJ.htmlのように記述する。URLとも呼ばれるが、両者は厳密には同義ではない。
XML
eXtensible Markup Languageの略で、HTMLと同様SGMLのサブセットである。様々な文書をデータベース的に構造化するのに用いる。最近ではOpenDocumentという、オフィス文書の国際的標準形式がXMLで書かれていることで話題になった。
ローカルサーバ
この場合、HTMLファイルが置かれているサーバ（www.students.chiba-u.ac.jp）、さらに言ってしまえばあなたのpublic_htmlフォルダのこと。

このページのトップへ

参考文献

千葉大学情報処理教科書編集委員会（編）(2006) 新しい大学情報リテラシー．オーム社．ISBN 4-274-20224-0.

神崎正英 (2000) ユニバーサルHTML/XHTML．
毎日コミュニケーションズ．ISBN 4-8399-0454-5. ユニバーサルデザインに配慮したHTML文書の作り方だけでなく、World Wide Webの歴史やウェブサイト全体の設計・デザインまで踏み込んだ多彩な内容。ウェブページ作成初心者には少し高度すぎるかもしれないが、将来にわたって使い続けられる本。中を貫く哲学はこのページと一致しており、この本があれば私はこのページを書く必要がなかった。

益子貴寛 (2005) Web標準の教科書−XHTMLとCSSでつくる“正しい”Webサイト．
秀和システム．ISBN 4-7980-1092-8. XHTMLとCSSを使った「標準」のウェブデザインを解説している。ユニバーサルデザイン・ユニバーサルアクセスについて１章をさき、関係するガイドラインや法令に従ったスタイルも紹介している。

中村俊介 (2006) 「どこまでOK?」迷ったときのネット著作権ハンドブック．
翔泳社．ISBN 4-7981-0942-8.

ビレッジセンターHTML&SGML研究チーム (1999) 正しいHTML4.0リファレンス＆作法．第２版．ビレッジセンター出版局．ISBN 4-89436-111-6. HTML4.01Strictでなく4.0Transitionalを解説しているなど、内容が古くなりつつあるが、HTMLのあり方の基本やユニバーサルデザインを教えられた本。これを読まなかったら私のHTMLの理解は全く違ったものになっていた。ただし、現在は絶版のようである。

W3C (1998) Cascading Style Sheets, level2. CSS2 Specification. http://www.w3.org/TR/REC-CSS2/

W3C (1999) HTML 4.01 Specification. http://www.w3.org/TR/html401/

教育用ホームへ | プログラミング入門へ | 研究用ホームへ

2005年7月24日　作成
2005年8月6日　参考文献を追加しました。HTML/CSS規格書となっていたところを仕様書と変えました。
2005年8月7日　Studentsドメインでのウェブページの公開法を入れました。レポートの課題1の解答例です。その他、細かい修正をしました。
2005年8月9日　参考文献の"ユニバーサルHTML/XHTML"が手に入りましたのでコメントを追加しました。
2005年11月8日　一部修正、第1.1版として公開。
2006年3月12日　参考文献（益子, 2005）を追加、著作権について一部修正しました。
2006年4月18日　参考文献（新しい大学情報リテラシー）を追加しました。
2006年7月11日　本年度用完成版を第1.2版として公開。
2006年7月25日　細部の修正、第1.2.1版。
2007年7月12日　著作権の項に図書館にある参考文献を追加。
2007年7月17日　「リンクと絶対パス、相対パス」を追加、細部の修正、第1.2.2版。

國分　尚　(Hisashi Kokubun)
hkokubun at faculty.chiba-u.jp