HTML & CSS

リファレンス

HTML

リンク

link要素

ページに外部リソースを読み込んだり、関連付ける場合に使用します。

サンプルコード

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="canonical" href="https://gray-code.com">
  • カテゴリー

    メタデータコンテンツ

  • コンテンツモデル

    なし(属性のみ指定)

  • 使用ケース

    head要素内など、メタデータコンテンツが期待される場所に書きます。

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

href

リソースのリンク先URLを指定します。

rel

現在のページに対する、リンク先リソースの位置付けを指定します。

  • alternate

    現在のページの代替となるページを指定

  • author

    著作情報を指定

  • help

    現在のページに対するヘルプページを指定

  • icon

    ページのアイコン(ファビコン)を指定

  • license

    ライセンスページを指定

  • next

    現在のページが連続したページの1部であった場合に、次ページのリンクを指定

  • prev

    現在のページが連続したページの1部であった場合に、前ページのリンクを指定

  • prefetch

    リンク先リソースをあらかじめキャッシュするよう指定

  • search

    関連ページを検索するページURLを指定

  • stylesheet

    スタイルシートを表します。

media

リンク先リソースの該当するメディアを指定します。PCなどのディスプレイであれば「screen」、テレビであれば「tv」、モバイルデバイスであれば「handheld」など。

hreflang

リンク先リソースの言語を指定します。例えばリンク先が英語で記述されたページであれば「en」、日本語だったら「ja」というように指定します。リンク先リソースが現在のページと同じ言語の場合は省略することができます。

type

リンク先リソースのMIMEタイプを指定します。

type

リンク先リソースのMIMEタイプを指定します。スタイルシートであれば「text/css」、PDFファイルは「application/pdf」など。

sizes

アイコン画像を読み込む場合にサイズを指定します。値は「横幅x高さ」の形式(「x」は半角英字のエックス)で指定します。サイズを複数指定することもでき、その場合は「sizes=”16×16 32×32″」と半角スペースで区切って指定してください。

使用例

スタイルシートを読み込む

こちらは最も一般的な読み込み方法となります。

<link rel="stylesheet" type="text/css" href="style.css">

優先スタイルシートを指定したい場合はtitle属性を指定します。下記の例では1行目のスタイルシートを読み込んでから、2・3行目のうち、先に記述されている2行目だけが読み込まれます。

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" title="スタイルシート1" href="style.css">
<link rel="stylesheet" type="text/css" title="スタイルシート2" href="style.css">

rel属性に「alternate」を指定してtitle属性も指定すると、閲覧者が代替スタイルシートを選択することができます。下記の例では1行目のスタイルシートを読み込みつつ、ブラウザーのメニューなどから2・3行目のいずれかのスタイルシートを選択できるようになります。

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="alternate stylesheet" type="text/css" title="スタイルシート1" href="style.css">
<link rel="alternate stylesheet" type="text/css" title="スタイルシート2" href="style.css">

アイコン(ファビコン)を読み込む

ブラウザーのタブやブックマーク一覧に表示される、サイトのアイコンを指定します。
2行目はWindowsのInternetExploere用に用意する場合にのみ記述します。

スマホやタブレットのブックマーク機能として、アプリのようにホーム画面へリンクを表示させることができます。3行目は、その時に表示されるアイコン画像を指定する場合に記述します。

<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="img/spicon.png">

著者情報としてGoogle+アカウントを関連付ける

Google+のプロフィールページへのURLを使うことで、Googleの検索結果で表示される際にGoogle+に登録された著者情報を表示させることができます。

<link rel="author" href="Google+アカウントのURL">

検索エンジンに対し、正式なURLを指定する

WordPressなどのCMSを使用している場合などに、1つのページに対し複数のURLが存在することがあります。しかし、検索エンジンはURLが異なると別ページとして扱ってしまいます。そのようなことを防ぐために本来のURLを指定することで、「複数のURLからアクセスできるけど、本当はこのURLからアクセスされることを想定しています」と示すことができます。

<link rel="canonical" href="https://gray-code.com">

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。