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

最終更新日:2017年11月18日  (初回投稿日:2012年03月15日)

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

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

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

使用する要素 <base>(終了タグはありません)
使用する属性 href属性、target属性
本日のINDEX
  1. HTML内の相対パスの起点を決めるのが <base>要素
  2. <base>要素は必ず1個だけ
  3. <base>はその後の全てのパスに影響を与えます
    1. <base>の影響を受けたくないモノは「絶対パス」で書く
  4. 「target属性」でリンクを開く場所を指定しよう
  5. 「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に読み込ませる役目です。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.