2022.01.27
【CSS】text-alignが効かない時のチェック項目
その他
2021.11.30
ディレクトリ階層が深い時などに役立つbase要素について解説します！
説明を読んだだけではどんな意味を持つ要素なのかわかりづらい要素なので、サンプルコードを用いてわかりやすく解説します！
目次
base要素は、HTMLファイル内で指定されている相対URLの基準となるURLを設定するための要素です。
また、target属性を指定することで、HTMLファイル内全体のリンクの表示方法を指定することができます。
ルール
実際にこんなことを言われてもよくわからないと思うので、サンプルコードを例に解説していきます！
それでは、実際にbase要素をどのように指定するのか見てみましょう。
https://sample.com/というサイトがあり、ディレクトリが以下のようになっていたとします。
index.htmlの中身は以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<base href="https://sample.com/index.html">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>テスト</title>
</head>
<body>
<p>テスト</p>
</body>
</html>base要素にhttps://sample.com/index.htmlを指定しています。この指定をすることで、このHTMLファイル内の相対パスの基準URLは、https://sample.com/index.htmlとなります。
base要素下にある外部CSSファイルの相対パスは絶対パスに直すと以下のようになり、CSSファイルを正しく読み込んでいます。
<link rel="stylesheet" type="text/css" href="./css/style.css">
↓
<link rel="stylesheet" type="text/css" href="https://sample.com/css/style.css">ここまでの話なら、https://sample.com直下のindex.htmlがcssディレクトリ内のstyle.cssを読みにいくために./css/reset.cssと記述するのは普通のことですよね。
base要素がない場合は現在のページが基準URLとなります。そのため、現在のページを基準として指定するなら指定しなかった時とでは違いがありません。
上記の例ではbase要素を指定している意味があまりわかりませんが、次の例でよくわかると思います。
https://sample.comの下層、testディレクトリを例とします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<base href="https://sample.com/test/index.html">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>テスト</title>
</head>
<body>
<p>テスト</p>
</body>
</html>base要素に、現在のページであるhttps://sample.com/test/index.htmlを指定しています。
外部cssファイルの読み込みを見てみましょう。
testディレクトリ内のcss/stye.cssを読み込んでいます。絶対パスに直すと以下の通りです。
<link rel="stylesheet" type="text/css" href="./css/style.css">
↓
<link rel="stylesheet" type="text/css" href="https://sample.com/test/css/style.css">では、base要素を以下のように変更してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<base href="https://sample.com/">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>テスト</title>
</head>
<body>
<p>テスト</p>
</body>
</html>基準URLをhttps://sample.com/としました。
この場合、外部CSSファイルはhttps://sample.com/css/style.cssを読みに行きます。
https://sample.com/index.htmlを指定したためです。
このようにbase要素で基準URLを指定すると、相対パスの基準位置を変更することができるのです。
base要素のtarget属性でファイル全体のリンク表示方法を指定することができます。
たとえば、別タブで開くという指定target="_blank"をbase要素に指定すると、ファイル内のデフォルトのリンク表示方法が別タブ表示になります。
<base href="https://sample.com/" target="_blank">階層が深いファイルにルートディレクトリのファイルを読み込ませたい時に、../../../ とか指定しなくて済み、とても便利です！
base要素の基準URLの影響を受けたくない場合は、個別で絶対パスで指定するなどして対応しましょう。
こちらの記事もおすすめ
[card url=”https://note.spiqa.design/wp/html5-all/”]
この記事をシェアする
株式会社スピカデザイン
https://spiqa.design/
spiqa_design