ほーむぺーじ初歩の初歩 5

「パス」について。「相対パス」「絶対パス」とか言われるものですが。
「ディレクトリ間でのファイルの位置関係を示す方法」。自分のホームページから他のサイトへのリンクとかには「URL」を使いますが、この所謂「パス」てのは自分のホームページ内に限って使うものだと思ってください（厳密には違うけど「ホームページ作成」の初歩段階ではそんな感じでＯＫ）。

「絶対パス」はひとまず置いといて、「相対パス」。

仮にホームページ用の「home」というフォルダを作り、画像もHTMLファイルも全部同じフォルダ内に置いてしまう場合。

◆例えば「index.html」に
・画像「001.gif」を表示させる時は
　　⇒<img src="001.gif" alt="画像説明">
・HTMLファイル「gallery.html」へのリンクを表示させる時は
　　⇒<a href="gallery.html">ギャラリーへ</a>
こんな感じで「index.html」に「src="ファイル名"」「href="ファイル名"」と、ファイル名だけ書き込む形で済みます。実はこの書き方が「パス」の最初の一歩。

最初の内はこんな風に１つのフォルダに全ファイル放り込むのが一番楽。しかしファイルが増えてくると、同じフォルダ内では同じファイル名が使えないとか、あのファイルどれだっけーとか、段々整頓するのが厳しくなってくるので、下層フォルダ（ディレクトリ）を作って管理するようになるのですが、その段階で「パス」を使いこなす必要が出てきます。

---

例えばこんなディレクトリ構成だとして。

◆「wwwフォルダのindex.html」に
・「imgフォルダ内の001.jpg」を表示させたい場合は
　　⇒<img src="img/001.jpg" alt="画像説明">
・「sub01フォルダ内のindex.html」をリンクさせたい場合は
　　⇒<a href="sub01/index.html">sub01へ</a>
と「wwwフォルダのindex.html」に書き込みます。

「src="フォルダ名/ファイル名"」「href="フォルダ名/ファイル名"」。
「現在地（wwwのindex.html）」から見て「同じ階層（フォルダ、ディレクトリ）」内の「xxフォルダ」内の「xx.xxファイル」へ、という書き方。これが「相対パス」。

※別の書き方で「src="./img/001.jpg"」「href="./sub01/index.html"」となりますが、「./（ピリオド・スラッシュ）」というのが「同じ階層内」という意味で、この「./」は省略可能。

◆さて「sub01フォルダ内のindex.html」に
・「sub01フォルダ内のimgフォルダ内の001.jpg」を表示させたい場合は
　　⇒<img src="img/001.jpg" alt="画像説明">
・「sub01フォルダ内のpage1.html」をリンクさせたい場合は
　　⇒<a href="page1.html">ページ01へ</a>
となります。さっきまでと要領は同じですな。

◆同じく「sub01フォルダ内のindex.html」に
・「wwwフォルダ内のimgフォルダ内の001.jpg」を表示させたい場合は
　　⇒<img src="../img/001.jpg" alt="画像説明">
・「wwwフォルダ内のindex.html」をリンクさせたい場合は
　　⇒<a href="../index.html">トップページメニューへ</a>
・「sub02フォルダ内のindex.html」をリンクさせたい場合は
　　⇒<a href="../sub02/index.html">sub02へ</a>
※「../（ピリオド・ピリオド・スラッシュ）」というのが「１階層上」の意味。２階層上なら「../../」となります。

文字で説明読んでも分かりにくいかと思いますが、実際に作って試すとすんなり分かるかも。要領飲み込めるまで、れっつとらい。

---

「絶対パス」というのはピリオド使わないスラッシュ「/」から始まる書き方ですが、ホームページ初心者にはスルー推奨かも。自分のパソで適当にフォルダ作ったホームページをレンタルWebサーバにアップするには、相対パスのが楽だったりします。相対パスを自然に書けるなら、絶対パスの概念も分かるんではないかなーとか（概念自体は単純）。「ルートディレクトリ」とか、サイトのディレクトリのスタート地点の認識が必要になるのですが、Webサーバスペースレンタル屋さんによって扱いが色々な感じで把握が（とゆーか説明が）面倒。解説サイト様によっては「URL（http://〜）」使うのが絶対パスという説明をされてるところもあるですが、実際はちと違うもの。のはず。

例として、この忍者ブログでテンプレートHTMLに「<a href="/">トップページへ</a>」と書くと、「自分のブログ」の一番最初（トップ）のページへのリンク、「<a href="/Category/0/">カテゴリー０へ</a>」で「カテゴリー０」へのリンクとなるのですが、これが「絶対パス」な書き方。「スタート地点（トップページ）」を「"/"」として、下層ディレクトリへと単純に一方向に下がる書き方なのでした。