このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

base要素/相対パスの基準となるURL

<base href="http://www.example.com/">
文書内のすべての相対パスの基準となるURLを指定する要素
この記事はHTML5.2に対応しています。
この記事はHTML5.2に対応しています。

要素について

概要

カテゴリー メタデータ・コンテンツ
利用場所 head”要素の子要素として(ただし、“base”要素を複数配置することはできない)
内容
タグの省略 終了タグはありません

base”要素はリンク、画像、フォーム等の文書内のすべての相対パスの基準となるURLを指定する要素です。通常はリンク元の文書が相対パスの基準となりますが、“base”要素を使用することで他の場所に基準を変更することができます。

相対パス”は現在位置を基準として目的のファイルとの相対的な位置で指定する方法。“sample.html”や“directory/sample.html”等。
絶対パス”は現在位置とは関係なく絶対的な位置で指定する方法。“http://...”で始まるURL。

head”要素の子要素として文書内に一つだけ配置することができます。複数個配置した場合は一つ目のもの以外は無視されます。

head”要素内にlink”要素などのURLを指定する要素がある場合はその要素よりも前に配置する必要があります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<base href="http://www.example.com/">
<link rel="shortcut icon" href="image/favicon.ico">
<meta name="ROBOTS" content="NOINDEX, FOLLOW">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="バナナについて解説します">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...

属性と値

属性
属性 説明 説明
任意属性
グローバル属性
href="" 相対パスの基準となるURL URL 相対パスの基準となるURL
target=""HTML5で追加 リンク先の表示方法 _blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示

href”属性target”属性のうちどちらか一つもしくは両方を必ず指定しなければいけません。

各属性の詳細

href”属性

概要

href”属性はリンク、画像、フォーム等の文書内のすべての相対パスの基準となるURLを指定します。値となるURLは相対パスと絶対パスのどちらでも指定することができます。

通常はリンク元の文書が相対パスの基準となりますが、“href”属性を指定した“base”要素を配置することで他の場所に基準を変更することができます。

文書内にある絶対パスで指定されたリンクには影響しません。

指定できる値

属性値 説明
URL 相対パスの基準となるURL

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<base href="http://www.example.com/">
<link rel="shortcut icon" href="image/favicon.ico">
<meta name="ROBOTS" content="NOINDEX, FOLLOW">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="バナナについて解説します">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...

上の文書が“http://www.example.com/directory/banana.html”であるとすると通常文書内の相対パスの基準は“http://www.example.com/directory/”となりますが、“href”属性を指定した“base”要素を配置しているので“http://www.example.com/”が基準になります。

target”属性HTML5で追加

概要

target”属性は表示方法が指定されていないリンクを開いた時の表示方法を指定します。

target”属性でリンク先の表示方法が指定されていないa”要素などは文書に“target”属性を指定した“base”要素がある場合はこの“target”属性によってリンク先の表示方法が指定されます。

指定できる値

属性値 説明
_blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<base target="_top">
<link rel="shortcut icon" href="image/favicon.ico">
<meta name="ROBOTS" content="NOINDEX, FOLLOW">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="バナナについて解説します">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク