2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

link要素とは? 分かりやすく解説します!

link要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.link要素とは?

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

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

head要素とは? 分かりやすく解説します!

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

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

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

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

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

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

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

アイコン指定

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

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

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

URL正規化

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

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です