毎週金曜日配信 What's New 2002/7/12
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第９号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、
どちらかというとやや専門的な作業が中心になります。各種の専用のオーサリン
グソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題■パス（絶対パス、相対パス）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆第６号で取り上げたフォントの大きさについての追記
フォントの大きさをコントロール属性で、larger、smaller について説明しま
したが、Windows環境で Microsoft Internet Explorer における表示に、追記す
ることがあります。
ブラウザのメニューバー「表示」→「フォントの大きさ」で、「小」を選択し
ている時に、larger属性に変化がないことがあります。
MSIEのデフォルト（初期設定）のフォントの大きさは、「small」です。 その
ために、親要素が「medium」のときには、lerger属性で指定しても、デフォルト
のsmallからのlagerとなって、mediumが選択され、変化がありません。
フォントの大きさを「中」にすると、はっきりと変化します。Ｗ３Ｃでは、デ
フォルトの文字の大きさを、 medium にするようブラウザメーカーに呼びかけて
います。 Netscape社は新しいバージョン（6.0）から勧告に従っていますが、マ
イクロソフト社のブラウザはまだ対応しておりません。
Windows上のMSIEだけに起きる不思議な現象です。バグでしょうか？？
◆前号でのURLの記述ミスがありました。お詫びして訂正します。
a要素のname属性の見本として、
（正）http://www.scollabo.com/banban/tips/diction.html
また、過去のマガジンで、当サイトの URLが表示できない場合があります。
ディレクトリの引越し（移動）をしたために生ずるエラーです。お手数ですが、
トップページからお入りください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆パス
先週講座で取り上げた、アンカーの続編です。
アンカー a要素での属性に href があります。これには URLを記述しますが、そ
のパスについて解説します。ちょっと初心者には難しいかもしれませんが、とり
あえずお付き合いください。
◆フォルダ
私たちはHTML文書を作って、ローカル（自分のパソコン）のフォルダに入れて
保存しています。
同じフォルダ内にあるHTML文書をリンクさせるには、あまりパスというものを
考えなくていいのですが、いずれたくさんのHTML文書や画像、スタイルシートな
どでいっぱいになります。
そこで少し整理が必要になって、各種のファイルを区別して種類別のフォルダ
を作って移動しておいたほうが、あとあと便利になります。HTML文書もコンテン
ツの内容別に分けて整理し、それぞれフォルダを作って格納しておきます。
そうしたときに初めて「パス」を意識します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ディレクトリ・・ www.scollabo.com/banban/ の場合
当講座のサイトの、サーバのディレクトリ（階層）のごく一部です。サーバは
UNIX系のOSなので、フォルダとは呼ばず、ディレクトリと呼んでいます。
ディレクトリとは、みなさんのフォルダと考えてください。/ はディレクトリ
を表しています。
/banban
┣━━━━ index.html
┃
┣━━━━ /lectur
┃ ┃
┃ ┗━━ ht.html、styel.html、websafe.html等
┃
┣━━━━ /term
┃ ┃
┃ ┗━━ w3c.html、xt.html、java.html等
┃
┣━━━━ /ref
┃ ┃
┃ ┗━━ ref.html、css.html等
┃
┣━━━━ /css
┃ ┃
┃ ┗━━ stylesheet.css、banbansheet.css等
┃
┗━━━━ /images
┃
┗━━ title.gif、sample.png等
簡単に述べますと、banbanという名のフォルダには、index.htmlという文書と、
lectur、term、ref、css、imagesという名のそれぞれのフォルダが入っています。
lecturというフォルダには ht.htmlなどのHTML文書が約10本くらい入っています。
また、termというフォルダには、w3c.html、xt.html、java.htmlなどのHTML文書
が入っています。
cssというフォルダにはスタイルシートがあり imagesというフォルダには各種
画像があります。
/tips、/lectur、/css、/images などのフォルダは index.html から見て下位フ
ォルダにあたります。
index.html から見た /tipsの中の w3c.html文書を index.html からリンクする
には、index.html文書中で
<a href="tips/w3c.html">W3C</a> と記述します。
これはtipsフォルダのw3c.htmlへのURLパスという意味です。
逆に w3c.html からindex.html へリンクするには、w3c.html文書で
<a href="../index.html">Home</a> と記述します。
ここでは、tipsフォルダの外のindex.htmlへのURLパスという意味になります。
つまり、１つ上のフォルダへのリンクということになります。
では、tipsフォルダのw3c.htmlから見た refフォルダのref.html文書では
どのようなパスの記述となるでしょうか？
<a href="../ref/ref.html">レファレンス</a> と記述します。
これは、tipsフォルダの外のフォルダであるrefフォルダを指し、ついで目的の
HTML文書ref.htmlへリンクするURLパスとなります。少しややこしいけれど、あ
らかじめ各フォルダの構造図などを描いておくと理解が早くなると思います。
◆基本として
同じ階層（フォルダ）のファイルにリンクする場合、
<a href="ファイル名">〜</a>
１つ下の階層のファイルにリンクする場合、
<a href="フォルダ名/ファイル名">〜</a>
１つ上の階層にリンクする場合、
<a href="../ファイル名">〜</a>
１つ上の階層の別の階層のファイルにリンクする場合
<a href="../ディレクトリ名/ファイル名">〜</a>
上記ディレクトリでは、banbanというフォルダに、下位の階層（フォルダ）と
していろいろフォルダがあることが理解できたと思います。
これらをすべて「相対パス」と呼びます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆早速HTML文書を作って相対パスの実験をしましょう。
その前に、いつも使っているフォルダの中に２つのフォルダを作ってください。
フォルダの作り方はわかりますよね。どうしても分からなかったらOSを明記して
メールください。こそっと教えます。
フォルダの名前を abc と xyz としておきましょう。半角小文字で書きます。
フォルダができたら、３つばかりHTML文書を作ります。少し大変ですが頑張って
ください。
テキストエディタを立ち上げて下記のようにタイプします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>１ページ目</title>
</head>
<body>
<p>これは１つ目のページです。</p>
<p>
<a href="abc/page.html">２ページ目</a>に移ります。<br>
<a href="xyz/page.html">３ページ目</a>に移ります。
</p>
</body>
</html>
入力が終わったらHTML文書として保存します。半角小文字で
page.html と拡張子 .html を忘れないようにしてください。なお、保存場所は
今まで使っていたフォルダに保存してください。
続いて２つ目のHTML文書を作ります。
同じくテキストエディタで新規に、次のようにタイプします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>２ページ目</title>
</head>
<body>
<p>これは２つ目のページです。</p>
<p>
<a href="../peag.html">１ページ目</a>に戻ります。<br>
<a href="../xyz/peag.html">３ページ目</a>に移ります。
</p>
</body>
</html>
入力が終わったらHTML文書として保存します。同じように半角小文字で
page.html として、別のフォルダに保存します。同じ名前ですがフォルダが違う
ので別の文書になります。
保存場所は先ほど述べたように、abc という名前のフォルダに保存してくださ
い。先ほど作ったHTML文書と同じフォルダですと上書きされてしまいますので、
必ず保存場所を確認するように注意してください。
それでは最後の３つ目のHTML文書を作成します。
同じくテキストエディタで新規に、次のようにタイプします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>３ページ目</title>
</head>
<body>
<p>これは３つ目のページです。</p>
<p>
<a href="../peag.html">１ページ目</a>に戻ります。<br>
<a href="../abc/peag.html">２ページ目</a>に移ります。
</p>
</body>
</html>
入力が終わったらHTML文書として保存します。 半角小文字で page.html とし
て、別のフォルダ、xyz という名前のフォルダに保存してください。これも保存
時に場所を間違わないように気をつけてください。
すべて無事に出来上がったら、最初に作ったHTML文書をダブルクリックして、
ブラウザで確認してみましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
１つ目のHTML文書から
<a href="abc/page.html">２ページ目</a>に移ります。
<a href="xyz/page.html">３ページ目</a>に移ります。
これは今いる場所から、ひとつ上のフォルダにリンクする時にそのフォルダの
名前とフォルダ内の文書名およびその形式（拡張子・この場合はHTML文書）を
指定してリンクしたものです。
拡張子がないと正しくリンクできません。書き漏れのないようにしましょう。
何故、拡張子が必要なのかというと、ブラウザではいろんな形式の文書など
をサポートしています。例えば、HTML文書と CSS文書が同じ名前になった時に
識別する上でも必ず必要になってきます。
もともと拡張子というのは固有の文書を識別するためのものなのです。
Web上の拡張子はたくさんあります。gif、png、jpg、text、ps、mpeg、html、
swf、css、zip 等など。いずれ講座を進めていく中で、こうした拡張子と出会
うことになります。
２、３つ目のHTML文書から
<a href="../peag.html">１ページ目</a>に戻ります。
<a href="../xyz/peag.html">３ページ目</a>に移ります。
<a href="../abc/peag.html">２ページ目</a>に移ります。
１ページ目に戻る時には、今いるそれぞれのフォルダの外に出なければなりま
せん。そのために、../ と付記してからリンク先の文書名を指定します。
これが上位への階層へリンクするためのパスとなります。
違うフォルダのページに移るときにも同じように ../ としてフォルダの外
に出て、あらためて行きたいフォルダの名前を、そして文書名を指定します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆絶対パス
URLには今まで勉強してきた「相対パス」のほかに、基準となる「絶対パス」が
あります。
通常、これはサーバーにHTML文書があるときに有効になります。ローカルでは
オンライン状態でない場合、あまり意味がありません。
下記のURLを参照してください。
http://www.scollabo.com/banban/index.html
これが絶対パスです。上記の URLはこの講座のサイトのトップページに当たり
ます。私のサイト内でこのページに戻る時には、ほとんど「相対パス」で記述し
ていますが、こう書くこともできます。
<a href="http://www.scollabo.com/banban/index.html">Home</a>
絶対パスで指定したリンクの記述方法です。おもに他のサイトにリンクする時
などに使用します。
◆target属性
絶対パスを記述して、新たなウィンドウで表示する場合は、target属性を使い
ます。ただし、HTML4.01では、あまり推奨されない属性なので、DTD（文書型宣言）
では、Transitionalを使用します。Strictでは対応していません。
別ウィンドウで表示させる絶対パスの記述
<a href="http://www.scollabo.com/banban/" target="_blank">ばんばん</a>
target属性については、フレームを作る講座であらためて詳しく解説します。、
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆パスの記述における利用
これまで述べてきたパスは、単にリンクだけでなく、画像や動画、外部にある
スタイルシートやスクリプトを呼び出すときにも使います。
解説の中で出てくる URLとは、パスの記述のことです。整理したフォルダなど
には名前が付きますが、パスの記述にフォルダ名を指定します。
HTML文書が必要とする画像ファイル、動画やアプレットなどのファイル、リン
クする場合の、ファイル名などパスの記述にはたくさんの使い方が出来ます。
リンクをする時には、href属性を用いましたが、次週の画像を扱う場合には、
src属性を使います。
なお、パスの記述時に、大文字小文字を区別します。 INDEX と index は違う
ものと判断されますので気をつけましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆何故、トップページは index.htmlなのか？
この違いが分かりますか？
http://www.scollabo.com/banban/index.html
http://www.scollabo.com/banban/
クリックすればどちらも同じページに移動できます。しかし、何故記述が違う
のでしょうか？
通常、 WEBサイトのトップページは、index と呼ばれるHTML文書とされていま
す。ブラウザなど（ユーザーエージェントと呼ばれています）がリクエストした
URLはHTTPサーバーのレスポンスヘッダから、index.htmlを探しにいきます。
ただし、パスの記述がHTML文書名まで記述してある場合には、該当するファイ
ルを探し出してきます。ディレクトリ（フォルダ名）までしか記述がないときに
は、自動的にそのフォルダ内のindex.htmlを探しにいきます。つまり
http://www.scollabo.com/banban/ では、scollabo.com サイトのbanbanという
ディレクトリからindex.htmlを探して表示することになります。
ただし、index.html が存在しない場合はエラーになります。
index とは、まさに索引で、本来トップページのみを「ホームページ」と呼びま
すが、当講座では他のページでも一応分かりやすく説明するために「ホームペー
ジ」と呼んでいます。
やがて読者の皆さんもホームページをサーバーにおいて公開する時には、トッ
プページとなるHTML文書は、index.htmlという名前にしておきましょう。そこか
ら他のページにリンクするアンカーを記述するようにします。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆WAI（Web Accessibility Initiative）におけるリンクの注意点
アクセシビリティを高める上で、リンクの記述には配慮が必要です。つまり、
訪れるユーザをサイト内で迷子にさせないよう、今どこにいるのか、これからど
こに行けばいいのか、前のページに戻るにはどうしたらいいのかなどを配慮する
必要があります。
アクセシビリティとは、あらゆるユーザへのバリアフリーを提供することに他
なりません。 WEBは世界中に情報を提供することです。その世界中のユーザの中
には、肉体的なハンディキャップを持つ人もいます。視覚・聴覚・肢体不全の方
も少なくありません。
技術の進歩は目覚しく、そういったハンディキャップを負う人たちもインター
ネットに参加しています。音声ブラウザ、点字ブラウザなども登場し、多くの人
を支援しています。その時に、リンクの表示がお粗末なのは、少なくないユーザ
を迷子にさせ、行き場を失ってしまいます。適切なナビゲーションを心がけるこ
とは、制作者の必須の課題です。
IBMのアクセシビリティ・センター
http://www-6.ibm.com/jp/accessibility/a-solution/index.html#navskip
色覚異常と云う物
http://www6.sppd.co.jp/just/index.html
WEBアクセスを考える会
http://thinkman.cup.com/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
Ｗｅｂページは画像が使えるので、より分かりやすく説明しています。あわせて
過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/backnm_009.html
次回は、Webで扱う画像について詳しく説明します。（７月19日配信予定）
なお、教材を使用します。すでにサイトよりダウンロードできるように用意し
てあります。この講座でいつも使っているフォルダにダウンロードしておいてく
ださい。
・ダウンロード先
http://www.scollabo.com/banban/magazine/material.html
Windows および Macintosh に対応しています。なお、教材は圧縮しています
がUNIX系を除いてダブルクリックで自己解凍します。
Windows版＝LHA形式 Macintosh版＝sit形式 UNIX系＝tar形式
あわせて zip形式も掲載しましたので、お好みのアーカイブをお使いください。
UNIX系（Linux、FreeBSDなど）のOSの方はお手数ですが、解凍ソフトを使って
ください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ご質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、また他に持って
いるブラウザ、使っているテキストエディタなど、なるべく分かりやすく制作環
境を明記していただけると回答しやすくなると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
の内容で記述の誤りがある場合、叱咤と罵声と共に私まで突きつけていただくと
幸いに思います。
配信の変更・中止はこちらです。個別の手続きは受け付けていませんので、ご面
倒でも各自でお願いできれば助かります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
暑い日が続いたと思ったら、台風で大雨。そしてまた暑い日。夏の本格的な到
来を伝えています。
ブラウザの覇権争いが、Linuxにも波及してきました。
Linux では既に、Netscaoe、Mozilla がサポートしていますが、新たに北欧ノル
ウェーの Opelaが加わりました。私たちユーザには歓迎ですが、激しいシェア競
争の中で、独自タグや、独自のスクリプトを用いるのだけは、勘弁願いたいもの
です。
ホームページを作る時、いつも違うブラウザ、違うプラットフォームでの差異
を確認していますが、この作業だけでもかなり辛いものがあります。
ちょっとでも違いがあれば修正してまた確認、この連続です。Ｗ３Ｃの権威が
もう少し上がれば、このような非生産的な作業がなくなると思っているのですが
まだまだ先のようです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容について、無断で使用することを固く禁じ
ます。
Copyright(C) 2002 banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com