初めてのHTML5 – (5) – 相対パス、絶対パス

言語切り替え

今回は絶対パスと相対パスを簡単な例を通してみてみたいと思います。

簡単な例として以下のフォルダの構造を見てみましょう。

一般的なWebサイトの簡単な構造です。

一般的なフォルダの構造

ここで、トップページの「パス」は「/index.html」であり、「ドメイン名」で接続することができます。

この時、特別な設定を加えない以上普通のWebページのトップページは「/index.html」から始まります。

パスで表すと「/」でも表せます。

また、ここで「service-worker」というjsファイルに接続する時、そのパスは「src/service-worker.js」になります。

上記のように、Webサイトのメインフォルダから他のファイルに向かってフォルダ順にたどったものを「パス」といいます。

Webページで他のページに接続したり、画像をリンクする時にはパスを指定する必要があります。

このパスを大きく「絶対パス」、「相対パス」に分けれます。

絶対パス

絶対パスは「URL」そのもののことです。

主に外部サイトにリンクする時に使われます。

例えば以下のHTMLは絶対パスを使ったものです。

HTML

<a href="https://www.kyon-magazine.com/html5_basic" target="_blank"> HTML5の基本</a>

実行結果

HTML5の基本

相対パス

相対パスは「指定ファイルのパスを起点として、他のファイルのリンクを指定する」方法です。

主に内部リンクを指定するときに相対パスを使います。

例えば、また上のイメージをもう一回使って説明すると、

「index.html」のあるところを「ルートフォルダ」にしたら、「service-worker」というjsファイルに接続する時、そのパスは「src/service-worker.js」になります。

逆に1階層を上がるためには先頭に「../」をつけます(ちなみに、2階層上がるためには「../../」と書きます。)

例えば、「この掲示物」から「初めてのHTML」の目録をリンクするためには「../」になります。

HTML

<a href="../">初めてのHTML</a>

実行結果

初めてのHTML

なお、同じ階層の他のファイルにリンクするには、先頭に「./」と書きます。(こちらの方の「./」は省略できます。)

ルート相対パス

相対パスの中で特殊な書き方として「ルート相対パス」という書き方があります。

こちらは、既存の相対パスが「特定ファイル」を元で起点を決めるのに対し、ルート相対パスは「常にルートフォルダ」を起点にするパスを書きます。

例えば、現在のサイトからすると

HTML(例1)

<a href="/invented/game/puzzle/351/">【webゲーム】Kyaru touch</a>

実行結果

【webゲーム】Kyaru touch

HTML(例2)

<a href="/invented/game/puzzle/859/">【webゲーム】神経衰弱</a>

実行結果

【webゲーム】神経衰弱

初めてのHTML

初めてのHTML5 - (1) - HTMLの要素と属性 ・・・今回はHTMLの属性と要素に対して詳しく扱ってみようと思います。
初めてのHTML5 - (2) - HTMLでWebページを作成する時の基本的なルール ・・・今回はHTMLの要素の属性を活用して簡単なWebページを作ってみました。 この記事まで見たらほとんどのWebページは把握できますので、興味のある方は是非参考にしてください。
初めてのHTML5 – (3) – HTMLの構造 ・・・「HTML構造」とその構造で使われる要素の用語に対して分かる。
初めてのHTML5 – (4) – URL ・・・URLの説明と各部位に対する説明をします。
初めてのHTML5 – (5) – 相対パス、絶対パス ・・・今回は絶対パスと相対パスを簡単な例を通してみてみたいと思います。
[Total: 0 Average: 0]

コメント

 
タイトルとURLをコピーしました