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要素について詳しく知りたい方は以下の記事をご覧になって下さい。

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

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

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をプログラミングスクールで教わりたいという方も中にはいます。

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

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

【最短30秒で完了】侍テラコヤの申し込み手順

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

STEP.1
アカウント作成

まずはアカウント作成を行いましょう!

入力項目は名前、メールアドレス、パスワードの3項目のみです!

GoogleまたはFacebookのアカウントを持っていると入力する手間を省くことができます。

STEP.2
請求情報の入力

あとは請求情報を入力するだけです!

カード番号、有効期限、セキュリティコードの3項目のみです!

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1
相談会予約

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント

相談会はオンライン(Google meet)で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2
相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

  • エンジニアを取り巻く環境
  • 挫折しないための学習の進め方
  • プログラミング言語について
  • 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

  • プログラミング学習に関して
  • 転職・副業・起業について

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント