Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

HTMLで絶対パスを有効的に使う

http://example.com/hogehttp://example.com/hoge/を区別せずに扱おうとすると、相対パスの問題が起きます。これを回避するために絶対パスを使いたいですが、一々フルで書くのはめんどくさいので<base>タグを使って楽をしようと思います。 f:id:panda_noir:20180210131335p:plain

絶対パスで省略できる部分

実は自分のサイトに対する絶対パスには、省略できる部分があります。それは、プロトコルからドメイン名までの部分です。つまりhttp://example.com/hoge/hogeにまで省略できます。

ここでポイントなのは、/hogeは省略しただけで、絶対パスのままであるということです。そのため、<base>タグでも使用できます。

省略してみる

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title></title>
<a href="http://example.com/hoge/fuga.html">fuga</a>
<a href="/hoge/fuga.html">fuga</a> <!-- 上と同じ -->
<img src="/hoge/image.png">

これがこうなります。

<!DOCTYPE html>
<html lang="ja">
<!-- 追加-->
<base href="/hoge/">
<meta charset="UTF-8">
<title></title>
<!-- URLが相対パスになる -->
<a href="fuga.html">fuga</a>
<img src="image.png">

<base>タグを使うことで通常の相対パスのような指定が可能となりました!素晴らしいですね。