HTML&CSS辞典 
目次
1.link要素とは?
link要素を使用することで、HTML文書と外部のリソースを関連付けることができます。
「<link>タグ」は「<head>~</head>」内に記述します。
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」と指定することでブラウザはスタイルシートファイルと認識して読み込んでくれます。
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だと示すことができます。
↓↓↓↓ブログ村に参加しています! 是非、応援クリックお願いします!
