初心者のためのホームページ作り:第115号

                 隔週金曜日配信 What's New 2005年5月13日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

       初心者のためのホームページ作り/Web for beginner
           http://www.scollabo.com/banban/

                        <第115号>

              banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
 成に役立つことを目的に配信されております。

  当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
 なお、このマガジンは等幅フォントでお読みいただくと快適に読めます。

   今週のコンテンツ
    ■ やさしいHTML (第8回) --- パスと URL
    ■ Tips --- Webとネットワーク接続の仕組み

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆やさしいHTML --- パスと URL

 HTMLの最大の特徴がハイパーリンク、つまり他のリソースへの参照ということ
 が挙げられるでしょう。簡単に言えば、他のドキュメントやページに移動した
 りすることの仕組みが非常に簡単に行える点にあります。

 ハイパーリンクの参照先を通常 URL (Universal Resource Locator) と呼ばれ
 ますが、正確には URL とは URI (Uniform Resource Identifers) のサブセッ
 トとして定義されています。その意味では本来、ハイパーリンクが示す参照先
 リソースを URIと呼ばれますが、本講座では URLで統一して解説します。

 ■パス
 「パス」とは、参照先が示すファイルの位置を示すもので、具体的には目的の
 ファイルが、どのディレクトリの中にあるのかを示すものです。

 パスには「相対パス」と「絶対パス」と呼ばれる2つのタイプがあります。
  相対パスは、現在のドキュメントから見た他のドキュメントの位置を示し、
 絶対パスは現在の位置にかかわらず、参照先の位置 (アドレス) を直接指定す
 る (http://・・・ で始まる位置指定) ものです。

 絶対パスは比較的分かりやすい仕組みなので詳しい説明は省きますが、初心者
 にとって難解なのが相対パスなのではないでしょうか。

 ■相対パス (ディレクトリの相関関係) 
 相対パスの設定とは、平たく言えば「今いる場所」から参照先のファイルの場
 所とファイル名を指定することにあります。

 Webサーバではディレクトリ (Windowsではフォルダと呼ばれる) と呼ばれる階
 層構造を持っており、サーバのトップに「ホーム」となる indexファイルが置
 かれます。
  以下の図は当サイトのディレクトリ構造の一部を示すものです。


               index.html
   ┏━━━┳━━━┳━━━┳━┻━┳━━━┳━━━┳━━┳━━━┓
  images  css   jvs  senior  tips  link   php  rev   daf
             ┏━┻━┓       ┏━┻━┓
             xml  basic      ref  sample

  この図のように、ディレクトリ最上位には index.html というファイルがあ
 り、これがサイトのトップページに当たります。そのファイルの下位に各ディ
 レクトリが配置され、そのディレクトリには各種ファイルが格納されています。
  また、senior、及び phpディレクトリには更に下位層のディレクトリも格納
 されています。

 ではパスの記述について説明しましょう。

 □下位ディレクトリへの参照
 トップページから下位ディレクトリにあるページにリンクする場合は
   ディレクトリ名/ファイル名

 トップページから2つ下位層のファイルへのリンクは、
   ディレクトリ名/下位ディレクトリ名/ファイル名

 具体的な例として、tipsディレクトリに配置されている index.htmlへは
   <a href="tips/index.html">Tips</a> となります。

 また、phpディレクトリの下位ディレクトリにあるrefディレクトリへは
   <a href="php/ref/index.html">PHPレファレンス</a> となります。

 上位に位置する場所から、下位層のファイルを参照するときには以上のような
 パスの記述となります。

 □下位ディレクトリか上位ディレクトリの参照
 では、下位層にあるディレクトリ内のファイルからトップページを参照する場
 合のパスの設定について説明します。
  上位ディレクトリを指定するときには、パスを示すスラッシュを置きます。
 スラッシュが1つならば1つ上位のディレクトリを意味し、2つならば2つ上
 のディレクトリを指します。

  1つ上位のホームにリンクする場合、
   <a href="../index.html">Home</a>

  2つ上にあるホームにリンクする場合は、
   <a href="../../index.html">Home</a>

  この記述を分解して説明すると
    ../../index.html
     ┃ ┃  ┃
    ┃ ┃  ┗トップページのファイル名
    ┃ ┗上位ディレクトリ (今のディレクトリを抜ける)
    ┗さらに上のディレクトリ (さらに上位のディレクトリを抜ける) 

 □同位ディレクトリへの参照
 次に、同位ディレクトリへのリンクについて解説します。先ほどのディレクト
 リ構成図の中で、sipsと phpは同じ層のディレクトリ関係にあります。また、
 senior内の xmlとbasicも同じ層に位置します。

  このように同じ層の異なるディレクトリへのリンクは
   ../同位ディレクトリ名/ファイル名

 具体的な例として例えば、tipsディレクトリ内のファイルから phpディレクト
 リのファイル参照は
   <a href="../php/index.html">PHP入門</a> となります。

 同位ディレクトリ内のその下のディレクトリを参照する場合には、
   ../同位ディレクトリ名/下位ディレクトリ名/ファイル名

 パスはディレクトリの相関関係をしっかり理解できれば、その設定は難しいこ
 とではありません。慣れないうちは自分なりにディレクトリ構成図を作成して
 どのファイルからどのファイルを参照 (リンク) するのかを追っていくと自然
 と分かってくることでしょう。

 同一サイト内へのリンクや文書参照は、絶対パスを使うよりも基本的に相対パ
 スを使うことで、DNS参照の手間が省け移動の速度を維持できる利点もあります。

 ■URL
 URLとはネットワーク上にあるリソースの位置を示す意味を持ち、画像や動画、
 あるいは外部スタイルシートやスクリプト・ドキュメントなどのファイルを参
 照する場合に用いられます。

  このことから URLはその位置は必ずユニーク (世界で絶対唯一) でなければ
 なりません。同様に大文字と小文字を厳格に区別します。また、当たり前の話
 ですが全角の日本語文字なども禁止となっています。
  読者からの質問で、画像が表示されないという主な原因はパスやファイル名
 などの間違いのほかに、ファイル名に全角を使っているという点もあります。

 URLは単純なリンクから、より幅広い応用に用いられ、Web制作者にとって大変
 にありがたい仕組みでもあります。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Tips --- Webとネットワーク接続の仕組み

 今やスタンドアローン型のコンピュータは姿を消しつつあります。つまり、何
 らかの形でネットワークに接続されていることが当たり前になりました。
  個人が家庭でネットワークを構築しているのは珍しいほうですが、少なくと
 もインターネットという広大なネットワーク空間を利用していることが定着し
 つつあります。

 コンピュータ同士を接続するための通信手順 (プロトコル) である TCP/IP の
 標準搭載はネットワーク接続を容易にしました。今やほとんどのコンピュータ
 がこれを利用しています。
  コンピュータ同士をつなぐためには、IPアドレスという32ビットで示される
 数値が最低限必要となります。これは接続機器に対してユニークに割り当てら
 れ TCP/IPによって接続が可能となります。

 インターネットもまったく同様で、IPアドレスを基本的な位置情報として利用
 しています。しかしながら数値だけのアドレスは人間にとって理解することが
 困難なため DNSサーバが登場し、ドメイン名とアドレスを管理しています。
  インターネットに接続して Webブラウザからあるページを訪れるとき、その
 リクエストは最初に DNSサーバに接続されて IPアドレスを取得します。

 こうして初めて Webページを見ることができます。そのとき、リクエストに対
 する応答 (レスポンス) によりデータが受け渡されて、一旦ネットワークから
 接続を切り離されます。つまり、接続しっぱなしということではありません。
  これはネットワークのトラフィック (渋滞) を避けるための仕組みです。

 閲覧者がページを移動するときに再度接続し DNSサーバを参照し新たなアドレ
 スを取得し目的のページを閲覧することができます。インターネット接続はこ
 れの繰り返しで行われています。

  このとき問題になるのが認証です。例えば有料のサイトでログイン (つまり
 認証を得ること) した後に、他のページに移動したとき、再度接続時に認証し
 なくてはならないという面倒なことになります。
  そこで「セッション管理」という手続きを経て、閲覧者のクッキーを利用し
 その閲覧者が認証済みであることをサーバ側で理解させます。

 私たちがインターネットを利用して有用な情報を得るその陰で、実は非常に複
 雑な動作があることを知っておくことは Webページ作成に役立つことでしょう。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで。

 今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
 てください。
  Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
 しています。あわせて過去の記事のおさらいも掲載しています

 (今週のおさらい)
  http://www.scollabo.com/banban/magazine/review_115.html

  次回は、5月27日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
 ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
 と思います。
  ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
 てくれると思います。

 発行者 ばんばん
 協力  スズキ・コラボレーション http://www.scollabo.com/
 配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

  誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

 ■バックナンバー こちらで公開しています。
 プレーンテキスト  http://www.scollabo.com/banban/magazine.html
 各号のおさらい  http://www.scollabo.com/banban/magazine/
 アーカイブ    http://www.scollabo.com/banban/daf/archive.html
 まぐまぐ     http://backno.mag2.com/reader/Back?id=0000090196

 ■配信の変更・中止はこちらです。
 個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
 かります。
  当サイトにて http://www.scollabo.com/banban/magazine/top.html
  まぐまぐにて http://www.mag2.com/m/0000090196.htm

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

<えでぃた〜ず・る〜む>

 いつもなら深夜 (というより午前) にメールマガジンを配信しているのに、今
 回に限って当日の朝に配信することになりました。このところ夜遅くまで仕事
 に追い回されていたため、帰宅してからの作業が困難だったためです。

 ゴールデンウィークはいかがお過ごしでしたか? 私はもっぱら妻に催促され
 て庭のメンテナンスに精を出しておりました。駐車場と犬のいる庭を区切る塀
 を手作業で作り上げました。
  近くのホームセンターでラティスを買い込んで、それを深緑色にペイントし
 柱を立てラティスをつないだ簡単なものでしたが、それでも結構時間がかかり
 出来上がったのは連休最終日でした。
  久しぶりに体を動かしたせいか、いささか疲れてしまいました。しかし、出
 来上がったフェンスは我ながら見事な出来栄えだと自己満足しています。何か
 を作り上げる大変さと喜びを十分に味わった黄金週間でした。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆著作権について
 個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応
 じておりません。記事中の内容について、無断で使用することを固く禁じます。
  なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
 自由に使っていただいても差し支えありません。

            Copyright(C) 2002-2005  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


This page is Valid HTML 4.01! 最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com