【HTML】「link」タグ - 別ファイルを関係定義・読み込みをする

■ 「link」タグの使い方
■ 「CSS」外部ファイルとリンクさせる方法
■ 「Javascript」外部ファイルとリンクさせる方法
■ 画像を先読み込みする方法
■ 「favicon（ファビコン）」を設定する方法

「link」タグは、他のファイルとの「関連性」「リンク」「先読み込み」などを定義するためのHTMLタグ。
「head」タグの間に記述する。

「link」タグのサンプルコード

linkの属性

属性	意味
disabled	このスタイルシートを無効化。
media	スタイルシートを適用するメディアを指定。 screen＝画面など、ページ分割の無いメディア print＝プリンタなど、ページ分割のあるメディア all＝全メディア（既定値）
type	スタイルシートの言語を指定。 「text/css」＝Cascading Style Sheets 「text/javascript」＝JavaScript Style Sheets 参照先の文書のタイプを記述。 参照先の文書の文書タイプを記述。 関連文書のMIMEタイプ。ブラウザが対応していない形式のデータを無駄に読み込ませないために指定します。
scoped	style要素の親要素をルートとするサブツリーにのみ、スタイルを適用。
href	外部ファイルのURL。 関連文書のURI。
target	表示ターゲットを記述。 関連文書を表示させるフレーム名。
hreflang属性	リンク先の言語バージョンを記述。 参照先の文書の言語を指定。 関連文書の言語コードセット。
rel	この文書からみた別の文書との関係。 「リンクタイプ」といい、リンク先のリソースとの関係を記述。 rel属性の値 説明 preload 画像などの「preload（先読み込み）」 prefetch 「ナビゲーション/ページの読み込み（次のページに移動するときなど）」で使用されるリソースをプリフェッチ（事前読込み）する。 alternate 代替バージョンとなる文書 hreflang属性などと合わせて、ドキュメントの別バージョンへのリンクを用意します。 stylesheet 外部スタイルシート。 別のファイルとして用意したスタイルシートを使う場合に記述。 start 最初の文書 一連の文書の中の最初の文書へのリンクを示します。サーチエンジンのロボットなどへのナビゲーションとしても利用可能。 next 次の文書 順序が定められた一連の文書の中で、次の文書へのリンク。 prev 前の文書 順序が定められた一連の文書の中で、前の文書へのリンク。 contents 目次 現在のドキュメントに対して目次を提供する文書へのリンク。 index 索引。 現在のドキュメントに対してインデックスを提供する文書へのリンク。 glossary この文書で使用されている用語集 copyright 著作権について書かれた文書 chapter 章 section 節 subsection 項 appendix 付録 help ヘルプのある文書 bookmark ブックマーク集 made これのみrev属性の値となる。 ドキュメントの作者を示し、作者へのメールURLや、ホームページのURLを指定。
as	書式：「as="ファイルタイプ"」 どのようなタイプのファイルとして取り扱うか記述。 値 適用先 audio 「audio」要素 document 「iframe」「frame」要素 embed 「embed」要素 fetch 「fetch, XHR」。 この値は 「link」タグ に crossorigin 属性をつけるために必要。 font CSS @font-face image 「img」タグ および「picture」 要素で 「srcset」「imageset」属性が付いているもの。 「SVG」の「image」属性。 CSS の *-image 規則。 object 「object」要素 script 「script」要素、ワーカーの importScripts style 「link rel=stylesheet」要素、 CSS の @import track 「track」要素 video 「video」要素 worker ワーカー、共有ワーカー
rev	別の文書からみたこの文書との関係。 リンクタイプと呼ばれ、リンク元のリソースとの関係を記述。 「HTML5」では廃止された属性。
media属性	リンク先のメディアバージョンを記述。印刷用などへのリンクの際利用する属性。 関連文書が出力するメディアタイプ。デフォルトは｢screen｣ 文書の出力先を指定。 screen - 通常の画面に出力。 print - 印刷プレビュー画面に出力。 all - 全出力先に出力。
title属性	リンク先のタイトルを記述。
charset	デフォルトは、「iso-8859-1」。 関連文書の文字コードセット。 参照先の文書のキャラクタセットを記述。（Shift_Jisなど） 「HTML5」では廃止された属性。 disabled = (e4+)このリンクタグを無効化。
sizes=n	「rel="icon"」の際のアイコンサイズを「sizes="16x16"」という指定で変更する。 「sizes="16x16 32x32" 」という複数記述も可能。

Back

スタイルシート（CSS専用ファイル）を作って、「外部CSSファイル」として、CSSを記述し、 複数のHTMLファイルにリンクさせ、１つのスタイルシートで、複数のWebページのレイアウトデザインを統括できるのが最大のメリット。
複数ページに同じレイアウトデザインを割り当てるときには、外部CSSファイルのスタイルシートを作成して記述するようになっています。
ページをリンクさせるだけで良いのと、修正を加えるときにスタイルシートを変更するだけで良いので、非常に効率が良い。

外部CSSファイル「スタイルシート」のメリット
・外部CSSは、いくつものHTMLドキュメントにリンク可能。
・同じ内容をHTMLドキュメントごとに記述しなくて済むので便利。


「link」タグは、外部ファイルとHTMLファイルをリンクさせるた為のタグ。
CSSのコードを記述した外部ファイルとHTMLファイルをリンクすることによって、 外部ファイルに記述されたCSSを利用することができるようになる。


代替スタイルシートの設定は、
「link」要素、「rel="alternate stylesheet"」「title="..."」属性を使用することで指定可能。

常設

「rel="alternate"」「title=""」がないもの。
常に文書に適用されます。

推奨

「rel="alternate"」がなく、「title="..."」があるもの。
既定で適用されますが、
代替スタイルシートが選択されると無効化される。
推奨スタイルシートは一つしか存在できない。

代替

「rel="alternate stylesheet"」および「title="..."」の指定が必要。
既定では、「無効」で、選択することが可能。

記述例

「Javascript」の「onload」イベントで読み込み完了を判断する方法

Back

「Javascript」は、HTMLファイルに直接記述することができます。
「Javascript」専用の外部ファイルに記述して、リンクさせる方法もあります。
「Javascript」外部ファイルは、ヘッダー部分にのみ記述することになっています。
記載の順序もプログラム実行に影響することがあります。

「Javascript」外部ファイルとリンクさせる書式

「Javascript」を「HTML」に記述する方法

Back

大きな画像を表示するなどをするには、少し時間がかかります。
なので、前もって、画像を「preload（先読み込み）」しておくと、
画像の表示や切り替えがスムーズになる。
表示のズレなどの防止にもなる。

画像を先読み込みする書式

Back

Back