第7回 ../image/002.gif とは?

| | コメント(0) | トラックバック(0)

前回、

このときに値の記述はurl(〜〜)の様にして画像ファイルを相対パス指定します。
相対パスについては重要ですので別の機会で詳しく説明するつもりですが、今のところはわからなくても問題ありません。

と書きましたが、やっぱり気になりますので先に説明することにします。

background-image: url(../image/002.gif);

で、背景にする画像の場所を指定している事は前回書きましたが、問題はこの「../image/002.gif 」が何を意味していて、相対パスとは何かということです。

ファイルを指定するのによく使用されているのは相対パス絶対パスです。


対パス:起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述するのが「相対パス」です。

以下のようなファイル構成があるとして説明します。

[xhtml]┳index.html
┣[css]┳[css2]━test2.css ┃ ┣test.css ┃ ┗bass.css ┗[image]┳001.jpg ┣002.gif ┣003.jpg ┣004.gif 005.gif   

 [ ] はディレクトリ(フォルダ)を表しています。
   

相対的な位置からファイルを表示します。
test.cssからの例で考えると、
特に指定せずにファイル名だけを書いた場合→ 同じディレクトリ内を指定。
例)bass.css

./ ドット一回スラッシュ→ 同じディレクトリ内を指定。(上と同じ意味)
例)./bass.css

../ ドット二回スラッシュ→ 一つ上のディレクトリ内を指定。
例)../index.html

ディレクトリ名/ ディレクトリ名の後にスラッシュ→ そのディレクトリないにあるディレクトリを指定。
例)css2/test2.css

./ディレクトリ名/ 上と同じ意味。
例)./css2/test2.css

../ディレクトリ/ 一つ上のディレクトリ内にあるディレクトリの指定。
例)../image/001.jpg

スラッシュから始まらないのが特徴です。

これらのことからスタイルシートtest.cssで002.gifを指定する場合は、
../image/002.gif
となるので、スタイルシートでは
background-image: url(../image/002.gif);
と記述することになる。

絶対パス:Windowsではドライブ名(「C:\」など)を頂点とする木構造になっています。これに沿って頂点(「C:\」など)から目的のファイルやフォルダまでのすべての道筋を記述するのが「絶対パス」です。
絶対的なパスなので、ファイルがどこにあってもスタート地点は同じです。
絶対パスはスラッシュ(/)から始まります。サーバーの環境によって始まりのスラッシュの後のディレクトリの指定は異なります。調べるにはサーバー管理者にに問い合わせるか、サーバーのヘルプページを見る必要がある。

例)/home/sites/lolipop.jp/users/pupu.jp-kumao/web/index.html

ここでいう絶対パス=URLの事ではない。あくまでもサーバー内のお話です。
で、外部からアクセスする場合の絶対パスは。
http://kumao.net/index.html
となる。


トラックバック(0)

このブログ記事を参照しているブログ一覧: 第7回 ../image/002.gif とは?

このブログ記事に対するトラックバックURL: http://kumao.net/mt/mt-tb.cgi/43

コメントする

KUMAOの押入TOPへ

カウンタ

アーカイブ

ウェブページ

ブログランキング・にほんブログ村へ

このブログ記事について

このページは、kumaoが2008年9月 3日 09:42に書いたブログ記事です。

ひとつ前のブログ記事は「第6回 背景(壁紙)を貼る」です。

次のブログ記事は「第8回リンクを張る」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

books