この記事は、作成日から13年経過しています。内容が古い可能性があります。またこの記事は、大幅なデザイン変更前に書かれたものですので、レイアウトが崩れている可能性があります。ご了承ください。
最近は手軽にウェブサイトを制作できるようになりました。私も、ウェブサイト制作のご相談をいただくことがありますが、そのお客さまの知識次第では、「自分でおやりになったらどうですか？」とツールを紹介してしまいます（当社の商売的には若干問題ですが。。。喜ばれます）。とはいえ、ある一定の基礎知識は必要です。
そもそもウェブサイトは、基本的には(X)HTMLというプログラム言語を使って構成されています。その中にリンクという概念があります。リンクを貼ると、どこか別のページに移動することができます。リンクを埋め込むと指定した場所にあるファイルや画像を設置することができます。具体的には、
<a href="aaa/bbb.html">会社概要</a> <img src="../image/bk.jpg" />
などです。ここでいう「href 」や「src」というところには、リンク先を指定するわけですが、これに関しては、ホームページ制作ツールやブログシステムを利用していても、手作業で入力する状況に面することがあるでしょう。
実は、リンク先として書く文字列をパスといいます。このパスには絶対パスと相対パスがあります。
- 絶対パス：サイト内の絶対動かないものを基準にして、リンク先を指定する文字列
- 相対パス：サイト内の自分の場所を基準にして、リンク先を指定する文字列
【絶対パス】
- http://www.xxx.com/aaa/bbb.html や http://www.xxx.com/image/bk.jpg
- //www.xxx.com/aaa/bbb.html や //www.xxx.com/image/bk.jpg
- /aaa/bbb.html や /image/bk.jpg
【相対パス】
- ./aaa/bbb.html や ./image/bk.jpg
- ../aaa/bbb.html や ../image/bk.jpg
- ../../aaa/bbb.html や ../../image/bk.jpg
では、それぞれの意味と特徴を書き下していきます。
絶対パス－１：アドレスそのものを指定してしまいます。ファイルの配置を変えてもリンク切れを起こすことはないので安心です。しかし、ドメインを変更したり、複数のドメインで同じサイトを表示させている場合は、不具合が出る場合があります。このパターンで指定すると、サイト表示が遅くなるとおっしゃる方もいますが、私は体感的にはまったく影響がないものと考えています。
絶対パス－２：通信プロトコルを示す（httpやhttps）文字列だけを省き、ダブルスラッシュから始めます。有名な例では、SSL証明書のサイトシール（ベリサインやグローバルサインのシール）を貼るときに、このリンク形式をみることができます。これはhttpとhttpsの両方で表示される可能性があるページに利用されますが、利用率は極めて低いように思います。
絶対パス－３：絶対パス－２よりもこちらを利用する場合が多いと思います。よく相対パス－１と混同する方がおられますが、まったく別物です。絶対パス－３は絶対パス１，２と同等です。
相対パス－１：ドットは自分の位置を示します。つまり、自分と同じ位置から見て～という意味になります。ドットとスラッシュは省略して構いません。
相対パス－２：ドット２つは、自分より一つ上の階層を示します。
相対パス－３：ドット２つを重ねていくと、上へ上へと階層を重ねていくことができます。
一般的には、相対パスが便利ですが、WordPressなどのCMSを利用している場合は、絶対パスのほうが便利な場合もあります。種類としては覚えておいて損はないと思います。
コメント