HTMLのheadタグの中には、Webサイトの裏側の情報を載せるタグを記述します。linkタグは外部ファイルを読み込む記述で、CSSファイルを読み込んだりファビコンを設定することができます。
この記事では、「linkタグの使い方と属性」について解説していきます。
この記事のゴールは「linkタグの役割と属性について理解すること」です。
いっしょに学習していきましょう。
- HTMLのlinkタグの使い方
- linkタグの属性の知識
- linkタグとaタグの違いの知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
HTMLのlinkタグとは
linkタグは別のWebサイトのページや別ファイルと関連付けるためのタグです。linkタグはheadタグの中で使用します。linkタグにはdivタグやpタグのような閉じタグがないのが特徴です。
基本書式
<link 属性名＝"属性値">基本書式にコードを当てはめると、下記になります。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>出力結果
linkタグで設定した内容は検証ツールで確認することができます。
上記の場合、style.cssファイルを読み込んでいる記述になります。rel="stylesheet" で、このページにstyle.cssというスタイルシートを関連づけることができます。
linkタグの属性
linkタグにはさまざまな属性を設定することができます。linkタグでよく使われる属性は下記のとおりです。
linkタグの属性
- rel：そのページ、ファイルとの関係性を指定する
- href：ページ、ファイルの場所を指定する
- hreflang：参照先の基本言語を指定する
- media：外部の対象メディアを指定する
- type：参照先の文書のタイプを指定する
- sizes：linkタグによって関連付けられた画像ファイルのサイズを指定する
これらの属性についてひとつずつ解説していきます。
linkタグのrel属性：そのページ、ファイルとの関係性を指定する
rel属性はそのページ、ファイルとの関係性を指定することができます。
下記の場合、外部スタイルシートを参照しているので、この文書から見て「外部の文書（この場合はstyle.css)」との関係性を指定しています。
<head>
<link rel="stylesheet" href="css/style.css">
</head>rel="stylesheet" はrel属性の中でも最もよく見られる形です。
上記の他にもさまざまなrel属性の値があります。
- author：作者について説明する
- canonical：現在の文書の優先URLを指定する
- icon：アイコンを読み込む
- license：ライセンス文書
- tag：文書に指定されたタグページ...etc
rel属性の値をすべて覚える必要はありません。
ここではrel属性にはさまざまな値があり、用途に応じて使い分ける必要がある、ということを覚えておきましょう。
linkタグのhref属性：ページ、ファイルの場所を指定する
href属性は、hypertext reference（ハイパーテキスト リファレンス）の略称で、リンク先を指定することができます。
下記指定の場合、cssフォルダの中にあるstyle.cssを指定しています。
<head>
<link rel="stylesheet" href="css/style.css">
</head>href属性は相対パス・絶対パスの2つの方法で指定できます。上記コードの場合、相対パスで指定しています。
href属性については下記ハイパーリンクの記事で紹介していますので、ご一読ください。
linkタグのhreflang属性：参照先の基本言語を指定する
hreflang属性は参照先の基本言語を指定することができます。多言語サイトの場合は設定が必要になります。
日本語ユーザー向けには日本語のサイトを見せる必要があり、英語ユーザーには英語のサイトを見せる必要があります。hreflang属性を指定すると、ユーザーが使用する言語のページを検索結果に表示することができます。
<link rel="alternate" hreflang="ja" href="日本語サイトのURL">
<link rel="alternate" hreflang="en" href="英語サイトのURL">
<link rel="alternate" hreflang="de" href="ドイツ語サイトのURL">hreflangの値は言語コードを指定します。日本語であれば「ja」、英語であれば「en」、ドイツ語であれば「de」、という具合です。
言語コードに関しては下記サイトをご覧ください。
rel属性のalternate（オルトネイト）は、スマホサイトのURLや多言語サイトのような、言語ごとに複数のバージョンがある場合のURLを、検索エンジンに伝える役割があります。
linkタグのmedia属性：外部の対象メディアを指定する
media属性は外部の対象メディアを指定することができます。
media属性で設定できるメディアタイプには下記のものがあります。
- all：全てのデバイス
- print：プリンタ向け
- screen：print以外の全てのデバイス向け
メディアタイプを省略した場合はallが適用されます。
<link rel="stylesheet" href="css/style.css" media="all">
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/screen.css" media="screen">また、media属性ではウィンドウサイズによってCSSを切り替えることができます。
下記コードでは画面幅によって適用するcssファイルを切り替えています。
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 画面幅が767px以下の場合のCSS -->
<link rel="stylesheet" href="css/style2.css" media="(max-width: 767px)"/>
<!-- 画面幅が768px以上の場合のCSS -->
<link rel="stylesheet" href="css/style1.css" media="(min-width: 768px)"/>
</head>
<body>
<p>画面幅で色が変わります。</p>
</body>/* style1.css */
p {
color: orange;
}/* style2.css */
p {
color: blue;
}出力結果
画面幅最大から768pxまでは文字色がオレンジ、767pxから最小幅までは青色でスタイルが適用されます。
linkタグのtype属性：参照先の文書のタイプを指定する
type属性は参照先の文書のタイプを指定することができます。
代表的なタイプは下記になります。
- CSS（スタイルシート）：text/css
- PNG：image/png
- GIF：image/gif
コードに当てはめると下記のようになります。
type="text/css"
<link rel="stylesheet" type="text/css" href="css/style.css">image/png
<link rel="icon" type="image/png" href="sample.png">image/gif
<link rel="icon" type="image/gif" href="dummy.gif">
linkタグのsizes属性：linkタグによって関連付けられた画像ファイルのサイズを指定する
sizes属性はアイコンの大きさを指定することができます。sizes属性はrel属性の値に、「icon」「apple-touch-icon」を指定してアイコンを読み込んだ場合に適用されます。
<head>
<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
</head>sizesの値は「横幅x高さ」のピクセル数で指定します。
linkタグとaタグの違い
linkタグは、ここまで解説したように指定しているページと関係のあるページを関連づけるためのタグです。外部ファイル（例：CSSファイルなど）を読み込んだりするものの、基本的にはWebサイトの見た目に直接関係しません。
aタグは文書の中でハイパーリンクをつくることができるタグです。ます。例えばページ内リンクを設定したり、外部のWebサイトにリンクすることができます。
まとめ
linkタグについて解説しました。linkタグはスタイルシートを読み込んだり、属性を設定することによってファビコンを表示することができます。linkタグはheadタグの中で使用し、他のmetaタグとあわせて重要な役割があります。
今回紹介したすべてのlinkタグを使う必要はありません。状況に応じて使い分けていきましょう。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
linkタグまとめ
- linkタグは、別のWebサイトのページや別ファイルと関連付けるためのタグ
- linkタグは閉じタグがない
- linkタグはさまざまな属性を設定できる
- linkタグはheadタグの中で使う
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
