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

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

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

また、<base>要素に「target属性」を使ってターゲットを指定(ウィンドウまたはタブやフレーム)すれば、そのHTML内のリンクはすべて指定先に開きます。

使用する要素 <base>
使用する属性 href属性、target属性

★絶対URL・相対URLについては…「ほんっとにはじめてのHTML-[10] 絶対URL と 相対URL」をご覧ください

<base>は必ず<head>内に1つだけ。いっぱい書いても最初の1個目しか読み取られません。
終了タグは無く、属性は「href属性」か 「target属性」(どっちか1つか、2つとも書くか) 。この2つの属性以外は使いません。
<base>はHTML4のときからある要素で、HTML5での変更点は無いみたいです。

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title>このHTMLのタイトル</title>
<link rel="stylesheet" href="column.css" type="text/css" />
<base href="http://www.example.com/index.html">
<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を指定しています。
トップページの絶対URLは「http://www.example.com/index.html」にしています。
(最後の「index.html」は省略してもOK。同じファイルを指します。)

「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.honttoni.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.honttoni.example.com/column/column.css」を指しています。
8行目の「default.css」<base>の後に書いているので<base>の影響を受けます。
このCSSの絶対URLは「http://www.honttoni.example.com/default.css」です。

このように「<base>の位置」でファイルの絶対URLが変わります!
なので<base>を置くなら、<head>内の他のリンクが始まる前に書いておくのがベストだと思います。
<base>より前に他のリンクがある(<base>の影響無し)と、<base>を書いたあとのリンク(<base>の影響あり)と絶対URLが違ってしまう = ややこしくなるから!(笑)

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

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

実際にリンクさせて確かめるために、サンプルを作ってみました。
→<base>要素の target属性のサンプル(honttoni41.html)をご覧ください。(別ウィンドウで開きます)

「target属性」って何なの?

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

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

これは「_blank」というキーワードを値に使っていますね。「別ウィンドウ(タブ、フレーム)を開いてそこに表示する」ってことです。キーワードは他に「_self」「_parent」「_top」があります。

target属性の値にはこの他に「任意の名前」も使えます。インラインフレームなどに任意の名前をつけておいて、その中にリンクを開くのです。

<base>要素で「target属性」使う例です。

<base href="http://www.honttoni.example.com/index.html" target="任意の名前">リンク</a>

「任意の名前」とは同ページ内のインラインフレームなどに「name属性」で付けた名前です。
この名前のいちばん最初に「_(アンダースコア)」を使ってはダメなんだって。 ほかの「_self」とかが「_」で始まってるからでしょうね。
HTML文書内のリンクは、この「任意の名前」の付いたインラインフレームに表示されます。(リンクに改めて target属性の指定が無ければ。)

値が「_self」「_parent」「_top」なら、今表示されている場所にリンクファイルも表示されます。
「_blank」なら、新しいウィンドウ(またはタブ)を開いてそこに表示します。ウィンドウかタブかは、ユーザのブラウザの設定によります。

実際の動作はサンプルで確認してください。
→<base>要素の target属性のサンプル(honttoni41.html)
(別ウィンドウで開きます)

★「target属性」の値について、まとめておきます。

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

次回予告

いかがでしたか?
<base>要素を使うと、相対パスの書き方が、全部ベースのHTMLからのパスになるので、ツリー構造のとおりに書けてラクですね。たぶん。(私は今のところあんまり使ってないけどw)

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.