【HTML】linkタグで外部ファイルにリンクしたり関係を定義する方法

このページについて

このページではHTMLで使えるlinkの使い方を解説しています。

linkは現在のドキュメントと外部ファイルを繋げる機能を持っています。その時に外部ファイルとの関係性を定義することで、正常に読み込む事が可能となります。

linkは終了タグ不要です。中にリンク先を示すhref属性と、リンク先との関係性を示すrel属性を使用します。基本的にこの2つは必須と言ってもいい属性となります。

<link rel="リンク先との関係性" href="リンク先URL">

基本的にはこれだけでもOKです。

スタイルシートは外部で1つ作成し、HTML側で読み込んでレイアウトを構築していく外部スタイルシートと呼ばれる方法が一般的です。その時にスタイルシートを読み込む方法として使われるのも、今回のlinkです。

<link rel="stylesheet" href="スタイルシート.css">

rel属性に関しては個別のページを参照してください。簡単に書くと「リンク先はstylesheetですよ」っていうのを、ここで宣言しています。

href属性でリンク先を書きますが、同ドメイン内であれば相対参照で書く事ができます。ドメインが異なる場合は絶対参照で書きましょう。

linkで使える属性はそこそこ多く、どれもがaタグなどと同じようなリンク先の情報を示すものだったりします。

名前	設定値	解説
crossorigin	anonymous use-credentials	要素がクロスオリジン要求を処理する方法を指定
href	URL	リンク先のURLを記述します
hereflang	言語コード	リンク先の言語のコードを書く事でリンク先言語をブラウザに伝える事ができます
media	media query	リンク先のドキュメントが表示できるデバイスを指定します
regerrerpolicy	no-referrer no-referrer-hwn-downgrade origin origin-when-cross-origin-unsage-url	リソースの取得時に使用するリファラーを指定します
rel	alternate author dns-prefetch help icon license next pingback preconnect prefatch preload prerender prev search stylesheet	リンク先のリソースの種類を指定します
sizes	縦横のサイズ	rel属性のiconでのみ使用可能で、縦と横のサイズを指定します
title		優先スタイルシート、代替えスタイルシートを定義します
type	メディアタイプ	リンク先文書のメディアタイプを指定します

このように色々と使える属性があります。とはいえ必須というか常用するのはrel属性とhref属性の2つなのでまずはその2つの使い方を覚えてしまいましょう。

その他に、グローバル属性・イベント属性をサポートしています。

linkは現在のドキュメントと外部ファイルとの関係性を定義し、繋げる機能を持っています。

使用する属性により色々と情報を加えることもできるので適切な設定をしましょう。