linkタグの使い方と外部リソースをHTMLに関連付ける方法をわかりやすく解説

INDEX

linkの概要

外部リソースをHTMLに関連付ける HTMLタグ

<link rel=”種類” href=”URL”>

概要 linkタグは、HTML文書に外部リソース（CSS、アイコン、フォントなど）を関連付けるために使用されます。通常、headタグ内に記述されます。

属性	説明	使用例
`rel`	リソースの関係性を指定	`<link rel="stylesheet" href="style.css">`
`href`	関連付けるリソースのURL	`<link rel="stylesheet" href="style.css">`
`type`	リソースのMIMEタイプを指定（省略可能）	`<link rel="stylesheet" type="text/css" href="style.css">`
`media`	適用するメディアタイプを指定	`<link rel="stylesheet" media="screen" href="style.css">`
`sizes`	アイコンサイズ（favicon用）	`<link rel="icon" sizes="32x32" href="favicon.png">`
`as`	プリロードするリソースの種類	`<link rel="preload" as="image" href="banner.jpg">`

linkタグを使用して外部CSSファイルをHTMLに適用する方法を示します。

<head>
    <link rel="stylesheet" href="styles.css">
</head>

以下のCSSを適用すると、背景色が青になります。

body {
    background-color: blue;
}

linkタグを使用して、ブラウザのタブに表示されるアイコン（favicon）を指定できます。

<link rel="icon" href="favicon.ico" type="image/x-icon">

この設定を適用すると、ブラウザのタブに「favicon.ico」が表示されます。

Google Fontsを適用するには、linkタグを使用して外部フォントを読み込みます。

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>

この設定を適用すると、ページ内のフォントが「Roboto」に変わります。

linkタグを使用して、ページ読み込み時に特定のリソースを事前読み込みできます。

<link rel="preload" as="image" href="hero.jpg">

Q: linkタグに閉じタグは必要ですか？: A: いいえ、linkタグは空要素なので閉じタグ（</link>）は不要です。
Q: CSSを適用する際、linkタグとstyleタグの違いは？: A: linkタグは外部CSSを適用するのに対し、styleタグはHTML内で直接CSSを記述するために使用されます。
Q: linkタグを使わずにCSSを適用できますか？: A: はい、styleタグを使用するか、インラインCSS（style=""）を利用する方法もありますが、外部CSSを適用する場合はlinkタグを使うのが一般的です。
Q: linkタグで複数のCSSファイルを読み込めますか？: A: はい、複数のlinkタグを使用して複数のCSSファイルを適用できます。
Q: linkタグはSEOに影響しますか？: A: はい、適切なCSSの適用やファビコンの設定はSEOの改善に寄与します。