HTMLのlink要素の使い方は? relの種類・読み方も分かりやすく解説!

link要素について知りたい人

link要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

link要素とは?
link要素の使い方
link要素でよく使用されるもの
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

link要素はHTML文書と外部リソースを関連付けるためのものです。

link要素は、検索エンジンやブラウザに対する情報ですので、head要素内に記述します。

link要素はリンクの関係を示すrel属性とリンク先を指定するhref属性を組み合わせて使います。

そこでこの記事ではlink要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

link要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.link要素とは?

link要素を使用することで、HTML文書と外部のリソースを関連付けることができます。

link要素は「リンクヨウソ」と読みます。

「<link>タグ」は「<head>~</head>」内に記述します。

Memo

head要素内にはWebページに関する情報が記述されているので、ユーザーに直接見えません。

基本的にhead要素内はWebブラウザや検索エンジンのために記述する場所となっています。

2.link要素の使い方

それではlink要素の使い方をみていきましょう。

以下はスタイルシートを読み込むためのソースコードとなっています。

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>link要素とは?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
・・・・
</body>
</html>

link要素は6行目で使用されています。

上記のようにスタイルシートファイル(style.css)を指定することが多いです。

link要素で「<link rel=”stylesheet” href=”style.css”>」と指定することで見た目のデザインを変更できるようにしています。

relはhref属性で指定しているファイルとの関係性を示しています。

relに「stylesheet」と指定することでブラウザはスタイルシートファイルと認識して読み込んでくれます。

Memo

href属性を「style.css」と指定して読み込むためにはHTMLファイルと同じ階層にファイルを置いておく必要があります。

↓↓↓↓ html要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年2月18日【意味は?】html要素とは? 属性・使い方も分かりやすく解説!

↓↓↓↓ head要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年2月18日HTMLのhead要素とは? 書き方や読み方を分かりやすく解説!

3.link要素でよく使用されるもの

link要素でよく使用されるものをみていきましょう。

スタイルシートの読み込み

<link rel="stylesheet" href="スタイルシートのURL">

rel属性で読み込む対象とHTMLファイルの関係性を表しています。

HTMLファイルから見て、外部CSSはスタイルシートと呼ぶので、rel属性の値には「stylesheet」と指定します。

そして、href属性の中には読み込む対象の「スタイルシートのURL」を記述します。

スタイルシートが適用されない場合があります。

その場合、CSS定義が間違っていないか、ファイルの場所を間違っていないかを確認するようにしましょう。

アイコン指定

<link rel="icon" href="画像のURL">

link要素でアイコンを指定することができます。

半角スペースで区切って、size属性を入れることでアイコンのサイズも指定することが可能です。

URL正規化

<link rel="canonical" href="ページのURL">

これはSEOとしても重要です。

上記のように指定することで検索エンジンに正規のURLだと示すことができます。

「HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント