link要素

HTMLでは、CSSファイルを読み込んだり、ファビコンを表示させたりすることができます。

本ページでは、link要素について説明します。

link要素とは

link要素を使うと、現在のHTML文書を他のファイルにリンクさせることができます。例えば、CSSファイルにリンクして適用したりします。

linkの定義は、以下のとおりです。

【linkの定義】
コンテンツカテゴリ メタデータコンテンツ
bodyに記述可能な場合：フローコンテンツ、フレージングコンテンツ
可能な親要素 メタデータコンテンツを包含できる要素
head内のnoscript
bodyに記述可能な場合：フレージングコンテンツを包含できる要素
可能なコンテンツ なし(空要素)
タグの省略 開始タグは必須。終了タグはなし。
DOMインターフェース HTMLLinkElement

利用例

以下は、linkを使ったHTMLの例です。

【linkの利用例】
<head>
<meta charset="utf-8">
<meta name="description" content="ページの説明">
<link rel="stylesheet" href="css/style.css">
<title>ページのタイトル</title>
</head>

head要素内で、CSSファイルを指定しています。

属性

グローバル属性と、以下が使えます。

as
先読みする時のファイルの種類を指定します。rel属性がpreloadなどで使います。
crossorigin
CORS(Cross-Origin Resource Sharing)の利用を定義します。
disabled
CSSファイルを読み込みません。rel属性がstylesheetの時に使います。
href
リンク先のURLを指定します。
hreflang
リンク先の言語を指定します。
imagesizes
画像を先読みする時のサイズを指定します。rel属性がpreloadで、as属性がimageの時に使います。
imagesrcset
先読みする画像を指定します。rel属性がpreloadで、as属性がimageの時に使います。
integrity
他サーバから取得したファイルで、改ざんチェックをします。改ざんされている場合は、適用しません。
media
リンク先から読み込むメディアを指定します(メディアクエリ)。
referrerpolicy
送信するリファラーを指定します。
rel
リンク先との関係を指定します。
sizes
アイコンのサイズを指定します。rel属性がiconかapple-touch-iconの時に使います。
title
CSSのタイトルを指定します。同じタイトルのものはグループ化され、スタイルの切り替えなどに利用されます。
type
リンク先のメディアタイプ(htmlやpng)を示します。例えば、text/html、image/pngなどと指定します。

次からは、各属性の利用例を示します。

as属性

as属性の利用例は、以下のとおりです。

【as属性の利用例】
<link rel="preload" href="test.js" as="script">

上記により、HTMLの最初の方でtest.jsが読み込まれます。このため、script要素で実行する際は、すぐに実行が可能になります。asには、以下が指定できます。

【as属性で使える値(例)】
値 説明
audio 音声ファイル
document HTMLファイル
font フォントファイル
image 画像ファイル
script JavaScriptファイル
style CSSファイル
video 動画ファイル

例えば、as="image"と指定しておくと、画像ファイルを先にダウンロードしておくため、早く表示できます。

crossorigin属性

crossorigin属性の利用例は、以下のとおりです。

【crossorigin属性の利用例】
<link rel="preload" href="https://example.com/test.js" as="script" crossorigin>

上記により、クロスオリジンからJavaScriptを先読みするようになります。詳細は、「crossorigin属性」をご参照ください。

disabled属性

disable属性の利用例は、以下のとおりです。

【disabled属性の利用例】
<link rel="stylesheet" href="style.css" disabled>

上記により、style.cssは読み込まれません。JavaScriptなどを利用して、disabledをfalseにすることで読み込まれるようになります。

href属性

href属性の利用例は、以下のとおりです。

【href属性の利用例】
<link rel="stylesheet" href="css/style.css">

読み込む先のURLを指定します。https://example.com/css/style.cssなど、ドメイン含めた指定もできます。

hreflang属性

hreflang属性の利用例は、以下のとおりです。

【hreflang属性の利用例】
<link rel="alternate" hreflang="en" href="https://examp.com/en/index.html">

rel="alternate"は、代替ページを示します。このlinkを記述したページが日本語の場合、検索サイトに対してhreflang="en"によって、リンク先が同じ内容の英語版であることを示せます。

使える値は、グローバル属性のlangと同じです。

imagesrcsetとimagesizes属性

imagesrcsetとimagesizes属性の利用例は、以下のとおりです。

【imagesrcsetとimagesizes属性の利用例】
<head>
<link rel="preload" as="image"
      imagesrcset="image-300w.png 300w, image-900w.png 900w"
      imagesizes="50vw">
</head>

<body>
<img src="image.png" alt="画像の説明"
     srcset="image-300w.png 300w, image-900w.png 900w"
     sizes="50vw">
</body>

img要素でsrcsetを使うと、ディスプレイで表示できるCSS幅で、表示する画像が変わります。sizes="50vw"は、ディスプレイの半分の大きさ以下の画像サイズを使うことを意味します。つまり、この値によって使われる画像ファイルが異なるということです。

link要素のimagesrcsetは、この画像ファイルを指定します。また、imagesizesは、img要素のsizes属性の値を指定します。これで、img要素で使う画像(例えば、image-300w.pngだけ)が先読みできます。

img要素のsrcsetやsizes属性については、「画像のRetinaディスプレイ対応」をご参照ください。

integrity属性

integrity属性の利用例は、以下のとおりです。

【integrity属性の利用例】
<link rel="stylesheet" href="https://example.com/css/style.css" integrity="sha512-xxxxxxx" crossorigin>

赤字部分は、ハッシュ関数とstyle.cssのハッシュ値が入ります。読み込んだstyle.cssをハッシュしてこの値と比較することで、改ざんチェックが行えます。詳細は、「integrity属性」をご参照ください。

media属性

media属性の利用例は、以下のとおりです。

【media属性の利用例】
<link rel="stylesheet" href="css/style.css" media="screen and (min-width: 768px)">

上記により、CSSピクセルで768px以上の横幅があれば、style.cssが適用されます。これは、パソコン用スタイルと、スマートフォン用スタイルで切り替えるレスポンシブウェブデザインで利用されます。詳細は、「メディアクエリの説明と設定」をご参照ください。

referrerpolicy属性

referrerpolicy属性の利用例は、以下のとおりです。

【referrerpolicy属性の利用例】
<link rel="stylesheet" href="https://example.com/css/style.css" crossorigin referrerpolicy="no-referrer">

上記により、style.cssを読み込む際にリファラーを送信しなくなります。詳細は、「referrerpolicy属性」ご参照ください。

rel属性

rel属性の利用例は、以下のとおりです。

【rel属性の利用例】
<link rel="stylesheet" href="css/style.css">

上記により、style.cssのスタイルが適用されます。

relでは、以下の値が使えます。

【rel属性で使える値(例)】
値 説明 body-ok
alternate 代替えCSSやページなどを示します。 -
canonical 内容が似たページ(同じ製品の色違いを説明したページなど)を示します。 -
icon アイコンを示します。ファビコンとして使われます。 -
preload 画像などを先読みします。 〇
stylesheet 読み込むCSSファイルを示します。 〇

body-okとは、relがこの値であればbody要素に記述できるということです。

次からは、それぞれの値での利用例を示します。

alternate

alternateの利用例は、以下のとおりです。

【alternateの利用例】
<link rel="stylesheet" href="css/style1.css" title="test1">
<link rel="stylesheet alternate" href="css/style2.css" title="test2">

通常は、style1.cssが適用されます。style2.cssは、代替スタイルシートとなります。ブラウザによっては、切り替えが可能です。

canonical

canonicalの利用例は、以下のとおりです。

【canonicalの利用例】
<link rel="canonical" href="shoes-green.html">

上記により、このlinkを記述したページより、shoes-green.htmlの方が優先して検索結果に表示されるようになります。また、ページ移転などでも使えます。詳細は、「ドメイン変更によるサイト移転」をご参照ください。

icon

iconの利用例は、以下のとおりです。

【iconの利用例】
<link rel="icon" href="images/favicon.ico">

上記により、favicon.icoがファビコンになります。詳細は、「ファビコンの作り方と設置方法」をご参照ください。

preload

preloadの利用例は、以下のとおりです。

【preloadの利用例】
<link rel="preload" href="test.js" as="script">

上記により、test.jsを先読みするようになります。

stylesheet

stylesheetの利用例は、以下のとおりです。

【stylesheetの利用例】
<link rel="stylesheet" href="css/style.css">

上記により、style.cssのスタイルが適用されます。

sizes属性

sizes属性の利用例は、以下のとおりです。

【sizes属性の利用例】
<link rel="icon" href="images/favicon.ico" sizes="32x32">

上記により、32px × 32pxのアイコンであることが示せます。ICO形式では、複数サイズのアイコンが含まれる可能性があります。その際は、半角スペースで区切って記述します。ブラウザでは、利用するアイコンを決める際に、このサイズを参考にします。

なお、rel属性でapple-touch-iconを指定した時も使えます。apple-touch-iconは標準外ですが、タッチアイコンが使えます。詳細は、「タッチアイコンの設置方法」をご参照ください。

title属性

title属性の利用例は、以下のとおりです。

【title属性の利用例】
<meta http-equiv="default-style" content="test2">
<link rel="stylesheet" href="css/style1.css" title="test1">
<link rel="stylesheet alternate" href="css/style2.css" title="test2">
<link rel="stylesheet alternate" href="css/style3.css" title="test2">

meta要素で、デフォルトのCSSがtest2と指定されています。このため、style2.cssとstyle3.cssがデフォルトで適用されます。

type属性

type属性の利用例は、以下のとおりです。

【type属性の利用例】
<link rel="preload" href="test.mp4" as="video" type="video/mp4"">

上記により、test.mp4を先読みしますが、typeによりファイル形式がMP4であることがわかるため、ブラウザで対応していない場合は読み込みません。

typeで使えるのは、MIMEタイプです。以下に一例を示します。

【type属性で使える値(例)】
値 説明
text/css CSSファイル
text/html HTMLファイル
text/javascript JavaScriptファイル
text/plain 一般テキストファイル
image/gif GIF形式画像ファイル
image/jpeg JPEG形式画像ファイル
image/png PNG形式画像ファイル
video/mp4 MP4形式動画ファイル

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
link 〇 〇 〇 〇 〇 〇
as ？ ？ ？ ？ ？ ？
crossorigin × 〇 〇 〇 ？ 〇
disabled 〇 〇 〇 〇 〇 〇
href 〇 〇 〇 〇 〇 〇
hreflang 〇 〇 〇 〇 〇 〇
imagesizes × 〇 〇 〇 × 〇
imagesrcset × 〇 〇 〇 × 〇
integrity × 〇 〇 〇 〇 〇
media 〇 〇 〇 〇 〇 〇
referrerpolicy × 〇 〇 〇 〇 〇
rel 〇 〇 〇 〇 〇 〇
sizes × × × × × ×
title 〇 〇 〇 〇 〇 〇
type 〇 〇 〇 〇 〇 〇
【スマートフォン】
項目 Sa An Op Ch Fx Sm
link 〇 〇 〇 〇 〇 〇
as ？ ？ ？ ？ ？ ？
crossorigin ？ 〇 ？ 〇 〇 〇
disabled 〇 〇 〇 〇 〇 〇
href 〇 〇 〇 〇 〇 〇
hreflang 〇 〇 〇 〇 〇 〇
imagesizes × 〇 〇 〇 〇 〇
imagesrcset × 〇 〇 〇 〇 〇
integrity 〇 〇 〇 〇 〇 〇
media 〇 〇 〇 〇 〇 〇
referrerpolicy × 〇 〇 〇 〇 〇
rel 〇 〇 〇 〇 〇 〇
sizes × × × × × ×
title 〇 〇 〇 〇 〇 〇
type 〇 〇 〇 〇 〇 〇
〇
サポート
△
制限あり
×
未サポート
？
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

「HTML要素(タグ)一覧」に戻る