link要素とは

link要素はただスタイルシートを読み込む為だけに存在する……などと思っていませんか? そんな事はありません。

link要素は head要素の子要素 として存在し得る、 別の文書等との関係を定義する要素 です。 これは空要素(エンプティタグ)として定義されています。 よってスタイルシートの呼び出しの他、 ナビゲーション情報を記述する事が出来る のです。

……がしかし、圧倒的シェアを誇るMSIEはこの便利な要素を読んでくれません。 (正確に言うと関係が「スタイルシート」でない限り無視しています。) HTML2.0という太古の昔から定義されているのに……。 とはいえ、MozillaやOpera等のUAではきちんとナビゲーションボタンを表示します。 これは非常に便利。 是非とも記述してもらいたいのです。 MSIEユーザーが想像しやすいよう、ナビゲーションバーの表示例も説明しますが、その説明は後ほど。

属性の解説

重要なものだけ取り上げてゆきます。

rel,rev属性

メインとなる属性です。 この属性で文書の関係を示します。 rel属性は この文書から見た リンク先との関係を、rev属性は リンク先から見た この文書との関係を記述します。 これらはスペースで区切って複数指定することも可能です。 またこの属性は、a要素にも定義されています、知ってましたか?

type属性

リンク先のファイルのMIMEタイプを指定します。 MIMEタイプの一覧に関しては他の素晴らしいサイトを参照してください。

href属性

リンク先のURIを指定します。 a要素と同様に記述します。

media属性

リンク先のファイルを表示するべきメディアの種類を指定します。 複数指定する場合はカンマ(,)で区切ります。 メディアの一覧は以下の通りです。

• モバイル用CSS適用時の注意点。

用法

以下の用例は全てXHTMLの記述です。 HTML4等で記述する場合は最後のスラッシュ(/)が不要です。 (link要素は空要素の為。)

他の文書と関連させる

<p><link rel="home" href="../" title="駄的HTML改善計画 Top" />
<link rel="prev" href="target.php" title="target属性の利便性" />
<link rev="made" href="mailto:noaddress@example.jp" title="管理人にメール" /></p>

この様な記述があった場合、「 サイトの始まりのページ 」として../が、「 一つ前の文書 」としてtarget.phpが、「 著者 」としてnoaddress@example.jpが関連付けられます。 (このメールアドレスは架空のものです、一応。) UAによってはナビゲーションバーでtitle属性を参照できるかもしれません。

スタイルシートとタイトル

スタイルシートを関連付ける時にはタイトル要素に注意しましょう。

<p><link rel="stylesheet" href="default.css" type="text/css" />
<link rel="stylesheet" href="normal.css" title="Normal Design" type="text/css" />
<link rel="alternate stylesheet" href="alternate.css" title="Other Design" type="text/css" /></p>

この様な記述があった場合は次のように処理されるはずです。 上手に使えば他の技術(JavaScriptなど)を用いずに様々なデザインを気軽に提供する事が可能です。 が、しかしUAによっては全てのスタイルを適応させてしまうものも存在するので注意が必要です…。

1段目のタイトルの無いdefault.cssが 固定スタイル として関連付けられます。 これは固定ですのでいつでも適応されます。

2段目のタイトルのあるnormal.cssは 優先スタイル として関連付けられます。 これは優先ですので読み込んだ当初、default.cssと共に適応されます。

3段目のalternate.cssはalternateなstylesheetとして関連付けられているので 代替用 の スタイル として関連付けられます。 これは代替ですので通常は適応されません。 閲覧者が指定した場合に優先スタイル、つまりnormal.cssと置き換えられ、default.cssと共に適応されます。

以下のサイトも非常に有用です。必要に応じて参照して下さい。

• モバイルオペラ対策
• title属性をつけてスタイル シートを読み込む場合の注意点

メディア別にスタイルを適応させる

例えばPDAなどに対しては別のスタイルを適応させた方が良い場合が多々あります。 そのような場合は次のような記述が効果的です。 現在(2004年夏)の所効果のある機種は限られていますが、新しい機種はこれに対応してくる事でしょう。 時代の流れはそうなっています。

<p><link rel="stylesheet" href="screen.css" media="screen" type="text/css" />
<link rel="stylesheet" href="handheld.css" media="handheld" type="text/css" /></p>

このように記述した場合はscreenメディアはscreen.cssを、handheldメディアはhandheld.cssを適応させて表示します。

代替文書

スタイルシートの例は前述の通りです。 スタイルシートとタイトルの項を参照してください。 ここでは他の用法を説明します。 但し1つ注意があります。 これで指定した文書は「代替文書」であって、 追い返す文書ではありません 。 決して「対応していません」とだけ書いた寂しいファイルを関連付けないようにしましょう。 その関連付けはいっその事無いほうが良いものになってしまいます。 また、本家の文書を更新したら、代替の文書も共に更新しましょう。 あくまでも 内容が同じでなくては意味がありません 。

<p><link rel="alternate" href="link-en.html" hreflang="en" title="English Version" />
<link rel="alternate" href="link-aural.html" media="aural" title="For Aural Media" />
<link rel="alternate" href="link.pdf" media="print" type="application/pdf" title="For Print" /></p>

この様な記述は次のように解釈されます。

hreflang属性と併用することによって 翻訳版 と関連付ける事が出来ます。 よってlink-en.htmlは英語圏の人が参照すべき代替文書として関連付けられます。 英語圏のUAはもしかしたら代替文書をいきなり表示するかもしれません。

media属性と併用することによって 他のメディア用の文書 と関連付ける事が出来ます。 よってlink-aural.htmlは音声ブラウザ向けの代替文書として関連付けられます。 音声ブラウザはもしかしたら代替文書をいきなり喋り始めるかもしれません。

また、代替文書は必ず同じファイルタイプのものでなくてはならないという条件はありません。 よってlink.pdfのように印刷にはPDFを…何てことも可能になるかもしれません。

ナビゲーションバーとは

次のようなlink要素を記述した文書(この文書)を用いて説明してゆきます。 尚、現在の記述とは若干異なります。

<p><link rev=“made” href=“mailto:krm_car@hotmail.com” />
<link rel=“alternate” type=“application/rss+xml” title=“RSS” href=“/rss.xml” />
<link rel=“shortcut icon” href=“/favicon.ico” type=“image/x-icon” />
<link rel=“start” href=“/” title=“駄的HTML改善計画 Top” />
<link rel=“index” href=“/better/” title=“より良いHTMLを書く為に” />
<link rel=“prev” href=“target.php” title=“target属性の利便性” />
<link rel=“bookmark” href=“#main” title=“本文先頭部” />
<link rel=“bookmark” href=“#whats” title=“link要素とは” />
<link rel=“bookmark” href=“#attr” title=“属性の解説” />
<link rel=“bookmark” href=“#howto” title=“用法” />
<link rel=“bookmark” href=“#navibar” title=“ナビゲーションバーとは” />
<link rel=“bookmark” href=“#helpful” title=“参考リンク” /></p>

Opera7のナビゲーションバー

第3のブラウザと評されるOperaブラウザではどの様に表示されるのでしょうか? Opera7から対応しました。

link要素が存在するページを表示すると図のように、 ホーム 、 索引 、 目次 、 検索 、 用語集 、 ヘルプ 、 最初 、 前へ 、 次へ 、 最後 、 親階層 、 著作権 、 作成者 、 ニュースフィード という14のボタンが表示され、その内指定されているものが選択可能になります。 また、Nextの情報はFast Forward機能の助けとなります。

Mozillaのナビゲーションバー

ココではMozilla1.7.1を用いて説明します。 (Mozillaは何故かナビゲーションバーが表示されない設定が標準になっています。)

mozillaの場合は図のように、 トップ 、 上 、 最初 、 前 、 次 、 最後 、 文書 、 その他 というボタン8つが表示されます。 その内、 文書 、 その他 は更に細分化されています。 文書 の中には 目次 、 章 、 節 、 小節 、 付属書 、 用語集 、 索引 という7つのボタンがあります。 これらのうち複数指定可能な 章 、 節 、 小節 、 付属書 は指定されたもの全てのtitle属性を表示します。 その他 の中には ヘルプ 、 検索 | 著者 、 著作権表示 | ブックマーク | 他のバージョン というようにある程度分けられた状態で6つのボタンが表示されます。 これらも、複数指定可能な ブックマーク 、 他のバージョン を選択すると、指定されたもの全てのtitle属性を表示します。

そう、Operaなど比にならないほどの関連情報を得る事が出来るのです。

Firefoxのナビゲーションバー(Link Toolbar)

Firefoxは先ほど紹介したMozillaのブラウザ部分のみを利用する軽快なブラウザ…だった筈ですが現状はMozillaの方が軽快だったりします。 Firefoxでは 何故かナビゲーションバーが無くなっています 。 これはMozilla Suiteでは標準で無効になっている影響なのでしょうか? それはさておき、ここではLink Toolbarという拡張を入れた場合についての説明になります。 尚、この拡張は日本語化もされています。

Firefoxの拡張「LinkToolbar」の場合は図のように小さなアイコンが7つ追加されます。 それぞれの意味は左から トップ 、 上 、 最初 、 前 、 次 、 最後 、 その他 となっており、該当するボタンがない物に関しては全て「その他」として処理されます。 title属性とhref属性の内容がポップアップするなど、コンパクトながら使いやすいナビゲーションバーです。

その他のUAの対応状況

他にLynxなどのUAも対応しています。 これらは現在調査中……だったりします。