HTML
リソースのリンク
サーチ…
前書き
多くのスクリプト、アイコン、およびスタイルシートをHTMLマークアップに直接書き込むことができますが、これらのリソースを独自のファイルに含めて文書にリンクする方が効率的です。このトピックでは、スタイルシートやスクリプトなどの外部リソースをHTMLドキュメントにリンクする方法について説明します。
構文
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
パラメーター
| 属性 | 詳細 |
|---|---|
charset | リンクされたドキュメントの文字エンコーディングを指定します。 |
crossorigin | 要素がクロスオリジン要求を処理する方法を指定します。 |
href | リンクされたドキュメントの場所を指定します。 |
hreflang | リンクされたドキュメントのテキストの言語を指定します。 |
media | リンクされたドキュメントを表示するデバイスを指定します。問題のデバイスに基づいてスタイルシートを選択する際によく使用されます |
rel | 必須です。現在のドキュメントとリンクされているドキュメントとの関係を指定します。 |
rev | リンクされたドキュメントと現在のドキュメントとの関係を指定します。 |
sizes | リンクされたリソースのサイズを指定します。 rel="icon"ときのみ、 |
target | リンクされたドキュメントの読み込み先を指定します。 |
type | リンクされたドキュメントのメディアタイプを指定します。 |
integrity | ブラウザがその合法性を検証できるように、リンクされたリソースのbase64でエンコードされたハッシュ（sha256、sha384、またはsha512）を指定します。 |
外部CSSスタイルシート
<link rel="stylesheet" href="path/to.css" type="text/css">
標準的な方法は、HTMLの上部にある<head>タグの内側にCSS <link>タグを配置することです。この方法では、CSSがロードされるまで、スタイルの設定されていないHTMLを表示するのではなく、CSSが最初にロードされ、ロード中のページに適用されます。 HTML5は通常CSSをサポートするため、HTML5ではtype属性は不要です。
<link rel="stylesheet" href="path/to.css" type="text/css">
そして
<link rel="stylesheet" href="path/to.css">
HTML5でも同じことをする。
@import一般的ではありませんが、直接的なCSS内で@importステートメントを使用する方法もあります。このような：
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
同期
<script src="path/to.js"></script>
標準的な練習はJavaScriptを配置することです<script>ちょうど閉じる前にタグ</body>タグ。スクリプトを最後にロードすると、サイトのビジュアルがより速く表示され、JavaScriptがまだ読み込まれていない要素とやりとりするのを妨げます。
非同期
<script src="path/to.js" async></script>
別の方法として、ロード中のJavascriptコードがページの初期化に必要でない場合、非同期にロードしてページの読み込みを高速化することができます。 asyncを使用すると、ブラウザの内容が並行して読み込まれ、完全にダウンロードされると、Javascriptファイルを解析するためにHTML解析が中断されます。
据え置き
<script src="path/to.js" defer></script>
遅延スクリプトは、非同期スクリプトと似ていますが、HTMLが完全に解析された後にのみ解析が実行される点が異なります。遅延スクリプトは、同期スクリプトと同様に、宣言順にロードされることが保証されています。
<noscript>
<noscript>JavaScript disabled</noscript>
<noscript>要素は、ユーザーがスクリプトを無効にしている場合、またはブラウザがスクリプトの使用をサポートしていない場合に表示されるコンテンツを定義します。 <noscript>タグは、 <head>または<body>いずれかに配置できます。
ファビコン
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
PNGファイルにはMIMEタイプのimage/pngを使用し、アイコン（ *.ico ）ファイルにはimage/x-iconを使用します。違いは、 このSOの質問を参照してください。
ウェブサイトのルートにあるfavicon.icoという名前のファイルは、通常<link>タグを必要とせずに自動的に読み込まれて適用されます。このファイルが変更された場合、ブラウザのキャッシュを更新するのが遅く、頑強になる可能性があります。
代替CSS
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
一部のブラウザでは、代替スタイルシートが提供されている場合に適用されます。デフォルトでは適用されませんが、通常はブラウザの設定で変更できます：
Firefoxでは、[表示]> [ページスタイル]サブメニューを使用してスタイルシートを選択できるようになりました。また、Internet Explorerではこの機能（Internet Explorer 8以上）もサポートされています。この機能を使用してください（バージョン48以降）。 Webページは、ユーザーがスタイルを切り替えるための独自のユーザーインターフェイスを提供することもできます。
（出典： MDN Docs ）
Webフィード
rel="alternate"属性を使用して、Atom / RSSフィードの検出を許可します。
<link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed.xml" />
RSSフィードとAtomic RSSのMDNドキュメントを参照してください。
リンク 'media'属性
<link rel="stylesheet" href="test.css" media="print">
Mediaは、どのタイプのメディアにどのスタイルシートを使用するかを指定します。 print値を使用すると、印刷ページのスタイルシートのみが表示されます。
この属性の値は、 メディア mediatype値 （CSS メディアクエリに類似）のいずれかにすることができます 。
前と次
たとえば、ページが一連の記事の一部である場合、 prevとnextを使用して前後にあるページをポイントすることができます。
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
リソースのヒント：dns-prefetch、prefetch、prerender
事前接続
preconnect関係は、DNSを解決する点でdns-prefetchに似ています。ただし、TCPハンドシェイクとオプションのTLSネゴシエーションも行います。これは実験的な機能です。
<link rel="preconnect" href="URL">
DNSプリフェッチ
ブラウザーにURLのDNSを解決するよう通知するので、そのURLのすべてのアセットがより高速に読み込まれます。
<link rel="dns-prefetch" href="URL">
プリフェッチ
特定のリソースをプリフェッチする必要があることをブラウザーに通知し、より迅速にロードできるようにします。
<link rel="prefetch" href="URL">
DNS-Prefetchはドメイン名のみを解決し、プリフェッチは指定されたリソースをダウンロード/格納します。
事前レンダリング
ブラウザがバックグラウンドでURLを取得してレンダリングするように通知するので、ユーザーがそのURLに移動する際に瞬時にユーザーに配信できます。これは実験的な機能です。
<link rel="prerender" href="URL">