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

外部スタイルシートへリンクするには、 <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">

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

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

  • <link> 要素はリンク種別body-ok であるかどうかによって、 <head> 要素または <body> 要素のどちらかに置くことができます。例えば stylesheet リンク種別は body-ok であり、<link rel="stylesheet"> を body 要素内に置くことができます。しかし、これは従うべき良い方法ではありません。 <link> 要素は <head> に入れて本文から離した方が分かりやすくなります。
  • サイトにファビコンを設定するために <link> を使用する場合で、サイトがセキュリティの強化のために Content Security Policy (CSP) を使用している場合、ファビコンにポリシーが適用されます。ファビコンが読み込まれないという問題が発生したら、 Content-Security-Policy ヘッダーの img-src ディレクティブがアクセスを禁止していないかどうか確認してください。
  • HTML および XHTML の仕様では <link> 要素向けのイベントハンドラーを定義していますが、それらがどのように使用されるかは不明確です。
  • XHTML 1.0 では <link> のような空要素では、 <link /> のように末尾のスラッシュが必要です。
  • WebTV は relnext の値を使用して、一連の文書の次のページを先読みすることに対応しています。

属性

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

as
この属性は、<link> 要素に rel="preload" を置いた場合に限り使用されます。これは <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 ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が存在しない場合、リソースは CORS 要求なしで (Origin HTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード 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 で定義されたメディアクエリーのセットに制限されるので、フォールバックリンクを設定することを忘れないでください。
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 の方が一般的であり、こちらを使用するとよいでしょう。
title
title 属性は、<link> 要素では特別な意味があります。<link rel="stylesheet"> で使用すると、優先スタイルシートか代替スタイルシートか を定義します。間違って使用すると スタイルシートが無視されます
type
この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/htmltext/css などの MIME タイプにします。この属性の一般的な使用法は、参照されるスタイルシートのタイプ (text/css など) の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、 type 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。また rel="preload" リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。

標準外の属性

disabled
この属性は、リンクの関係を無効化するために使用します。スクリプトと連携して、さまざまなスタイルシートの関係を有効化・無効化するためにこの属性を使用できます。

メモ: HTML 標準に disabled 属性は存在しませんが、HTMLLinkElement DOM オブジェクトに disabled 属性が存在します

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

廃止された属性

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

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

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

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">

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

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

<!-- 高解像度ディスプレイの第三世代 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
<script> の定義
勧告 integrity 属性を追加。
HTML Living Standard
<link> の定義
現行の標準 最新のスナップショットから変更なし。
HTML5
<link> の定義
勧告 crossorigin 属性および sizes 属性を追加。media の値をすべてのメディアクエリーに拡張。rel に多くの新たな値を追加。
HTML 4.01 Specification
<link> の定義
勧告  
Resource Hints
prefetch の定義
草案 dns-prefetch, preconnect, prefetch, prerender を追加。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
charset
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
crossoriginChrome 完全対応 25Edge 未対応 なしFirefox 完全対応 18IE 未対応 なしOpera 完全対応 15Safari ? WebView Android ? Chrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 18Opera 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 未対応 なし
hrefChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hreflangChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
integrity
実験的
Chrome 完全対応 45Edge 未対応 なしFirefox ? IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
mediaChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
methods
非推奨非標準
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 完全対応 4Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
prefetch
実験的
Chrome 完全対応 56Edge ? Firefox ? IE 未対応 なしOpera 完全対応 43Safari ? WebView Android 完全対応 56Chrome Android 完全対応 56Edge Mobile ? Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 6.0
referrerpolicyChrome 完全対応 51Edge 未対応 なしFirefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 11.1WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile 未対応 なしFirefox Android 完全対応 50Opera Android 完全対応 38Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
relChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
rel: Alternative stylesheets.Chrome ? Edge ? Firefox 完全対応 3IE ? Opera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
rel.dns-prefetch
実験的
Chrome 完全対応 46Edge ? Firefox 完全対応 3IE ? Opera ? Safari ? WebView Android 完全対応 46Chrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
rel.manifest
実験的非標準
Chrome 未対応 なしEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 4.0
rel.modulepreload
実験的
Chrome 完全対応 66Edge ? Firefox ? IE ? Opera 完全対応 53Safari ? WebView Android 完全対応 66Chrome Android 完全対応 66Edge Mobile ? Firefox Android ? Opera Android 完全対応 53Safari iOS ? Samsung Internet Android ?
rel.noopener
非標準
Chrome 完全対応 49Edge 未対応 なしFirefox 完全対応 52
補足
完全対応 52
補足
補足 Prior to Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
IE 未対応 なしOpera 完全対応 36Safari 完全対応 10.1WebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 未対応 なしFirefox Android 完全対応 52
補足
完全対応 52
補足
補足 Prior to Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
Opera Android 完全対応 32Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0
rel.preconnect
実験的
Chrome 完全対応 46Edge 未対応 なしFirefox 完全対応 39
補足
完全対応 39
補足
補足 Before Firefox 41, it doesn't obey the crossorigin attribute.
IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 完全対応 46Chrome Android 完全対応 42Edge Mobile 未対応 なしFirefox Android 完全対応 39
補足
完全対応 39
補足
補足 Before Firefox 41, it doesn't obey the crossorigin attribute.
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 完全対応 50Edge ? Firefox 未対応 56 — 57
補足
未対応 56 — 57
補足
補足 Disabled due to various web compatibility issues (e.g. bug 1405761). An improved version that works for non-cacheable resources is expected to land soon.
IE ? Opera ? Safari ? WebView Android 完全対応 50Chrome Android 完全対応 50Edge Mobile ? Firefox Android 未対応 56 — 57
補足
未対応 56 — 57
補足
補足 Disabled due to various web compatibility issues (e.g. bug 1405761). An improved version that works for non-cacheable resources is expected to land soon.
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 ?
revChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
sizes
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 441770.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 441770.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
target
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
titleChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
typeChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, dlwe, yyss, takahashim
最終更新者: mfuji09,