HTML 外部リソースへのリンク要素 (<link>) は、現在の文書と外部のリソースとの関係を指定します。この要素はスタイルシートへのリンクに最もよく使用されますが、サイトのアイコン ("favicon" スタイルのアイコンとモバイルのホーム画面/アプリのアイコンの両方) の確立や、その他のことにも使用されます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
外部スタイルシートへリンクするには、 <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 属性はリソースが CORS リクエストによって読み込まれるかどうかを示します。
その他の有用なメモです。
<link>要素はリンク種別が body-ok であるかどうかによって、<head>要素または<body>要素のどちらかに置くことができます。例えばstylesheetリンク種別は body-ok であり、<link rel="stylesheet">を body 要素内に置くことができます。しかし、これは従うべき良い方法ではありません。<link>要素は<head>に入れて本文から離した方が分かりやすくなります。- サイトにファビコンを設定するために
<link>を使用する場合で、サイトがセキュリティの強化のためにコンテンツセキュリティポリシー (CSP) を使用している場合、ファビコンにポリシーが適用されます。ファビコンが読み込まれないという問題が発生したら、Content-Security-Policyヘッダーのimg-srcディレクティブがアクセスを禁止していないかどうか確認してください。 - HTML および XHTML の仕様では
<link>要素向けのイベントハンドラーを定義していますが、それらがどのように使用されるかは不明確です。 - XHTML 1.0 では
<link>のような空要素では、<link />のように末尾のスラッシュが必要です。 - WebTV は
relにnextの値を使用して、一連の文書の次のページを先読みすることに対応しています。
属性
この要素にはグローバル属性があります。
as- この属性は、
rel="preload"またはrel="prefetch"を<link>要素に設定した場合に限り使用されます。これは<link>によって読み込まれるコンテンツのタイプを指定する属性であり、コンテンツの優先度づけ、リクエストのマッチング、正しいコンテンツセキュリティポリシーの適用、正しいAcceptリクエストヘッダーの設定のために必要です。 crossorigin- この列挙型の属性は、関連リソースを取得する際に CORS を使用しなければならないかを示します。 CORS が有効な画像は、汚染されることなく
<canvas>要素で再利用できます。次の値が使用できます。anonymous- オリジン間リクエスト (つまり、 HTTP の
Originヘッダーを持つリクエスト) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、 HTTP ベーシック認証は利用されません)。サーバーが元のサイトに信用情報を付与しない (HTTP のAccess-Control-Allow-Originヘッダーの設定がない) 場合、画像が汚染され、その使用も制限されます。 use-credentials- オリジン間リクエスト (つまり、 HTTP の
Originヘッダーを持つリクエスト) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバーが元のサイトに信用情報を付与しない場合 (HTTP のAccess-Control-Allow-Credentialsヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
OriginHTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード anonymous が指定されたものとして扱われます。それ以上の情報は CORS 設定属性 を参照してください。 href- この属性は、リンクしたリソースの URL を指定します。URL は絶対・相対のどちらでもかまいません。
hreflang- この属性は、リンク先のリソースの言語を示します。これは単なる助言です。許容される値は BCP47 で定めています。この属性は、
href属性が提供されている場合にのみ使用します。 importance- リソースの相対的な重要性を示します。優先度のヒントは以下の値を使用して委任されます。
-
auto: 設定なしを表します。ブラウザーはリソースの優先度を決めるために、独自の経験則を使用するかもしれません。high: リソースが高い優先度のものであることをブラウザーに示します。low: リソースが低い優先度のものであることをブラウザーに示します。メモ:
importance属性は<link>要素にrel="preload"またはrel="prefetch"がある場合にのみ使用されます。 integrity- この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータである、ブラウザーに取得させたリソース (ファイル) の暗号学的ハッシュを BASE64 でエンコードしたデータを含みます。Subresource Integrity をご覧ください。
media- この属性は、リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリーでなければなりません。この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。
メモ:
- HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディアタイプとグループ で、
print,screen,aural,brailleなどの使用可能な値が定義されています。 HTML5 ではこれがあらゆるメディアクエリに拡張され、 HTML 4 で使用できる値の上位互換となっています。 - CSS3 メディアクエリに対応していないブラウザーは、リンクを適切に理解するとは限りません。 HTML 4 で定義されたメディアクエリーのセットに制限されるので、フォールバックリンクを設定することを忘れないでください。
- HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディアタイプとグループ で、
referrerpolicy- リソースを読み込む際にどのリファラーを使用するかを示す文字列です。
no-referrerは、Refererヘッダーを送信しないことを表します。no-referrer-when-downgradeは、TLS (HTTPS) を使用せずに生成元へナビゲートする場合はRefererヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。originは、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。origin-when-cross-originは、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。unsafe-urlは、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
rel- この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。
sizes- この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、
relの値がicon又は Apple のapple-touch-iconのような標準外の種別が含まれている場合にのみ指定することができます。以下の値を指定できます。any:image/svg+xmlのようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。- ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ
<幅のピクセル値>x<高さのピクセル値>または<幅のピクセル値>X<高さのピクセル値>という形式です。それぞれのサイズがリソースに含まれていることが必要です。
メモ: ほとんどのアイコン形式は1個のアイコンのみ保存可能です。よってほとんどの場合、
sizesはエントリーが1個だけになります。アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。 ICO の方が一般的であり、こちらを使用するとよいでしょう。 titletitle属性は、<link>要素では特別な意味があります。<link rel="stylesheet">で使用すると、優先スタイルシートか代替スタイルシートか を定義します。間違って使用すると スタイルシートが無視されます。type- この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/html や text/css などの MIME タイプにします。この属性の一般的な使用法は、参照されるスタイルシートのタイプ (text/css など) の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、
type属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。またrel="preload"リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。
標準外の属性
disabled- この属性は、リンクの関係を無効化するために使用します。スクリプトと連携して、さまざまなスタイルシートの関係を有効化・無効化するためにこの属性を使用できます。
メモ: HTML 標準に
disabled属性は存在しませんが、HTMLLinkElementDOM オブジェクトにdisabled属性が存在します。 methods- この属性の値は、オブジェクト上で動作する関数についての情報を提供します。この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(title 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザーが選択します。検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらず対応もされていません。Methods プロパティ (MSDN) をご覧ください。
prefetch安全なコンテキスト用- この属性は、おそらく次のナビゲーション先で必要でありユーザーエージェントが取得すべきであるリソースを特定します。これは将来リソースがリクエストされたときに、ユーザーエージェントが早く応答することを可能にします。
target- 定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。
廃止された属性
charset- この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は RFC 2045 で定義されている文字セットの、スペースまたはカンマで区切られたリストです。既定値は
iso-8859-1です。使用上のメモ: この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP のContent-Typeヘッダーを使用してください。 rev- この属性の値は、
href属性で定義したリンク先文書に対する、現在の文書の関係を示します。従って、この属性はrel属性の値と比べたときに逆向きの関係を定義します。この属性向けのリンク種別の値は、rel向けの値と似ています。
CSS でのスタイル付け
<link> 要素はウェブ文書上で視覚的に現れませんので、悩ましいスタイルの考慮事項はありません。
例
スタイルシートの読み込み
ページにスタイルシートを読み込むには、以下の構文を使用します。
<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 属性がある場合はフローコンテンツ、記述コンテンツ |
|---|---|
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。 |
| 許可されている親要素 | メタデータ要素を受け入れるすべての要素。 itemprop 属性がある場合は記述コンテンツを受け入れるすべての要素。 |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLLinkElement |
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Preload | 勧告候補 | <link rel="preload"> および as 属性を定義。 |
| Subresource Integrity lt;link> の定義 |
勧告 | integrity 属性を追加。 |
| HTML Living Standard <link> の定義 |
現行の標準 | 最新のスナップショットから変更なし。 |
| HTML5 <link> の定義 |
勧告 | crossorigin 属性および sizes 属性を追加。media の値をすべてのメディアクエリーに拡張。rel に多くの新たな値を追加。 |
| HTML 4.01 Specification <link> の定義 |
勧告 | |
| Resource Hints prefetch の定義 |
草案 | dns-prefetch, preconnect, prefetch, prerender を追加。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
link | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
charset | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
crossorigin | Chrome 完全対応 25 | Edge 未対応 なし | Firefox 完全対応 18 | IE 未対応 なし | Opera 完全対応 15 | Safari ? | WebView Android ? | Chrome Android 完全対応 あり | Edge Mobile 未対応 なし | Firefox Android 完全対応 18 | Opera Android ? | Safari iOS ? | Samsung Internet Android 完全対応 あり |
disabled | Chrome 未対応 なし | Edge 完全対応 あり | Firefox 未対応 なし | IE 完全対応 あり | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 完全対応 あり | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
href | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
hreflang | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
integrity | Chrome 完全対応 45 | Edge 未対応 なし | Firefox ? | IE 未対応 なし | Opera ? | Safari 未対応 なし | WebView Android 完全対応 45 | Chrome Android 完全対応 45 | Edge Mobile 未対応 なし | Firefox Android ? | Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 5.0 |
media | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
methods | Chrome 未対応 なし | Edge ? | Firefox 未対応 なし | IE 完全対応 4 | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile ? | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
prefetch | Chrome 完全対応 56 | Edge ? | Firefox ? | IE 未対応 なし | Opera 完全対応 43 | Safari ? | WebView Android 完全対応 56 | Chrome Android 完全対応 56 | Edge Mobile ? | Firefox Android ? | Opera Android 完全対応 43 | Safari iOS ? | Samsung Internet Android 完全対応 6.0 |
prefetch: Secure context required | Chrome 完全対応 64 | Edge ? | Firefox ? | IE 未対応 なし | Opera ? | Safari ? | WebView Android 完全対応 64 | Chrome Android 完全対応 64 | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
referrerpolicy | Chrome 完全対応 51 | Edge 未対応 なし | Firefox 完全対応 50 | IE 未対応 なし | Opera 完全対応 38 | Safari 完全対応 11.1 | WebView Android 完全対応 51 | Chrome Android 完全対応 51 | Edge Mobile 未対応 なし | Firefox Android 完全対応 50 | Opera Android 完全対応 38 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 7.2 |
rel | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
rel: Alternative stylesheets. | Chrome ? | Edge ? | Firefox 完全対応 3 | IE ? | Opera 完全対応 あり | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android 完全対応 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
rel.dns-prefetch | Chrome 完全対応 46 | Edge ? | Firefox 完全対応 3 | IE ? | Opera ? | Safari ? | WebView Android 完全対応 46 | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 完全対応 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android 完全対応 あり |
rel.manifest | Chrome 未対応 なし | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android 完全対応 39 | Chrome Android 完全対応 39 | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android 完全対応 4.0 |
rel.modulepreload | Chrome 完全対応 66 | Edge ? | Firefox ? | IE ? | Opera 完全対応 53 | Safari ? | WebView Android 完全対応 66 | Chrome Android 完全対応 66 | Edge Mobile ? | Firefox Android ? | Opera Android 完全対応 53 | Safari iOS ? | Samsung Internet Android ? |
rel.noopener | Chrome 完全対応 49 | Edge 未対応 なし | Firefox
完全対応
52
| IE 未対応 なし | Opera 完全対応 36 | Safari 完全対応 10.1 | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Edge Mobile 未対応 なし | Firefox Android
完全対応
52
| Opera Android 完全対応 32 | Safari iOS 完全対応 10.3 | Samsung Internet Android 完全対応 5.0 |
rel.preconnect | Chrome 完全対応 46 | Edge 未対応 なし | Firefox
完全対応
39
| IE 未対応 なし | Opera ? | Safari 未対応 なし | WebView Android 完全対応 46 | Chrome Android 完全対応 42 | Edge Mobile 未対応 なし | Firefox Android
完全対応
39
| Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 4.0 |
rel.prefetch | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
rel.preload | Chrome 完全対応 50 | Edge ? | Firefox
未対応
56 — 57
| IE ? | Opera ? | Safari ? | WebView Android 完全対応 50 | Chrome Android 完全対応 50 | Edge Mobile ? | Firefox Android
未対応
56 — 57
| Opera Android ? | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
rel.prerender | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
rev | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
sizes | Chrome 未対応 なし | Edge 未対応 なし | Firefox
未対応
なし
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android
未対応
なし
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
target | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
title | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
type | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。