LoginSignup
eurekaseed
@eurekaseed (child SEED)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

<base href=で設定したベースURLのリンクが効かず、絶対パスリンクがルートに設定されてしまう

Q&A

Closed

HTMLserver

解決したいこと

発生している問題・エラー

/test_base_url/test1/test2/にアップしたindex.htmlをトップページとして、絶対パスを、

<a href="/">ホーム</a>

の場合に、/test_base_url/test1/test2/にリンクが飛ぶようにしたいので、headタグの中に、

<base href="/test_base_url/test1/test2/"> <!-- ベースURLを設定 -->

の一文を入ました。が、それが効かず、ルートURLにリンクが貼られてしまいます。
head内のbase href=のリンクをURLにもしてみましたが、結果同じでした。
やり方として間違っているでしょうか…？

ちなみにですが、サーバーはXサーバーです。

例）
http://eurekaseed-design.com/test_base_url/test1/test2/
上記ページの、「ホーム 概要 お問い合わせ」のナビリンクが絶対パスリンクですが、ベースURLのリンクでなく、ルート直下にリンクされています。

該当するソースコード

<head>
    <base href="/test_base_url/test1/test2/"> <!-- ベースURLを設定 -->
    〜
</head>
<body>
    〜
    <nav>
        <a href="/">ホーム</a>
        <a href="/about/">概要</a>
        <a href="/contact/">お問い合わせ</a>
    </nav>


### 自分で試したこと
実際のサイトを別ディレクトリにアップして確認
ベースURLの設定を、URLの場合と相対パスの場合と両方でテスト
検索して調べる
VS dodeのcopilotに質問
htmlのみのシンプルなテストページを作成実行
など
0

4Answer

uasi
@uasi

base 要素は相対パスの起点を設定します。 / や /about/ は絶対パスなので影響を受けません。 起点を反映させたいならリンクを ./ や about/ のように相対パスで書いてください。

4Like
eurekaseed
@eurekaseed

URLをドキュメントルートとして基準にしたサーバ環境のパスと、実際のディレクトリ構造を基準にしたローカル環境の書き方とでは、動作確認的には違う場合があるので混同してはいけないということでしょうか。
確かに見た目に惑わされて曖昧な認識でした。

返答もクローズも遅くなってしまいすみません。
いろいろと教えていただきありがとうございました。
クローズさせていただきます。

1Like

Comments

  1. @albireo

    動作確認的には違う場合があるので混同してはいけないということでしょうか。

    まあそうなんですが、一般的には「ほとんどの場合別物なので、混同しているとまともに動くはずがない」です。

    ブラウザに表示されるURLがhttp://www.example.com/index.htmlだった場合、webサーバー内でindex.htmlの置かれた場所がルートディレクトリ(/やC:\)だと想像してみると、不可能ではないけど普通はそんな場所に置かないことは理解できるのではないでしょうか。

    おそらく今回はwebサーバ経由(http)ではなくローカルファイルを直接ブラウザで開いていたので、その違いを意識せずに済んだのだと思います。

  2. @uasi

    この質問の中では混同している様子はなさそうに見えますが。 <base href="/test_base_url/test1/test2/"> はサーバ上の絶対パスとして正しく、ローカルファイルパスではないようですし、試したことの「実際のサイトを別ディレクトリにアップして確認」というのも web サーバ経由で開いているように思われます。

  3. @albireo

    あああ、そうですねうっかりしてました。

    <a href="/">ホーム</a>を見て/test_base_url/test1/test2/の方はローカルパスだと思い込んでしまってました。
    そのため<a href="/">ホーム</a>は相対パスにするべきとなった後でも「baseにローカルパスを書いている」という思い込みをアップデートしていなかったというポカです。

    @eurekaseed さんすみません。

eurekaseed
@eurekaseed

確かに基本的な使い方を書いたページには「相対パスのみ」と書いてありました。
/から始まるリンクで説明されていたので、こちらで勘違いしました。
/about/ → about/ に変更したらリンクが効きました。
ありがとうございます。

0Like
albireo
@albireo

<base href="..."はブラウザが解釈するもので、ブラウザにとってパスとはURLのことです。
つまりここにローカルファイルパスを書くのは間違いです。
この件に関しては解決したようなので大きなお世話だと思いますが、この違いは意識しておかないとのちのち確実に混乱します。

あと、解決したのならクローズをお願いします。

0Like

Your answer might help someone💌

LoginSign Up