2020-01-07 更新

ベースURLの設定

概要

ディレクトリ階層の異なるページを用意する場合、基準となるURLを設定しておく方がなにかと便利なことがあります。例えば、相対パスで外部ファイルを読み込む場合、ページ毎に参照URLが異なるので、ディレクトリの構成を変えた際に変更が多くなりますが、ベースとなるURLを設定しておくことで、そういった手間が省けます。

目次

  • 詳細
  • 備考
  • 参考リンク

詳細

プロジェクトの構成が以下の通りで「src1.html」と「src2.html」から「dest.html」へ遷移させる場合

/
|---- dest.html
|---- category/
 |---- src1.html
 |---- sample/
      |---- src2.html

◆ ベースURLを設定せずに相対パスでページ遷移

 遷移元1(/category/src1.html)


<a href="../dest.html">遷移先(dest.html)</a>

 遷移元2(/category/sample/src2.html)


<a href="../../dest.html">遷移先(dest.html)</a>

◆ ベースURLを設定して相対パスでページ遷移

 ベースURLの設定


<head>
    <base href="http://www.xxx-yyy.zzz/">
</head>

 遷移元1(/category/src1.html)


<a href="dest.html">遷移先(dest.html)</a>

 遷移元2(/category/sample/src2.html)


<a href="dest.html">遷移先(dest.html)</a>

備考

AngularJSのルーティング機能を使おうとした時になぜかうまくいかず、ベースURLを設定したらすんなり動いたことがあります。(サーバの設定やルーティングが間違っていた可能性もありますが...)

参考リンク

HTML】関連記事