<link> - リンク

■ 概要

項  目説  明
記述形式 <link rel="リンクタイプ" href="リンク先">
対応ブラウザー H2+ / e3+ / N4+ / Fx1+ / Op6+ / Ch1+ / Sa1+  
種  類
(カテゴリー)
メタデータ・コンテンツ
置ける場所 メタデータ・コンテンツが記入できる場所
head要素の子要素であるnoscript要素
内包要素
(コンテンツ・モデル)

(コンテンツ・モデル:

■ 解説

<link> は,href属性で指定した文書を参照します。 文書の用途は rel属性で指定します。 <head>~</head> 間に記述し,いろいろな目的で使用されます。

■ 属性

種  類名  称
【固有属性】 hrefcrossoriginrel, media, hreflang, typesizes *
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
link (既定の役割のため指定対象外)
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ
指定可能な役割の任意の状態とプロパティ   
備  考 title属性 はこの要素では特別な意味を持ちます。

href属性
参照する文書ファイルの URL を指定します。

crossorigin属性
CORS(クロスドメイン通信制約)によるサーバーとの通信方法 を指定します。 

rel属性
href属性で指定した文書ファイルの Webページ内で用途をリンクタイプで指定します。

media属性
ブラウザー,携帯,プリンターなど,参照する文書ファイルの適用対象のメディアを指定します。 この属性を指定しない場合,値は "all" となり,すべてのメディアに適用されます。
hreflang属性
href属性で指定した文書ファイルの使用言語(国別)を指定します。

type属性
参照する文書ファイルの MIMEタイプ を指定します。 rel属性の値ごとに既定値があり,この属性の指定を省略すると既定値が適用されます。 例えば,rel属性が "stylesheet" の場合には,type="text/css" の記述は省略できます。

sizes属性
rel属性の指定が rel="icon" の場合に,アイコンのサイズ(幅と高さ)を指定します。

title属性
参照する文書ファイルのタイトルを指定します。

■ CSSプロパティ

種  類名  称
【よく使うもの】 colorbackground-colorfontfont-sizefont-family

■ 使用例1 (外部スタイルシートを指定する)

外部スタイルシートを指定します。 詳細は CSS の設定を HTML 文書に適用する方法1を参照してください。

<head>
    :
  <link rel="stylesheet" href="xxx.css" type="text/css">
    :
</head>

外部スタイルシートファイル(xxx.css)には例えば次のように記述しておきます。 これにより,すべての h1要素の色を赤くすることができます。

H1 { color: red }

この方法は,HTML文書にスタイルシートを適用する3種類の方法の中では,同じスタイルを共通して複数の HTMLファイルのグループに適用する場合には大変便利です。

それは,どのようなスタイルシートであっても,その設定の複雑さとは無関係に,HTML文書内では link要素の記述のみで,スタイルシートが適用できるからです。

また,数種類のスタイルファイルを準備しておいて,表示対象のメディアごとに使い分ける場合にも,<link> による指定が便利です。

たとえば,ブラウザー,携帯,プリンターの各メディアごとに,それぞれ, "browser.css","mobile.css","print.css" という別のスタイルシートのファイルを作成して,これらをそれぞれのメディアタイプに対して適用する場合は,media属性を指定して,

<head>
    :
  <link rel="stylesheet" href="browser.css" media="screen, tv">
  <link rel="stylesheet" href="mobile.css" media="handheld">
  <link rel="stylesheet" href="print.css" media="print">
    :
</head>

のように書くことでできます。 ( type="text/css" の記述は省略。)

■ 使用例2 (フォントファイルをダウンロードする)

フォントファイル(*.pfr)をサーバーからダウンロードします。 Netscape Communicator 4.* でサポートされています。 フォントは,www.truedoc.com などから入手することができます。

<link rel="fontdef" href="xxfont.pfr">

■ 使用例3 (他文書との関連)

例えば,ブラウザーの実装によっては,以下のようなリンクタグを解釈して,ツールバーにナビゲーションボタンを表示するものもあるかもしれませ ん。

<link rel="index" href="index.html">
<link rel="contents" href="content.html">
<link rel="prev" href="chapter1.html">
<link rel="next" href="chapter3.html">

■ 使用例4 (作者を明示する)

文書の作者を明示します。 通常はメールアドレスや,作者の紹介ページのアドレス(URL)を指定します。 この場合,この文書は href の対象から見ると目的語となるため,rel ではなく rev 属性を用いるようです。

<link rev="made" href="mailto:foo@xxx.yyy.zzz">

■ 備考