絶対URLと相対URL

ウェブ上のページやファイルのアドレスを指定するには、絶対URLと相対URLの2通りがあります。絶対URLは全てのアドレスを指定する方法なのに対し、相対URLは今いる場所から見てどこにあるかを指定する方法です。

基本的にサイト外に対しては絶対URL、サイト内に対しては相対URLを使います。

絶対URL
相対URL
絶対/相対URLと相対URLの使い分け

絶対URL

絶対URLとは

絶対URLは「http://」や「https://」などから指定する方法です。ファイルアドレスを完全に指定するので、ウェブ上のどこから指定してもファイルを指定する事ができます。

例えば手紙に住所を書いて出せば、世界中のどこから出しても同じ住所に手紙が届きます。絶対URLもそれと同じです。

絶対URLでの指定例

絶対URLでの指定はこのようになります。

ttp://hogehoge.com
https://hogehoge.net

相対URL

相対URLとは

相対URLは現在のディレクトリ位置を基準に位置を指定する方法です。例えばマンションの305号室から408号室を指す場合、「ひとつ上の階の3つ後」と相対的に表現できますよね。こんな感じに指定するのが相対URLです。

しかし同じ「ひとつ上の階の3つ後」でも、203号室から見た時と306号室から見た時では指している場所が違います。現在のディレクトリ次第で指定されるアドレスが変わるのが絶対URL指定との大きな違いです。

相対パス指定の様式は以下のとおりです。

同階層にあるファイル指定は「ファイル名」
下のディレクトリに移動するには「ディレクトリ名/」
上のディレクトリに移動するには「../」
「../../」「/../ディレクトリ名」「ディレクトリ名/ディレクトリ名/」など遷移を繋げて目的のファイルを指定する

相対URLでの指定例

相対URL指定はカレントディレクトリから見てどの位置にあるかを指定するのが特徴です。

ileName <!-- 同階層のファイル -->
DirectoryName/FileName <!-- １つ下の階層 -->
DirectoryName/DirectoryName/FileName <!-- ２つ下の階層 -->
../FileName <!-- １つ上の階層 -->
../../FileName <!-- ２つ上の階層 -->
../DirectoryName/FileName <!-- 同じ階層の別ディレクトリ -->

絶対/相対URLと相対URLの使い分け

amaru.me/index.htmlがカレントディレクトリの際に、index.htmlと同階層のarticleフォルダの中のpost.htmlへのリンクを貼るとします。その場合の絶対URL指定と相対URL指定は、以下の記述になります。

lt;a href="http://amaru.me/article/post.html">絶対URL指定</a>
<a href="article/post.html">相対URL指定</a>

絶対URLでの指定はファイルアドレスが明瞭な一方で、ドメインやディレクトリ名の変更でアドレスが変わると同様に指定先を修正する必要があります。

対して相対URLでの指定はドメインやディレクトリ名を変更しても修正の必要がなく柔軟な一方で、ディレクトリ構造の分からない外部サイトには使えません。

なので基本的にサイト内のファイルには相対URL指定を、外部サイトのファイルには絶対URLを指定使うと良いです。

B!
LINE