この記事ではHTMLのlinkタグを使う方法について解説します！linkタグは基本的にはheadタグの中で、CSSなどの外部ファイルを読み込むときに使われています。
ただ、aタグとはどう違うのか、また外部ファイルを読み込む以外の使い道はあるのかなど、よく分からないという方もいるかもしれません。この記事では、
aタグとの違いを知りたい。
といった方に向けて、
- aタグとの違い
- linkタグの基本的な使い方
について解説していきます。易しいサンプルコードも掲載していくのでぜひご覧ください！
linkタグとは
まずはlinkタグがどのようなものなのかを知っておきましょう。linkタグはそのページと関係する他のページを関係づけるためのタグになります。といっても、このタグがWebサイトの見栄えに直接関係することはありません。
なので、基本的にはheadタグの中で書かれます。このlinkタグはよく、外部ファイルになっているCSSやJavaScriptを読み込んだり、faviconと呼ばれるWebサイトのアイコンを読み込むために使われています。
aタグとは
リンクという単語から、aタグを連想した方もいるかもしれません。aタグはHTMLの文章の一部をハイパーリンクにするタグになります。
一般的にリンクといえばハイパーリンクを指すので、文章中でリンクを作る場合はこのタグを使う必要があります。
linkタグとaタグの違い
ここでlinkタグとaタグの違いについてを一旦整理しておきましょう。linkタグは先程解説したように、Webサイトの見栄えに直接関係することはありません。ただaタグはインライン要素として、文章の中でハイパーリンクを作ります。
基本的なハイパーリンクを作りたい場合はaタグを使い、HTMLから他のファイルを読み込みたい場合はlinkタグを使いましょう。
linkタグの使い方
それでは実際にlinkタグの使い方を見ていきましょう。ここでは代表的な、
- CSSやJavaScriptを読み込む方法
- faviconを設定する方法
について解説していきます。
CSSやJavaScriptを読み込む方法
それではCSSやJavaScriptなどを読み込んでみましょう。これらのファイルはHTMLとは切り離して、.cssファイルや.jsファイルとして外部に保存している場合があります。
そしてそのファイルは先程のlinkタグを使って読み込む必要があります。こちらのコードを見てみましょう。
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<div class="text">text</div>
</html>
CSS
.text {
color: blue;
}
実行結果
このように、style.cssに書き込まれたCSSがlinkタグによって、実際に動いていることがわかるかと思います。rel属性ではこのHTMLとCSSとの関係（relation）を、href属性には読み込みたいファイルのパス（場所）を指定しています。
faviconを設定する方法
次はfaviconを設定してみましょう。faviconはWebサイトを訪問したときやブックマークに登録したときに見られる小さなアイコンのことです。
faviconの例
これを読み込むときも、linkタグを使います。こちらをご覧ください。
<link rel="icon" href="favicon.ico">
この一文を追加することでfavicon.icoというアイコンをfaviconに設定することができます。ただ、.icoという画像ファイルを使う機会は少ないと思います。そこで、
<link rel="icon" type="image/png" href="favicon.png">
のように、type属性を設定することで.pngや.gifなどの画像ファイルもfaviconとして設定することができます。
まとめ
この記事ではlinkタグの基本的な解説についてをしてきました。linkタグの使い方については分かっていただけたでしょうか？
linkタグは本文中では使うことはありませんが、faviconを設定したり、CSSやJavaScriptを外部ファイルとして使う場合は必須になるタグです。ぜひこの記事でlinkタグの使い方について学習してみてください。
