link
link要素は、関連する別の文章やファイルなどを示すための空要素です。
head要素 内で指定し、href属性とrel属性は必ず指定する必要があり、色々な目的で利用します。
カテゴリー
メタデータコンテンツ
body 内で利用可能な場合: フローコンテンツ、フレージングコンテンツ
link属性
| href | 文書のURLを指定。 |
|---|---|
| crossorigin | CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。 |
| rel |
この文書から見た、参照先の文書との関係。 stylesheet、alternate、dns-prefetch、icon、next、pingback、preconnect、prefetch、preload、prerender、search、serviceworker |
| media |
文書の出力先を指定します。 screen（画面出力用）, print（印刷用）, all（全て） |
| nonce |
CSP(Content Security Policy)チェックで用いられるワンタイムトークンを指定します。 クロスサイトスクリプティング(XSS)の対策として、HTTPレスポンスヘッダに、Content-Security-Policyに設定したnonce属性と同じものでない場合、実行されなくすることができます。 |
| hreflang | 参照先の文書の言語を指定します。 |
| type |
文書のタイプを指定します。 text/html や text/css などの MIME タイプを指定します。 |
| referrerpolicy |
リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。 no-referrer、no-referrer-when-downgrade、same-origin、origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin、unsafe-url |
| sizes | rel=”icon” の際のアイコンサイズを指定します。 |
link使用例
link要素(stylesheetを指定する例)
[html highlight=”7″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TOP | tech.pjin.jp</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<p>default.cssはこのファイルと同階層にあることになります。</p>
<p>変更したい場合は、相対パス又は絶対パスで指定します。</p>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TOP | tech.pjin.jp</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<p>default.cssはこのファイルと同階層にあることになります。</p>
<p>変更したい場合は、相対パス又は絶対パスで指定します。</p>
</body>
</html>
[/html]
link要素(アイコンを指定する例)
[html highlight=”7″]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU | TECH PJIN</title>
<link rel="icon" href="favicon.png" sizes="16×16" type="image/png">
</head>
<body>
<p>faviconを指定する例です。</p>
</body>
</html>
[/html]
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU | TECH PJIN</title>
<link rel="icon" href="favicon.png" sizes="16×16" type="image/png">
</head>
<body>
<p>faviconを指定する例です。</p>
</body>
</html>
[/html]
