Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】link要素の使い方

link要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

linkオブジェクトは、現在のHTMLドキュメントと外部リソースとの関連性を定義するオブジェクトです。これは主に、ウェブページのデザインを制御するスタイルシート(CSS)ファイルを読み込むために使用されます。例えば、<link rel="stylesheet" href="style.css">のように記述することで、外部のCSSファイルを現在のHTMLドキュメントに適用し、ウェブページの見た目を統一的に管理できます。

この要素は通常、HTMLドキュメントの<head>要素内に配置され、ブラウザがページをレンダリングする前に必要な外部リソースを事前に読み込む役割を果たします。スタイルシート以外にも、ウェブサイトのタブやブックマークに表示されるファビコン(サイトアイコン)を指定するためにも利用されます(例: <link rel="icon" href="favicon.ico">)。

link要素の重要な属性には、関連性の種類を指定するrel属性と、外部リソースのURLを指定するhref属性があります。他にも、リソースのMIMEタイプを指定するtype属性や、特定のメディア(画面サイズなど)にのみ適用するかどうかを制御するmedia属性など、用途に応じた様々な属性が存在します。

また、ウェブパフォーマンスの最適化にも貢献し、リソースのプリロード(例: <link rel="preload">)やプリフェッチ(例: <link rel="prefetch">)といった高度な機能を通じて、ユーザーエクスペリエンスの向上にも役立てることができます。このように、linkオブジェクトは、ウェブページの見た目、機能、そしてパフォーマンスを外部ファイルと連携させるための基盤となる、非常に重要なHTML要素です。

構文(syntax)

1<link rel="stylesheet" href="style.css">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ