link タグエレメント
link タグエレメントは、サイト内を適切に検索、閲覧できるように誘導する機能や外部ファイルを取り込むための設定をする HTML タグエレメントです。
スタイルシート（ CSS ）ファイルを読み込むにはこの <link> エレメントを使います。
<link rel="stylesheet" href="css/example.css" />
<link> は <head> エレメントに包括されるエレメントです。
<head> エレメントについてはhead タグエレメント
を参照してください。
<link> エレメントには主に以下の rel 属性値があります
- alternate
- 代替ドキュメントへのリンク。多言語対応サイトの構築、RSSに利用
- canonical
- 正規の URL を示す。重複リンクの解消
- icon
- アイコン
- prev、 next
- 前後関係になるページ
- stylesheet
- スタイルシートのインポート
その他の rel 属性値は以下のその他の rel 属性値
を参照してください。
- ad -
属性
link タグエレメントには以下の属性があります。用途によって属性の組み合わせが変わります。
ここでは属性の一覧のみを示します。使用例は以下のExample
を参照してください。
| プロパティ | 概要 |
|---|---|
| as | <link> エレメントがリンクしているコンテンツの種類。DOMString 型 |
| cross-origin | 外部リソースを呼び出す方法で主にセキュリティーに関する CORS の設定。DOMString 型 |
| disabled | リンクが有効であるか否かの取得と設定。Boolean 型 |
| fetch-priority | リソースの読み込みの優先度の設定と取得。 DOMString 型 |
| href | リソースのURLの取得と設定。USVString 型 |
| hreflang | リソースの言語コードの取得と設定。DOMString 型 |
| media | 主にメディアクエリと呼ばれる、 I/O デバイスの指定。メディアタイプとメディア特性で指定。DOMString 型。 |
| referrer-policy | リクエストのヘッダー情報に含むリファラー情報の範囲を指定。 <link> エレメントの referrerpolicy 属性が該当。DOMString 型。 |
| rel | 読み込むリソースの種類。 <link> エレメントの rel 属性が該当。DOMString 型 |
| relList | rel 属性の値をトークンリストで返す。DOMTokenList オブジェクト |
| sizes | リソースのサイズ情報を DOMTokenList オブジェクトで返す |
| sheet | <link> エレメントに関連する StyleSheet オブジェクトを返す |
| type | 読み込むリソースの MIME タイプ。DOMString 型。 |
- ad -
Example
link タグエレメントは、用途によって属性の組み合わせが変わります。以下に用途による使用例を紹介します。
スタイルシートファイル（ CSS ）の読み込み
サイトアイコン
アイコンにおける rel 属性の値は以下のようになります。
- icon... アイコン
- apple-touch-icon... 主に iphone用 のアイコン
- manifest... 主に Android用 のアイコン
type は使用するイメージ形式を指定します。古いブラウザ向けの属性で、多くの場合は無くても自動で認識されます。
使用できるイメージ形式に、.ico
、.png
、.svg
があります。
もしも表示されなかった場合のテキスト表示をする alt 属性が使用できます。alt 属性の値は任意で logo を付けなければならないといった決まりはありません。
正規ページの指定
ページの前後移動
多言語対応のサイト
RSS フィードページ
- ad -
その他の rel 属性値
以下のものもありますが、あまり利用されていないようです。
- author
- 作者へのリンク
- help
- ヘルプのリンク
- license
- 著作権、ライセンスに関する外部ドキュメントへのリンク
- pingback
- pingbackサーバのアドレス
- prefetch
- 先に参照するべきファイルへのリンク
- search
- ドキュメントの関連ページへのリンク
- sidebar
- ブラウザのサイドバーに表示する外部リソース
- tag
- ドキュメントのタグ
JavaScript
<link> のインターフェイスを定義しているのは HTMLLinkElement です。プロパティ、メソッド、イベントについては HTMLLinkElement を参照してください。