link要素の使い方は?HTML5の要素を使いこなそう【HTML編】

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子
ペン子

link要素っていつ使うの?

ユキ
ユキ

外部のファイルを関連づけるときに使うよ!

結論からいうと、link要素は外部のファイルをHTML文書に関連づけたいときにときに使います。

今回はlink要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。


スポンサーリンク

1: link要素とは

link要素とは、外部のファイルをHTML文書に関連づけるための要素です。

link要素は文書メタデータで、ページに関する情報を表現します。
検索エンジンやブラウザに対する情報なので、実際に目には見えなくても内部的に重要な役目を果たしてくれます。
主にCSSのファイルと関連づける時に使用します。link要素は頻繁に使うことになるでしょう。
ファイル一つ一つは島のようなものでlinkは島を繋げる橋だと思ってください。

2: link要素の使い方

<head> <link rel="stylesheet" href="style.css">
</head>

head要素内にlink要素を指定します。

rel属性にはリンク先のファイルとの関係を指定します。上記ではstylesheetと記述しましたが、これはスタイルシートとの関係を表します。関係には他にもcanonicalやauthorなどがあります。
href属性には、ファイルのパスを指定します。上位の階層を指定する時には「../」を忘れないようにしましょう。
CSSの指定がうまくいかない場合は、たいていここの記述が間違っていることがよくあるので気をつけましょう。

まとめ

今回はlink要素についてと使い方について解説しました。

head要素はメタデータを保持する箱のようなもので、HTMLを記述する時には必ず使う要素になります。メタデータを学んで上手に使いこなせるようになりましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした!