From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/link/index.html | 375 ++++++++++++++++++++++++++++++ 1 file changed, 375 insertions(+) create mode 100644 files/ja/web/html/element/link/index.html (limited to 'files/ja/web/html/element/link') diff --git a/files/ja/web/html/element/link/index.html b/files/ja/web/html/element/link/index.html new file mode 100644 index 0000000000..5b1966e9c4 --- /dev/null +++ b/files/ja/web/html/element/link/index.html @@ -0,0 +1,375 @@ +--- +title: ': 外部リソースへのリンク要素' +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - HTML document metadata + - Link + - Reference + - Web + - Web Performance + - metadata +translation_of: Web/HTML/Element/link +--- +
{{HTMLRef}}
+ +

HTML 外部リソースへのリンク要素 (<link>) は、現在の文書と外部のリソースとの関係を指定します。この要素は{{Glossary("CSS", "スタイルシート")}}へのリンクに最もよく使用されますが、サイトのアイコン ("favicon" スタイルのアイコンと、モバイル端末のホーム画面やアプリのアイコンの両方) の確立や、その他のことにも使用されます。

+ +
{{EmbedInteractiveExample("pages/tabbed/link.html")}}
+ + + +

外部スタイルシートへリンクするには、 {{HTMLElement("head")}} の中に次のような <link> 要素を入れてください。

+ +
<link href="main.css" rel="stylesheet">
+ +

この単純な例では、 href 属性内にスタイルシートへのパスを提供し、 rel 属性の値を stylesheet にしています。 rel は "relationship" を意味し、おそらく <link> 要素の重要な機能の一つです。 — 値はこれを含んでいる文書にどのように関係するかを示します。リンク種別で見られるように、様々な種類の関係があります。

+ +

他にも見かけるであろう他の一般的な種別はたくさんあります。例えば、サイトのファビコンへのリンクがあります。

+ +
<link rel="icon" href="favicon.ico">
+ +

他にもアイコンの rel 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。

+ +
<link rel="apple-touch-icon-precomposed" sizes="114x114"
+      href="apple-icon-114.png" type="image/png">
+ +

sizes 属性はアイコンの寸法を表し、 type はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。

+ +

media 属性でメディア種別やクエリを指定することもできます。このリソースはメディアの条件が真になった場合のみ読み込まれます。

+ +
<link href="print.css" rel="stylesheet" media="print">
+<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
+ +

<link> 要素には、興味深いパフォーマンスやセキュリティの機能もいくつか追加されています。以下の例を見てみましょう。

+ +
<link rel="preload" href="myFont.woff2" as="font"
+      type="font/woff2" crossorigin="anonymous">
+ +

rel が preload の値であることは、ブラウザーがこのリソースを先読みすることを指示しており (詳しくは rel="preload" によるコンテンツの先読みを参照)、 as 属性がコンテンツが読み込まれるされる特定のクラスを示します。 crossorigin 属性はリソースが {{Glossary("CORS")}} リクエストによって読み込まれるかどうかを示します。

+ +

その他の有用なメモです。

+ + + +

属性

+ +

この要素にはグローバル属性があります。

+ +
+
{{HTMLAttrDef("as")}}
+
この属性は、 rel="preload" または rel="prefetch" を <link> 要素に設定した場合に限り使用されます。これは <link> によって読み込まれるコンテンツのタイプを指定する属性であり、リクエストのマッチング、正しいコンテンツセキュリティポリシーの適用、正しい {{HTTPHeader("Accept")}} リクエストヘッダーの設定のために必要です。さらに、 rel="preload" はこれをリクエストの優先度付の信号として使用します。下記の表はこの属性に有効な値と、適用先の要素またはリソースの一覧です。
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値適用先
audio<audio> 要素
document<iframe> および <frame> 要素
embed<embed> 要素
fetch +

fetch, XHR

+ +
+

この値は <link> に crossorigin 属性をつけるために必要です。

+
+
fontCSS @font-face
image<img> および <picture> 要素で srcset または imageset 属性が付いているもの、 SVG の <image> 属性、 CSS の *-image 規則
object<object> 要素
script<script> 要素、ワーカーの importScripts
style<link rel=stylesheet> 要素、 CSS の @import
track<track> 要素
video<video> 要素
workerワーカー、共有ワーカー
+
+
{{HTMLAttrDef("crossorigin")}}
+
この列挙型の属性は、関連リソースを取得する際に {{Glossary("CORS")}} を使用しなければならないかを示します。 CORS が有効な画像は、汚染されることなく {{HTMLElement("canvas")}} 要素で再利用できます。次の値が使用できます。 +
+
anonymous
+
オリジン間リクエスト (つまり、 HTTP の {{HTTPHeader("Origin")}} ヘッダーを持つリクエスト) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、 HTTP ベーシック認証は利用されません)。サーバーが元のサイトに信用情報を付与しない (HTTP の {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーの設定がない) 場合、リソースが汚染され、その使用も制限されます。
+
use-credentials
+
オリジン間リクエスト (つまり、 HTTP の Origin ヘッダーを持つリクエスト) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバーが元のサイトに信用情報を付与しない場合 (HTTP の {{HTTPHeader("Access-Control-Allow-Credentials")}} ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
+
+ この属性が存在しない場合、リソースは {{Glossary("CORS")}} リクエストなしで (Origin HTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード anonymous が指定されたものとして扱われます。それ以上の情報は CORS 設定属性 を参照してください。
+
{{HTMLAttrDef("disabled")}}
+
+

rel="stylesheet" の場合のみ、 disabled は論理属性であり、指定されたスタイルシートを読み込んで文書に適用するかどうかを示します。 disabled が HTML に読み込み時点で指定されていた場合、そのスタイルシートはページ読み込み処理の間に読み込まれません。代わりに、そのスタイルシートは disabled 属性が false に変更されたか削除された場合にオンデマンドで読み込まれます。

+ +

DOM から disabled プロパティの値を変更すると、そのスタイルシートを文書の {{domxref("StyleSheet.disabled")}} のプロパティから削除します。

+
+
{{HTMLAttrDef("href")}}
+
この属性は、リンクしたリソースの {{glossary("URL")}} を指定します。URL は絶対・相対のどちらでもかまいません。
+
{{HTMLAttrDef("hreflang")}}
+
この属性は、リンク先のリソースの言語を示します。これは単なる助言です。許容される値は BCP47 で定めています。この属性は、 {{HTMLAttrxRef("href", "link")}} 属性が提供されている場合にのみ使用します。
+
{{HTMLAttrDef("imagesizes")}}
+
rel="preload" および as="image" において、 imagesizes 属性は、 img 要素によって使用される適切なリソースを、その srcset および sizes 属性に対応する値で先読みすることを示す sizes 属性です。
+
{{HTMLAttrDef("imagesrcset")}}
+
rel="preload" および as="image" において、 imagesrcset 属性は img 要素によって使用される適切なリソースを、その srcset および sizes 属性に対応する値で先読みすることを示す sourceset 属性です。
+
{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}
+
この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータである、ブラウザーに取得させたリソース (ファイル) の暗号学的ハッシュを BASE64 でエンコードしたデータを含みます。Subresource Integrity をご覧ください。
+
{{HTMLAttrDef("media")}}
+
この属性は、リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリーでなければなりません。この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。 +
+

注:

+ +
    +
  • HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディアタイプとグループ で、print, screen, aural, braille などの使用可能な値が定義されています。 HTML5 ではこれがあらゆるメディアクエリに拡張され、 HTML 4 で使用できる値の上位互換となっています。
    • +
  • CSS3 メディアクエリに対応していないブラウザーは、リンクを適切に理解するとは限りません。 HTML 4 で定義されたメディアクエリーのセットに制限されるので、フォールバックリンクを設定することを忘れないでください。
    • +
+
+
+
{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}
+
この属性は、おそらく次のナビゲーション先で必要でありユーザーエージェントが取得すべきであるリソースを特定します。これは将来リソースがリクエストされたときに、ユーザーエージェントが早く応答することを可能にします。
+
{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}
+
リソースを読み込む際にどのリファラーを使用するかを示す文字列です。 +
    +
  • no-referrer は、{{HTTPHeader("Referer")}} ヘッダーを送信しないことを表します。
    • +
  • no-referrer-when-downgrade は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は {{HTTPHeader("Referer")}} ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
    • +
  • origin は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
    • +
  • origin-when-cross-origin は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
    • +
  • unsafe-url は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
    • +
+
+
{{HTMLAttrDef("rel")}}
+
この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。
+
{{HTMLAttrDef("sizes")}}
+
この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、 {{HTMLAttrxRef("rel","link")}} の値が icon 又は Apple の apple-touch-icon のような標準外の種別が含まれている場合にのみ指定することができます。以下の値を指定できます。 +
    +
  • any: image/svg+xml のようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。
    • +
  • ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ <幅のピクセル値>x<高さのピクセル値> または <幅のピクセル値>X<高さのピクセル値> という形式です。それぞれのサイズがリソースに含まれていることが必要です。
    • +
+ +
+

注: ほとんどのアイコン形式は1個のアイコンのみ保存可能です。よってほとんどの場合、 {{HTMLAttrxRef("sizes")}} 属性はエントリーが1個だけになります。アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。 ICO の方が一般的であり、複数ブラウザーの対応 (特に IE の古いバージョン) が重要である場合はこの形式を使用してください。

+
+
+
{{HTMLAttrDef("title")}}
+
title 属性は、<link> 要素では特別な意味があります。<link rel="stylesheet"> で使用すると、優先スタイルシートか代替スタイルシートか を定義します。間違って使用すると スタイルシートが無視されます。
+
{{HTMLAttrDef("type")}}
+
この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/html や text/css などの MIME タイプにします。この属性の一般的な使用法は、参照されるスタイルシートのタイプ (text/css など) の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、 type 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。また rel="preload" リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。
+
+ +

標準外の属性

+ +
+
{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}
+
この属性の値は、オブジェクト上で動作する関数についての情報を提供します。この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(title 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザーが選択します。検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらず対応もされていません。Methods プロパティ (MSDN) をご覧ください。
+
{{HTMLAttrDef("target")}} {{Non-standard_Inline}}
+
定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。
+
+ +

廃止された属性

+ +
+
{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}
+
この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は {{rfc(2045)}} で定義されている文字セットの、スペースまたはカンマで区切られたリストです。既定値は iso-8859-1 です。 +
使用上のメモ: この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。
+
+
{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}
+
この属性の値は、{{HTMLAttrxRef("href", "link")}} 属性で定義したリンク先文書に対する、現在の文書の関係を示します。従って、この属性は rel 属性の値と比べたときに逆向きの関係を定義します。この属性向けのリンク種別の値は、{{HTMLAttrxRef("rel", "link")}} 向けの値と似ています。
+
+
+

注: この属性は WHATWG HTML living standard (MDN が正式とみなしている仕様書) で廃止とみなされています。しかし、 rev は W3C 仕様書では廃止とみなされていないことは注目に値します。とはいうものの、不確実性を考えると、 rev に頼ることは賢明ではありません。

+ +

代わりに、逆の意味のリンク種別の値を与えた {{HTMLAttrxRef("rel", "link")}} 属性を使用してください。例えば made は author に置き換えます。また、この属性はリビジョン (revision) を表すものではなく、バージョン番号を指定してはいけませんが、残念ながらいくつものサイトでそのように使用されています。

+
+
+
+ +

例

+ +

スタイルシートの読み込み

+ +

ページにスタイルシートを読み込むには、以下の構文を使用します。

+ +
<link href="style.css" rel="stylesheet">
+
+ +

代替スタイルシートの提供

+ +

代替スタイルシートも提示できます。

+ +

ユーザーはメニューの 表示 > スタイルシート で、使用するスタイルシートを選択できます。これは、ユーザーがページをさまざまなバージョンで閲覧する手段を提供します。

+ +
<link href="default.css" rel="stylesheet" title="Default Style">
+<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
+<link href="basic.css" rel="alternate stylesheet" title="Basic">
+
+ +

異なる利用場面のアイコンの提供

+ +

同じページにいくつかの異なるアイコンへのリンクを含めて、ブラウザーが rel や sizes の値をヒントとして使用し、特定の場面で最適に動作する一つを選択するようにすることができます。

+ +
<!-- 高解像度ディスプレイの第三世代 iPad -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
+<!-- 高解像度ディスプレイの iPhone -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
+<!-- 第一、第二世代の iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
+<!-- 高解像度でない iPhone, iPod Touch, Android 2.1 以降の端末 -->
+<link rel="apple-touch-icon-precomposed" href="favicon57.png">
+<!-- 基本的なファビコン -->
+<link rel="shortcut icon" href="favicon32.png">
+ +

メディアクエリのついた条件付きのリソース読み込み

+ +

以下のように、メディア種別やクエリを media 属性で指定することができます。このリソースはメディア条件が真の場合にのみ読み込まれます。

+ +
<link href="print.css" rel="stylesheet" media="print">
+<link href="mobile.css" rel="stylesheet" media="all">
+<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
+<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
+
+ +

スタイルシートの load イベント

+ +

load イベントの発生を確認することで、スタイルシートが読み込まれた時を判断できます。同様に error イベントを確認することで、スタイルシートを処理する際のエラー発生を検出できます。

+ +
<script>
+var myStylesheet = document.querySelector('#my-stylesheet');
+
+myStylesheet.onload = function() {
+  // Do something interesting; the sheet has been loaded
+}
+
+myStylesheet.onerror = function() {
+  console.log("An error occurred loading the stylesheet!");
+}
+</script>
+
+<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">
+
+ +
+

注: load イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。

+
+ +

Preload の例

+ +

rel="preload" によるコンテンツの先読みに、<link rel="preload"> の例がいくつかあります。

+ +

技術的概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリメタデータコンテンツ。 itemprop 属性がある場合はフローコンテンツ、記述コンテンツ
許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
タグの省略空要素であるため開始タグは必須であり、終了タグは置いてはいけません。
許可されている親要素メタデータ要素を受け入れるすべての要素。 itemprop 属性がある場合は記述コンテンツを受け入れるすべての要素。
暗黙の ARIA ロールhref 属性つきの {{ARIARole("link")}}
許可されている ARIA ロール許可されている role なし
DOM インターフェイス{{DOMxRef("HTMLLinkElement")}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}{{Spec2("HTML WHATWG")}}最新のスナップショットから変更なし。
{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}{{Spec2("HTML5 W3C")}}crossorigin 属性および sizes 属性を追加。media の値をすべてのメディアクエリーに拡張。rel に多くの新たな値を追加。
{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}{{Spec2('HTML4.01')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.link", 3)}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf