ITコラム

Database concept: Database With Cloud with optical glass on digital background

ITコラム

2017.01.19

HTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素

HTML5 【 カテゴリ 】 ~ 7つのカテゴリでも紹介しましたが、HTML5の特徴の1つである7つのカテゴリの中に「メタデータ・コンテンツ」があります。ブラウザの表示と直接関係がないため、なかなか理解を深める機会がないメタデータ・コンテンツについて、少し詳しく見ていきたいと思います。

メタデータ・コンテンツについては、こちらのページもご参照下さい。

HTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素(本ページ)
HTML 【メタデータ】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【メタデータ】2 ~ link要素(2)CSSファイルの読み込み
HTML 【メタデータ】2 ~ link要素(3)media属性
HTML 【メタデータ】2 ~ link要素(4)@importと@media
HTML 【メタデータ】2 ~ link要素(5)rel属性
HTML 【メタデータ】3 ~ style要素
HTML 【メタデータ】4 ~ meta要素

目次

1.メタデータ・コンテンツとは
2.メタデータ・コンテンツの一覧
3.base要素とは
4.base要素のtarget属性

1.メタデータ・コンテンツとは

メタデータ・コンテンツ とは、HTML文書の情報を指定する要素群です。
<title> <base> <link> <style> <meta> <script> <noscript> があります。
ほとんどのメタデータ・コンテンツは<head> ~ </head>に書き、ブラウザでは表示されません。
しかし、メタデータ・コンテンツをきちんと書かないと、外部CSSのリンク切れで想定通り表示できなくなったり、Javascriptが作動しなくなるなど、様々な不具合の原因になってしまいます。

▲目次へ戻る

2.メタデータ・コンテンツの一覧

要素 概要
title ・HTML文書のタイトルを示す
・SEO的には、<h1>よりも上位の重要性を持つ
・ブラウザのブックマークやヒストリーにも表示される
・1つのHTMLファイルに1つだけ記述する
base そのHTMLファイルの相対URLのベースとなる絶対URLを指定する
link 外部ファイル(CSSファイルなど)を読み込ませる
style CSSをHTMLファイルに直接書く
script 外部スクリプト(Javascriptなど)を読み込ませる
noscript ブラウザが<script>をOFFにしているとき、代替コンテンツを表示する
meta 上記の要素で指定できないものを担当する

▲目次へ戻る

3.base要素とは

title要素は馴染みがあると思いますので(馴染みのない方は初心者のためのHTML入門1 ~ HTMLの基本をおさえて実際に書いてみよう 2.2 タイトルをご参照下さい)、メタデータコンテンツのtitle要素以外の要素を1つずつ見て行きたいと思います。
まずはbase要素です。

base要素は、そのHTMLファイルのベースになる絶対URLをブラウザに指定する要素です。(そのHTML自身の絶対URLではなく、ベースになる絶対URLです。)
HTML内で 相対URLを使う場合の起点を定める重要な要素です。

また、base要素にtarget属性を使ってターゲットを指定(ウィンドウ、タブ、フレームなどを指定)すれば、そのHTML内のリンクはすべて指定先で表示されます。

要素 base
属性 href、target
注意点 ・<base>は必ず<head>内に1つだけ書きます(複数書いても最初の1個目しか読み取られません)。
・終了タグは無く、属性はhref属性かtarget属性のみで、少なくとも1つは属性を書きます。

 
実際には次のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title>タイトル</title>
<link rel="stylesheet" href="column.css" type="text/css" />
<base href="http://www.test.com/index.html">
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<a href="category/profile.html">プロフィール</a>
</body>
</html>

<base href=”http://www.test.com/index.html”>の部分が<base>の書き方です。
ベースとなるページ(通常、トップページ)の絶対URLが「http://www.test.com/index.html」の場合に、上記の書き方になります。

上記ファイルのURLが、仮に「http://www.test.com/column/index.html」(トップページがある階層の「column」ディレクトリの中の、index.htmlという名前のファイル)だとします。
そうすると、<body>内のリンク「a href=”category/profile.html”」の絶対URLは、上記ファイルからのパスではなく、<base>のURLからのパスになるので、「http://www.test.com/category/profile.html」になります。

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

このように、<base>の位置で関連ファイルの絶対URLが変わってくるため、特別な事情がない限り、<base>は<head>内の他のリンクが始まる前に書いておくのが良いです。

▲目次へ戻る

4.base要素のtarget属性

base要素でtarget属性を指定すると、そのHTMLファイル内のリンクは、指定されたターゲットに表示されます。
HTMLファイル内のリンクに改めてtarget属性を指定をし直すと、base要素のtarget 属性は上書きされて、そのリンクで指定されたターゲットに表示されます。

そもそも、target属性は、リンクを表示するブラウザのウィンドウやタブやフレーム(全部合わせて「ブラウジング・コンテキスト」と言います)を指定するための属性です。例えばa要素で使う時は、次のように書きます。

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

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

値が「_self」「_parent」「_top」なら、今表示されている場所にリンクファイルも表示されます。
「_blank」なら、新しいウィンドウ(またはタブ)を開いてそこに表示します。ウィンドウかタブかは、ユーザのブラウザの設定によります。
target属性の値にはこの他に「任意の名前」も使えます。インラインフレームなどに任意の名前をつけておいて、その中にリンクを開きます。

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.