絶対パスと相対パスとは？

絶対パスと相対パスは難しいです、ですがWebページを作成する上でとても大切なことです。
リンクを貼ったり画像を表示したりする場合、絶対パスと相対パスの知識が必ず必要となるからです。

♦︎まず、パスとは？

パスとは、HTMLファイルや画像ファイルなどのファイルの場所を指定する方法のことです。
いろいろなサイトにリンクしたり、自分のサイト内の別のページにリンクしたりする場合や、画像を表示したい時に、それらのファイルがどこにあるのかを指定する必要があります。

♦︎絶対パス

絶対パスとは、http://から始まるアドレス（URL)を使ってファイルの場所を指定することです。
つまり、私のサイトにリンクするには、http://cybergreenweb.com/index.htm（通常、index.htmの場合はindex.htmの記入は省略できます）のように記入します。
この絶対パスは、おもに他のサイトにリンクしたりする場合に使います。お気に入りのサイトにリンクを貼ったり、レンタル掲示板にリンクする場合はこの絶対パスでパスを指定します。

♦︎相対パス

次に相対パスの説明をします。この相対パスとは、基準となるファイルから見て任意のファイルの場所を指定します。
例えば同じフォルダ（ディレクトリ）の中にindex.htmlとlink.htmlがあって、index.htmlからlink.htmlにリンクを貼りたい場合は<a href=”link.html”>～のようにファイル名のみの記入でファイルの場所を指定することが出来ます。

♦︎同じフォルダ内のファイルを指定

cybergreen.html

index.html
link.html
top.gif

同じフォルダ内にあるHTMLファイルや、画像ファイルを相対パスで指定する場合は、ファイル名のみで指定できます。
絶対パスで記入する場合はhttp://cybergreeweb.web.com/link.htmlのようにアドレスにファイル名をつけます。

index.htmlからlink.htmlにリンクする
相対パス

<a href="link.html">

絶対パス

<a href="http://cybergreen.web.com/link.html>

index.htmlにtop.gifを表示する

相対パス

<img src="top.gif">

絶対パス

<img src="http://cybergreen.web.com/top.gif>

♦︎1つ下のフォルダにあるファイルを指定

cybergreen_html(フォルダ)

index.html
content

⬇︎

content(フォルダ)

content-1.html
model.gif

1つ下のフォルダにリンクしたいファイルや、表示したい画像がある場合は、どのフォルダにそれらのファイルがあるのかを指定します。相対パスで指定する場合はフォルダ名/ファイル名のように記入します。
左の例を使って説明すると、index.htmlからcontentフォルダの中にあるcontent-1.htmlにリンクするには<a href=”content/content-1″>のように記入します。

つまり、<a href=”どのフォルダの/何のファイル”>というように指定すればいいだけのことです。

index.htmlからcontent-1.htmlにリンクする
相対パス

<a href="cyber/index.html">

絶対パス

<a href="http://cybergreen.web.com/content/content-1.html>

index.htmlにmiddle.gifを表示する

相対パス

<img src="content/model.gif">

絶対パス

<img src="http://cybergreen.web.com/content/model.gif>

♦︎2つ下のフォルダにあるファイルを指定

cybergreen_html(フォルダ)

index.html
content

⬇︎

content(フォルダ)

blog

⬇︎
blog(フォルダ)

winter.html
snow.gif

2つ下のフォルダにあるファイルを指定する場合はフォルダ名/フォルダ名/ファイル名のように記入します。

  • 上の例で説明すると、相対パスで、index.htmlからcontentフォルダの中にあるblogフォルダにあるwinter.htmlにリンクするには、
    <a href=”content/blog/winter.html”>のように記入します。

    ここでは、２つ下のフォルダにあるファイルを指定する方法を説明しましたが、さらに下層にフォルダを作ることも出来ます。その場合は、さらにフォルダ名の指定を増やせばいいだけですよね。

    index.htmlからwinter.htmlにリンクする

    相対パス

    <a href="content/blog/winter.html">

    絶対パス

    <a href="http://cybergreen.web.com/content/blog/winter.html>

    index.htmlにsnow.gifを表示する

    相対パス

    <img src="content/blog/snow.gif">

    絶対パス

    <img src="http://cybergreen.web.com/content/blog/snow.gif>

    ♦︎1つ上のフォルダ内のファイルを指定

    cybergreen_html(フォルダ)

index.html
top.jpg
content

⬇︎

content(フォルダ)

blog.html

    １つ上のフォルダ内のファイルを指定する場合は、上に上がることを示す「　../　」を記入します。左の例で説明しますと、blog.htmlから１つ上のフォルダ内のindex.htmにリンクするには、<a href=”../index.html”>のように記入します。
    ここでは１つ上のフォルダ内のファイルを指定する方法を説明しましたが、もし２つ上のフォルダ内のファイルを指定したい場合は、「　../../　」のように、../をさらに１つ付け加えます。

    blog.htmlからindex.htmlにリンクする

    相対パス

    <a href="../index.html">

    絶対パス

    <a href="http://cybergreen.web.com/index.html>

    blog.htmlにtop.jpgを表示する

    相対パス

    <img src="../top.jpg">

    絶対パス

    <img src="http://cybergreen.web.com/top.jpg>

    絶対パスと相対パスとは？についてでした

    私も始めはどうなっているのかわからない状態でした、少しずつ覚えることで理解できました。

    投稿者プロフィール

    kinukawahiroyasu
    投稿タグ
    ,