「ここから２つめの十字路を右に曲がり、左手の３つめのビルの５階」
のように、その場所から見た(相対的)位置を示すものです。
【利点】
・パスが短くなる。
・サーバーにアップロードしなくてもサイト内のリンクチェックができる。
・ローカル(＝PC内)で動作確認ができる。
相対パスの書き方
「.」：起点となるフォルダ
「..」：上位のフォルダ
「/」：UNIX 系OSの区切り
１）パスは左から順番に読む
２）同じ階層移動は、「なにもなし」か「./」（ドットが１つとスラッシュ）
３）一つ上の階層へ移動は、「../」（ドットが２つとスラッシュ）
４）一つ下の階層へ移動は、「/」（スラッシュだけ）
５）上の階層に移動する場合は、フォルダを表示しない
６）フォルダを指定するときは、「/」を付ける
サラリーマンの副業奮戦記より図解
前提：このような構造のWEBサイトがあったとすると
【同じ階層どうし】
Q:「ファイル２.html」から「ファイル３.gif」への相対パスは？
ファイル２.htmlにファイル３.gifの画像を表示するには、
<img src="ファイル3.gif">
または、<img src="./ファイル３.gif">
または、<img src="./ファイル３.gif">
になります。
【階層を下がる】
Q:「ファイル１.html」に「ファイル３.gif」を表示する時の相対パスは？
同じ階層に行き先が複数あり、
どのフォルダの中かを指定しないと迷子(表示不可能)になる。
<img src="フォルダA/ファイル３.gif">
または<img src="./フォルダA/ファイル３.gif">
または<img src="./フォルダA/ファイル３.gif">
【階層を上がる】
Q:「ファイル２.html」内に「ファイル１.html」へのリンクをはる時の相対パスは？
階層を上がる場合は一本道のみ。
ファイル２.htmlの上は、フォルダAしかないので
「.」と「/」のみでさかのぼって指定が可能。
「.」と「/」のみでさかのぼって指定が可能。
ファイル２.htmlにファイル１.htmlのリンクを張る場合は、
<a href="../ファイル１.html">ファイル１へのリンク</a>
または、
<a href=".././ファイル１.html">ファイル１へのリンク</a>
授業で作成した自分のWEBサイトを例に考えてみましょう。
まず最初に
問題1：common_styleのindex.htmlを編集し
WEB上にアップロードすると
スタイルシートが突然反映されなくなりました。
<head>〜</head>内のスタイルシートとのリンクを見ると
以下のように書いてありました。
<link href="file:///Macintosh HD/Users/iMac00/Sites/myweb/common_style/basic.css" rel="stylesheet" type="text/css" />
この１行をどのように修正すれば正しく表示されますか？
正解は<link href="basic.css" rel="stylesheet" type="text/css" />
解説：「file:///〜」で始まるパスはWEB上では動作しない。
なぜならWEB上には「Macintosh HD」「Users」「iMac00」「Sites」
などの名前のフォルダは無い。
あるのは自分が操作しているMacの中だけです。
=Macの中でDreamweaverからSafariでプレビューした時にしかCSSが反映されません。
などの名前のフォルダは無い。
あるのは自分が操作しているMacの中だけです。
=Macの中でDreamweaverからSafariでプレビューした時にしかCSSが反映されません。
↑画面下部のURL欄を見てみましょう。
ここがfile://〜で始まっている場合、
表示されているファイル一覧は、自分のサイトのフォルダの外にあるデータです。
自分のサイトのフォルダの外のデータはWEB上では使えません。
WEB上で使うデータは全て[Machintosh HD]の中の[User]の中の[iMac○○]の中の[サイト]の中にある[自分のサイトのフォルダ]に入れてから編集作業をはじめましょう。
このフォルダ内しか契約したサーバとつながっていません。
間違いの原因(2)
↑このダイアログが出た時に「いいえ」を選択している
コピーします「はい」を選択していれば、
自分のサイトのフォルダの中にコピーデータが作成保存されます。
=WEB上で使えます。
自分のサイトのフォルダの中にコピーデータが作成保存されます。
=WEB上で使えます。
この階層の間違いを
cssのファイルリンク以外でおこすと
cssのファイルリンク以外でおこすと
「画像が表示されない」、
「リンクが正しくはれていない」、
などの問題が起きます。
「リンクが正しくはれていない」、
などの問題が起きます。
問題2：「WEB提出課題のリンクをクリックしても
自分が提出(=アップロード)したhtmlが表示されない」
原因：あなたのデータは別の間違った場所にアップロードされています。
チェック1：オリジナルで勝手にファイル名やフォルダ名をつけたり
つづりが間違っていない？
ファイル名やフォルダ名は全てURLの一部です、1文字でも違うとhttp://2010yoko14145.web.fc2.com/2012/
のページのリンクから表示されません。
例えば
http://○○.web.fc2.com/
が自分のサイトの場合、
sample2の課題は
「sample2」のフォルダの中にある「index.html」というファイル名のものだけ
を表示します。
を表示します。
チェック2: Macの中のシステムのフォルダ名を変えていない？
[Machintosh HD]の中の[User]の中の[iMac○○]の中の[サイト]の中にある[自分のサイトのフォルダ] をDreamweaverに設定しています。
この5つのフォルダ名を変えてしまうとDreamweaverから正しく編集できません。
チェック3：ファイル名やフォルダ名にスペースを入れたり、
全角文字を使っていない？ または、-と_を間違えていない？
スペースが１つでも入っているとURLが変わります。
URL欄やhtmlコード内にスペースを打っていても正しく表示されません。
(なぜならURL上のスペースは「%20」という表示に変わります。
全角文字は長文の%と英文字の組み合せ表示に変わります。)
どうやってなおすの？
この5つのフォルダ名を変えてしまうとDreamweaverから正しく編集できません。
チェック3：ファイル名やフォルダ名にスペースを入れたり、
全角文字を使っていない？ または、-と_を間違えていない？
スペースが１つでも入っているとURLが変わります。
URL欄やhtmlコード内にスペースを打っていても正しく表示されません。
(なぜならURL上のスペースは「%20」という表示に変わります。
全角文字は長文の%と英文字の組み合せ表示に変わります。)
どうやってなおすの？
まずSafariのウインドウ下に灰色のバーが無い人は
「表示」から「ステータスバーを表示」を選択。
http://2010yoko14145.web.fc2.com/2012/
「表示」から「ステータスバーを表示」を選択。
http://2010yoko14145.web.fc2.com/2012/
のページへ行き、提出物の自分の名前の部分にマウスを移動してみましょう。
マウスでカーソルを重ねると
例えば、css-lessonの課題の場合このような表示になります。
http://○○.web.fc2.com/css-lesson/css-lesson.htm
この場合、自分のサイトのフォルダの中の
「css-lesson」というフォルダの中の「css-lesson.htm」という名前のファイル
でなければ表示されません。
ファイルやフォルダがほかの名前になっている場合→ファイル名・フォルダ名をなおす。
ファイルのある場所が間違っている場合→正しい場所に移動する。
※移動の際に「更新しますか？」というダイアログが出た時に
必ず「はい」を選択して下さい。
要注意
「いいえ」を選択すると、そのファイルのhtmlコード内の
全てのファイルのパスを手打ちで修正しなければ正しく表示されなくなります。
ファイルのある場所が間違っている場合→正しい場所に移動する。
※移動の際に「更新しますか？」というダイアログが出た時に
必ず「はい」を選択して下さい。
要注意
「いいえ」を選択すると、そのファイルのhtmlコード内の
全てのファイルのパスを手打ちで修正しなければ正しく表示されなくなります。