◀ 2.

HTML link要素 完全ガイド（外部CSS読み込み / favicon / preload / rel属性 / a要素との違い）

▶
編集
この記事の要点

link要素とは

は HTML 文書と外部リソースの関係（relationship）を宣言する要素です。<head> 内に書き、画面には表示されません。CSS の読み込み、favicon の指定、リソースのプリロード、RSS フィードの宣言などに使われます。クリックできる「リンク」とは別物で、それは <a> 要素です。

基本構文

<head>
  <!-- 外部 CSS の読み込み -->
  <link rel="stylesheet" href="/css/style.css">

  <!-- favicon -->
  <link rel="icon" href="/favicon.ico">

  <!-- スマホ向けアイコン（iOS） -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- RSS フィード -->
  <link rel="alternate" type="application/rss+xml"
        href="/feed.xml" title="このサイトのRSS">

  <!-- 正規URL -->
  <link rel="canonical" href="https://example.com/article/123">
</head>

主な属性

属性意味例
relリソースとの関係（必須）stylesheet / icon / preload / canonical
hrefリソースの URL/css/style.css
typeMIME タイプtext/css / image/x-icon
media適用条件（メディアクエリ）(max-width: 600px)
aspreload 時のリソース種別script / style / font
crossoriginCORS / プリロード設定anonymous
integritySRI ハッシュ（改ざん検知）sha384-...
hreflangリソースの言語en

rel 属性の代表値

値用途
stylesheet外部スタイルシート（CSS）
iconfavicon
apple-touch-iconiOS ホーム画面用アイコン
manifestPWA のマニフェスト
canonical正規 URL（SEO）
alternateRSS フィード / 多言語ページ
preload後で使うリソースを早期取得
prefetch次のページ遷移を見越して事前取得
preconnect外部ホストに早めに接続（DNS+TCP+TLS）
dns-prefetchDNS だけ事前解決

media 属性で条件付き読み込み

media 属性は、画面幅や印刷時など条件にマッチしたときだけCSS を適用する仕組みです。マッチしない CSS はレンダリングをブロックしないため、表示パフォーマンスにも有利です。

<!-- すべての画面 -->
<link rel="stylesheet" href="/css/main.css">

<!-- スマホ用 -->
<link rel="stylesheet" href="/css/mobile.css"
      media="(max-width: 600px)">

<!-- 印刷用 -->
<link rel="stylesheet" href="/css/print.css" media="print">

preload で早期取得

あとで使うとわかっているリソース（フォント、重要画像、JS）を早めに取得させ、レンダリング開始を待たせない用途で使います。as 属性で種別を指定する必要があります。

<!-- Web フォントを先に取りに行く -->
<link rel="preload" href="/fonts/main.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- 重要画像 -->
<link rel="preload" href="/img/hero.jpg" as="image">

<!-- 後で使う JS -->
<link rel="preload" href="/js/dashboard.js" as="script">

SRI（改ざん検知）

CDN から CSS / JS を読み込むときに、ハッシュ値で内容を検証できます。改ざんされたファイルが配信された場合、ブラウザは読み込みを拒否します。

<link rel="stylesheet"
      href="https://cdn.example.com/lib.css"
      integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
      crossorigin="anonymous">

と の違い

項目
表示されないされる
クリック不可可
置く場所 内 内
用途リソース・関係の宣言ユーザーが押すリンク

よくある落とし穴

  • に書くと無視されがち — <head> 内に置く
  • 閉じタグは書かない（空要素）。XHTML 時代の <link ... /> は HTML5 では不要
  • preload に as を付け忘れると2 度ダウンロードされる
  • CDN フォント等で crossorigin を忘れると preload が効かない

関連
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. a要素
  2. link要素
  3. button要素
2026-06-11 07:10:02 guest 167

人気ページ

最近更新/作成されたページ