ほんっとにはじめてのHTML5とCSS3：[41] base でベースの URL を示そう

[41] base でベースの URL を示そう

最終更新日：2017年11月18日　（初回投稿日：2012年03月15日）

今回から「メタデータコンテンツ」の要素を1つずつ見て行きましょう。
まずは <base>要素です。
「メタデータコンテンツ」については、[40] メタデータ・コンテンツって何？をご覧ください。

<base>要素は昔からある要素で、HTML5での変更点は無いそうです。

<base>要素の用途を知るには 絶対URL、相対URL（絶対パス、相対パス）について理解している必要があります。
ですので、[10] 絶対URL と相対URL（絶対パスと相対パス）も見てください。

使用する要素	`<base>`（終了タグはありません）

使用する属性	`href属性、target属性`

本日のINDEX

HTML内の相対パスの起点を決めるのが <base>要素
<base>要素は必ず１個だけ
<base>はその後の全てのパスに影響を与えます
1. <base>の影響を受けたくないモノは「絶対パス」で書く
「target属性」でリンクを開く場所を指定しよう
「target属性」って何なの？
1. 「target属性」の値一覧

HTML内の相対パスの起点を決めるのが <base>要素

<base>要素は、HTMLファイル内で相対パスでリンクするときの起点を決める要素です。
そのHTMLファイルのベースになる「絶対URL」をブラウザに指定します。（そのHTMLファイル自身の絶対URLじゃなくて、ベースになる絶対URLね。）

<base>要素は 必ず<head>要素内に1つだけ。いっぱい書いても最初の1個目しか読み取られません。
属性は「href属性」と「target属性」。どっちか1つか、2つとも書いてもOK。

「href属性」は URLを指定します。

「target属性」でターゲットを指定すれば、そのHTML内のリンクはすべて指定先（ウィンドウまたはタブやフレーム）に開きます。

<base>はその後の全てのパスに影響を与えます

とにかくサンプルソースを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>このHTMLのタイトル</title>
<link rel="stylesheet" href="column.css" type="text/css" />
<base href="http://www.example.com/">
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<p>このページの絶対URLは、 http://www.example.com/column/index.html </p>
<p>ほかのページに<a href="sample/yyy.html">リンク</a>します。</p>
</body>
</html>

7行目が<base>です。
「href属性」で、ベースになる絶対URLを指定しています。
ベースは http://www.example.com/ です。
7行目の <base>要素以降のベースがこのURLになり、すべてのリンクに影響します。

「href属性」は、リンクさせるファイルのURLを示す時に使います。
href は「Hyper text Reference」の略。エイチレフとかハイレフとか読みます。Referenceは「参照」という意味の英単語です。

さて、サンプルのファイルのURLが、
http://www.example.com/column/index.html だとします。
（トップの階層の「column」ディレクトリの中の、index.htmlという名前のファイルです）

<body>内のリンク「a href="sample/yyy.html"」（12行目）の絶対URLは、
<base>要素のURLからのパスになるので、
「 http://www.example.com/sample/yyy.html」になり、「column」の中の「sample」じゃ無いんです。OK？　<base>要素の影響を受けるとはこういうこと。

また、<head>内に <link>要素を使って、CSSの外部ファイルを読み込んでいます。6行目の「column.css」と、8行目の「default.css」です。
6行目の「column.css」は<base>の前なので<base>の影響を受けない。
このHTML自身からの相対パスになり「http://www.example.com/column/column.css」を指しています。
8行目の「default.css」は<base>の後に書いているので<base>の影響を受けます。
このCSSの絶対URLは「 http://www.example.com/default.css」です。

このように<base>の位置でファイルの絶対URLが変わります！
なので <base>要素の位置が非常に重要。
<head>要素内で <base>の影響を受けちゃ困るものは <base>の「前に書く」こと。

<base>の影響を受けたくないモノは「絶対パス」で書く

<body>要素内に JavaScriptの外部ファイルを「相対パス」で呼び出してたりすると、<base>の影響でファイルが読めなくなるなんてこともあります。
そんなときは「絶対パス」で書くこと。

<base>要素の影響を受けるのは「相対パス」だけ。
影響を受けたくないモノは「絶対パス」で書いておけば安心です。

「target属性」でリンクを開く場所を指定しよう

<base>要素に「target属性」をつけると、そのHTML文書内のすべてのハイパーリンクは <base>で指定したターゲットに表示されます。

HTML文書内のリンクに改めて「target属性」で指定をし直してあげれば、<base>要素の「target 属性」は上書きされ、上書きしたターゲットがイキになります。

例えば、サイト内の <a>要素のリンクを「ぜ〜んぶ別ウィンドウで開きたい」という場合は、<head>要素内で <base href="ベースの絶対パス" target="_blank"> としておけば、もう <a>要素に「target属性」を指定しなくて良いので手間いらず。
target="_blank" で開きたくないリンクにだけ「target="_self"」と指定してあげればOK。

「target属性」って何なの？

「target属性」は、リンクを表示する「ブラウザのウィンドウやタブやフレーム（全部ひっくるめて「ブラウジング・コンテキスト」と言います）」を指定できます。
例えば <a>要素で使うときは、こんなふうに使います。


<a href="sample/sample.html" target="_blank">リンク</a>

これは「_blank」というキーワードを値に使っていますね。これは「別ウィンドウ（またはタブ）を開いてそこに表示する」ってことです。
ウィンドウかタブかは、ユーザのブラウザの設定によります。

キーワードは他に「_self」「_parent」「_top」があります。
「_self」「_parent」「_top」なら、今表示されている場所にリンクファイルも表示されます。

target属性の値にはこの他に「任意の名前」も使えます。


<a href="sample/sample.html" target="任意の名前">リンク</a>

「任意の名前」は同ページ内のインラインフレームに「name属性」で付けた名前です。
そのインラインフレーム内にリンクを開くのです。

任意の名前のいちばん最初に「_（アンダースコア）」を使ってはダメ。
ほかの「_self」とかが「_ 」で始まってるからでしょうね。

インラインフレームの「任意の名前」をターゲットにしたサンプルを作ってみました。（別ウィンドウで開きます） <base>要素の target属性のサンプル

「target属性」の値一覧

_self	デフォルト。target属性を指定しなければこれになる。今、自分（リンク元のHTML文書）が表示されているウィンドウ（またはタブまたはフレーム）に、リンクファイルも表示します。
_blank	別ウィンドウ（またはタブ）を開いて、そこにリンクを表示する。（真新しいコンテキストに表示するってこと）
_parent	親ウィンドウに表示する。自分がフレームの中に表示されているときに、リンクファイルをフレームの1つ外（1つ上）の親ウィンドウに表示します。
_top	自分がどんだけ深い階層のフレームの中にいても、リンクファイルはフレームを全部解除したいちばん上の階層に表示されます。
任意の名前 (browsing context name)	インラインフレームに name属性で付けた名前です。その名前を targetで指定しておけば、リンクはそのインラインフレームに表示されます。名前の冒頭に「_（アンダースコア）」を使うとNG。

次回予告

いかがでしたか？
<base>要素は、フレーム（<frameset>要素）が全盛だった時代の名残かも。あんまり使わないかなあ（私感ですw）
「target属性」は非常によく使うので覚えておいてソンはないです。

＊フレームは HTML5で廃止され、インラインフレーム（<iframe>要素）のみ残っています。
詳しくは（ちょっとメモ）HTML5で廃止される要素一覧をご覧ください。

さて次回は、<link>要素を使ってみましょう。
これは外部ファイル（主にCSSファイル。他にショートカットアイコンとかも）をHTMLに読み込ませる役目です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。