HTMLのlinkタグについて
linkタグの定義と使用説明
HTMLの<link>
タグは、外部リソースへのリンクを提供するために使用されます。一般的に、CSSファイルやアイコン、RSSフィードなどをHTMLドキュメントに指定するために使われます。このタグは、通常、<head>
セクションの中で使用されます。
ブラウザのサポート状況
ほとんどの現代的なウェブブラウザは<link>
タグをサポートしています。これは、統一されたウェブ標準として世界中で広く使用されているためです。
ブラウザ | サポート状況 |
---|---|
Google Chrome | 完全サポート |
Mozilla Firefox | 完全サポート |
Safari | 完全サポート |
Microsoft Edge | 完全サポート |
Opera | 完全サポート |
linkタグの属性
<link>
タグには、いくつかの重要な属性があります。
href
: リンク先のURLを指定します。rel
: リンク先と現在の文書の関係を指定します(例:stylesheet
)。type
: リンク先のリソースの種類を指定します(例:text/css
)。media
: リンク先のリソースが適用されるメディアタイプを指定します(例:screen
)。
linkタグのイベント
通常、<link>
タグにはイベントがありません。しかし、CSSファイルの読み込みが完了したことをJavaScriptで検出する場合などに、特定の方法で処理を追加することは可能です。
コード例
以下に、CSSファイルをリンクするための基本的な<link>
タグの使用例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
</head>
<body>
<h1>こんにちは、世界!</h1>
</body>
</html>
QA
Q1: <link>タグはどこに配置するべきですか?
A1: <link>タグは通常、<head>セクション内に配置されます。
Q2: <link>タグのrel属性の例を教えてください。
A2: rel属性の一例としてstylesheet
があります。これは外部CSSファイルをリンクする時に使用されます。
Q3: 複数のCSSファイルをリンクすることは可能ですか?
A3: はい、複数の<link>
タグを使って、複数のCSSファイルをリンクすることができます。