【HTML】相対パスの記述が面倒くさい！劇的に楽にする方法を紹介

相対パス面倒くさい問題

Webサイトのコーディングで、リンクや画像のファイルパスを指定する際に「../」を数えた経験がある人には共感いただけるかと思いますが、相対パスって面倒くさい！

作成済みのHTMLファイルをコピーして似たデザインの下層ページを作り始めたら「画像が表示されない」とか「スタイルが効かない」ってことも良くあります。

完成したサイトのグローバルナビにメニューを追加するにも、ページによって「../」の個数が違うから一括で置き換えができない！とか、静的サイト修正あるあるではないでしょうか？

というわけで、静的サイトのコーディングで相対パスの記述を劇的に楽にする方法をご紹介していきます。

といってもHTMLの<head>に以下のような記述を追加するだけです。

HTML (.html)

<head>
  <base href="https://hogehoge.hoge/">
</head>

Check!!

2行目href=""には公開するWebサイトのルートディレクトリを入力！

<base>のhrefで指定したURLが、そのファイル内で相対パスに使用される基点URLとなります。

つまり上記のファイル内で<img src="images/sample.png">と記述すると、<img src="https://hogehoge.hoge/images/sample.png">と置き換えてサイトに出力されるようになります。

WordPressがわかる人は「echo home_url();がsrcの先頭に自動で入っている状態」と解釈してね！

今まではページの階層によって「../」の個数を調整しながらパスを指定していましたが、全ての下層ページに<base>タグで同一のURLを設定しておくことで、パスの指定ルールが固定されるというワケです。

<base>には先ほど使用したhref属性の他にtarget属性も存在します。

<base>のtargetも<a>に指定するときと同じく、リンク先のコンテンツを表示する閲覧コンテキストを指定できるものです。

<a>に個別にtargetを指定する場合は、そちらの設定が優先されるよ！

値	リンク先の表示方法
_self（既定値）	現在の閲覧コンテキストに表示
_blank	新しいタブに表示する

target属性は他に_topや_parentという値もありますが、ほとんど使わないので今回は割愛します。

例えばページ内リンクを貼りたい下層ページのURLが「https://hogehoge.hoge/kasou/page01.html」として、サンプルコードと同じく<base href="https://hogehoge.hoge/">を設定しているとします。

page01.html内にある#section03にページ内リンクを貼る際の記述として以下はNGです。

<base>を使用していないページなら上記で問題ありませんが、今回の場合サイト上で<a href="https://hogehoge.hoge/#section03">に置き換わるので、トップページの#section03に飛んでしまいます。

正しい記述は以下の通り。

このように現在のページのパスも含めて記述すれば
<a href="https://hogehoge.hoge/kasou/page01.html/#section03">となり、正しくページ内リンクさせることができます。