HTML&CSS辞典 
link要素について知りたい人
link要素について知りたいな!
この記事は上記のような疑問を解消するものとなっています。
- link要素とは?
- link要素の使い方
- link要素でよく使用されるもの
link要素はHTML文書と外部リソースを関連付けるためのものです。
link要素は、検索エンジンやブラウザに対する情報ですので、head要素内に記述します。
link要素はリンクの関係を示すrel属性とリンク先を指定するhref属性を組み合わせて使います。
そこでこの記事ではlink要素について解説していきます。
気になる方は是非最後まで読んで頂ければと思います。
目次
1.link要素とは?
link要素を使用することで、HTML文書と外部のリソースを関連付けることができます。
link要素は「リンクヨウソ」と読みます。
「<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要素について詳しく知りたい方は以下の記事をご覧になって下さい。
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を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。
実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?
HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?
そんな方に「はじめての副業コース」をオススメします。
なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!
Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?
↓↓↓↓ブログ村に参加しています! 是非、応援クリックお願いします!
