spacer 始めよう!きれいなサイト作り spacer
 
spacer   spacer spacer
ホームサイトマップ
ボタン-基礎 ボタン-運営 ボタン-リンク ボタン-その他 ボタン スペーサー
spacer spacer
spacer spacer
絶対パス・相対パス  
リンク先を指定するとき、配置画像を指定するときなどは、そのファイルの場所、画像の場所をHTML内に記述する必要があります。
指定方法には絶対パス相対パスがあります。

【絶対パス】
リンク先や画像の保存先を、ブラウザに入力する通常のHPアドレスと同じように"http://"で始まる形で指定します。
例) <a href="http://www.yahoo.co.jp/" >ヤフー!</a>

【相対パス】
起点になるファイルから相対的に場所を指定します。同じサイト内のファイルや画像を指定する場合にこの方法が使われることが多いです。従って、この方法はサイトを作成するにあたって、必ず覚えなくてはなりません。この方法を理解するには、まず
階層を理解しなくてはなりません。
階層とはきわめて簡単に言うとフォルダの関係のことです。皆さんもファイルをフォルダ内に保存する時、よくフォルダの中にまたフォルダを作成してより細かく小分けして管理したりしますね。このフォルダの関係を階層と表現します。
わかりづらいので図を使って説明します。

図中のピンク色のファイル"index.html"を起点とします。

"contents1"フォルダ内の「image1.gif」は同じ階層になり、"HomePage"フォルダ内の
「index.html」は上の階層になります。"contents1"フォルダ内の"images1"フォルダ内にある
「images.gif」 は下の階層になります。

それでは "index.html"を起点(HTMLを書いているページ)にし、相対パスでの指定方法を記します。
・同階層にある"image1.gif"を貼る。

<img src="image1.gif">

・下の階層にある"image2.gif"を貼る。
<img src="images/image2.gif">
フォルダ名/ファイル名 の形で書きます。

・上の階層にある"index.html"にリンクさせる。

<a href="../index.html">
"../"は一つ上の階層を指定する方法です。二つ上は"../../"になります。

・「HomePage」 フォルダ内にある「images」フォルダ内の"image3.gif"を貼る。
<img src="../images/image3.gif">
<< タグについて 2 ファイルの階層意識 >>
  ■WEBデザインの基本
ホーム > Webデザイン > 絶対パス・相対パス ↑このページのトップへ
 
Copyright(C) 2007 Web Design LDI All Rights Reserved.