ホームページできるかな/超初心者さん向きHP作成
Web dekirukana.net
サイトメニュー タグの簡易プレビュー 206 Web Ranking お気に入りに追加
トップページ
HPのはてな?
HPはどこにある?
HPのなかみ
HTMLって?
相対・絶対パス
つくってみよう!
用意するもの
作成手順
HP用素材
基本の小技集
HPを公開!
もっと知ろう!
タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム
メール
メールフォーム BBS
掲示板

リンク
リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献
このページはホームページを作り始めてから読んでもらってオッケーです。
すぐには必要ないと思います。疑問に思ったときに戻ってきてくださいね。

相対パス・絶対パス

ファイルを指定(リンクや画像を表示)するときに気をつけなければならない「相対パス・絶対パス」。
これはある位置から見たときの他のファイルの位置のことです。
相対パス指定・・・サイト内(ディレクトリ・フォルダ内)でのファイル指定
URL指定/絶対パス指定・・・インターネット上(URL)でのファイル指定


相対パス指定

相対パス指定はサイト内(ディレクトリ・フォルダ内)でのファイル指定です。
マイドキュメントのなかにホームページ用のフォルダ「ホームページ」を作ったとします。
マイドキュメント

そしてその「ホームページ」のなかに、HTML文書「index.html」の他に画像用の「img」フォルダを作り、
ホームページ

さらにその「img」フォルダ内に「icon.gif」と季節ごとに「spring」「summer」「autumn」「winter」の4つのフォルダを作ったとします。
img

「spring」「summer」「autumn」「winter」の4つのフォルダにはそれぞれJPG画像が入っているとします。
spring,summer,autumn,winter

すると各ファイルから見た相対パスは以下のようになります。
>「ホームページ」以下各フォルダをクリックすると展開します(要JavaScript)。
新しいウィンドウ・フレームあり フレームなし

相対パス
「index.html」から見た「spring」フォルダ内の「spring.jpg」への相対パスは以下のようになります。
img/spring/spring.jpg 

その反対に、「spring.jpg」から見た「index.html」への相対パスは以下のようになります。
../../index.html 

「spring.jpg」から見た「summer.jpg」は以下のようになります。
同じ階層にあるものでも、フォルダで分けていると、まず上の階層を指定してからフォルダ→フォルダ内のファイル、となります。
../summer/summer.gif

相対パスでリンク
<a href="img/spring/spring.jpg">「spring.jpg」へリンク</a>
-
<a href="../../index.html">「index.html」へリンク</a>
-
<a href="../summer/summer.gif">「summer.jpg」へリンク</a>

相対パスで画像を表示
<img src="img/spring/spring.jpg" width="横幅" height="高さ">
-
<img src="../icon.gif" width="横幅" height="高さ">
※「spring.jpg」等の位置から見た「icon.gif」の場合



URL指定/絶対パス指定

インターネット上(URL)でのファイル指定です。
例えば、上記の「ホームページ」フォルダの内容を http://laz.chu.jp/ のサーバースペースにアップロードしたとすると、以下のようになります。

URL指定/絶対パス

「index.html」へのパス
http://laz.chu.jp/index.html

「icon.gif」へのパス
http://laz.chu.jp/img/icon.gif 

「spring.jpg」へのパス
http://laz.chu.jp/img/spring/spring.jpg 


※本来の絶対パスは / から始まるホームディレクトリからのファイル指定です。
CGIを設置するときくらいしか使わないと思いますが、本来の意味として覚えていてくださいね。
例)
/home/sites/lolipop.jp/users/id/web/index.html
/home/sites/lolipop.jp/users/id/web/img/icon.gif 
/home/sites/lolipop.jp/users/id/web/img/spring/spring.jpg
相対パス・絶対パス HTMLって? ホームページのなかみ ホームページはどこにある? 作成手順 作成サンプル 用意するもの ホームページ用素材 HPを公開!FFFTP 基本の小技集 コラム 特殊文字 記号のよみかた いろいろな色 タグの簡易プレビュー
Copyright(C) 2003-2005 laz All rights reserved.
動作確認 Win98・WinXP/IE6 MacOS9.1/IE5 当サイト内の無断使用及び無断転載を固く禁じます。