絶対パスと相対パスの使い方。相対パスはこんなに便利!


■WWW(ルートフォルダ・ルートディレクトリ)
□index.html
□logo.gif

■abc(abcフォルダ・abcディレクトリ)
□01.html
□01.gif


■def(defフォルダ・defディレクトリ)
□02.html
□02.gif


■ghi(ghiフォルダ・ghiディレクトリ)
□03.html
□03.gif



■jkl(defフォルダ・jklディレクトリ)
□04.html
□04.gif



画像や、リンク先を指定する時の「ファイルパス」についての説明です。


ファイルのパスの書き方には「絶対パス」と「相対パス」があります。


絶対パスはアドレスを全て記述したものです。「http://〜・・・・」
自分のサイト以外へのリンクに使用します。


相対パスはご自分の見ているファイルから相対的に見たファイルパスを指定します。と言っても難しいですよね。相対パスについては具体的に説明致します。


簡単に言えば、フォルダの構造と考えて頂ければ良いです。パソコンでファイルを管理する時フォルダを利用しますよね。分かりやすく整理するためにフォルダの中にフォルダを作ったりもします。


ホームページも同じようにフォルダ(ディレクトリとも言います)を使った階層状の構造になっています。ホームページのトップページが置かれる最初のフォルダをルートディレクトリと言います。

ルートディレクトリの中にはまた新しくフォルダ(ディレクトリ)を作成して分かりやすく整理していきます。




では上の図を例にパスの書き方を説明します。

1.まず基準となるファイルがindex.htmlだった場合


同じフォルダ(ディレクトリ)へのパス

(例)logo.gifを表示

「 ./logo.gif 」
または
「 logo.gif 」


同じフォルダ(ディレクトリ)を指定したい場合は「./」ピリオド・スラッシュで同じフォルダであることを表しその後にファイル名を書きます。

※「./」は省略することが可能。今後は省略して記述します


同じフォルダにあるフォルダへのパス

(例)01.gifを表示

「 abc/01.gif 」

(例)02.gifを表示

「 abc/def/02.gif 」



この場合は「フォルダ名/ファイル名」や「フォルダ名/フォルダ名/ファイル名」となります。



2.基準となるファイルが04.htmlだった場合

★ひとつ前のフォルダを指定するには「../」(ドット。ドット。スラッシュ)を使う


同じフォルダにあるフォルダへのパス

(復習例)04.gifを表示

「 04.gif 」

(例)03.gifを表示

「 ../03.gif 」

(例)index.htmlへのパス

「../../index.html」

(例)01.htmlへのパス

「../../abc/01.html




ファイルのパスの書き方はホームページ制作で初めにつまずくポイントだと思います。HP作成で避けては通れない項目なのでぜひ理解して相対パスを使いこなして下さい。利用するのは「../」この、ひとつ前のフォルダに戻るという操作だけなので慣れてくれば簡単です。



【練習問題】

答えは記事下に載せておきます

03.htmlを基準とします

1.「03.gif」へのパス
2.「04.gif」へのパス
3.「index.html」へのパス
4.「02.html」へのパス






私が初めてホームページ制作をした時、このファイルのパス(相対パス)が分からなくて、全て絶対パスでサイトを作っていました。ホームページが出来上がってはアップロードして絶対パスを取得。今思えばなんてめんどくさい事をしていたんだろうと思います。


ファイルのディレクトリ分けについてもなかなか理解できず、「全部ルートフォルダでいいじゃん!」と思い全てルートディレクトリで管理していた事を思い出します。しかし、全て同じフォルダで管理しているとそのうちどれがどこにあるかが分からなくなってしまうんですよね。


それがきっかけでHTMLをちゃんと勉強しようと思ったきっかけになったりしています(笑)




問題の答え

1.「./03.guf」または「03.gif」
2.「./jkl/04.gif」または「jkl/04.gif」
3.「./../index.html」または「../index.html」
4.「./../abc/def/02.html」または「../abc/def/02.html」


カテゴリ | HTML | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。