HTMLでリソース参照を追加する方法をわかりやすく解説
HTMLでリソース参照を追加するには？
HTMLでリソース参照を追加するには、<link>タグを使用します。HTMLの<link>タグは、外部ドキュメントへのリンクを定義するための要素で、CSSファイルやファビコンなどの外部リソースを読み込む際によく使われます。このタグは、必ずドキュメントの<head>セクション内に配置してください。
代表的な使い方としては、外部スタイルシートの読み込みが挙げられます。<link rel="stylesheet" href="style.css">
<link>タグの主な属性一覧
<link>タグで利用できる主な属性は以下のとおりです。
| 属性 | 値 | 説明 |
|---|---|---|
| charset | 文字セット | リンク先ドキュメントの文字エンコーディングを定義します（※HTML5では廃止）。 |
| href | URL | リソースドキュメントのURLを指定します。 |
| hreflang | 言語コード | リンク先URLの言語コードを指定します。 |
| media | screen tty tv projection handheld braille aural all | ドキュメントを表示する対象デバイス（メディアタイプ）を指定します。 |
| rel | alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection | 現在のドキュメントとリンク先URLとの関係性を記述します。 |
| rev | alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection | リンク先URIから見た、現在のドキュメントとの逆方向の関係を記述します（※HTML5では廃止）。 |
| sizes | 高さx幅 | リンクされたリソース（アイコンなど）のサイズを指定します。 |
| target | _blank _self _top _parent | ページを読み込むターゲットフレームを指定します。 |
| type | MIMEタイプ | リンク先コンテンツのMIMEタイプを指定します。 |
なお、charsetとrevの2つの属性はHTML5で廃止されているため、新しく作成するページでは使用しないことをおすすめします。現代のWeb開発では、rel・href・typeの組み合わせが最も一般的です。
使用例
以下のコードを実行して、HTMLでリソース参照を追加する方法を実際に確認してみましょう。ここでは、外部CSSファイル「stylenew.css」を読み込んでいます。
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag</title>
<link rel = "stylesheet" href = "stylenew.css">
</head>
<body>
<div id = "contentinfo">
<p>当サイトへようこそ。さまざまなテーマのチュートリアルを提供しています。</p>
</div>
</body>
</html>このように<link>タグを<head>内に記述するだけで、外部のスタイルシートやその他のリソースを簡単に読み込むことができます。
-
HTMLでブックマークリンク（ページ内リンク）を作成する方法
HTMLでブックマークリンクを作成するには、<a>タグのname属性を使ってブックマーク（名前付きアンカー）を定義し、その場所へのリンクを設置します。ブックマークは「名前付きアンカー」とも呼ばれ、クリックひとつで読者をページ内の特定のセクションへ直接ジャンプさせられるため、特に長いページのナビゲーション改善に非常に便利な機能です。 注意：name属性はHTML5で廃止されています <a>タグのname属性はHTML5で廃止（非推奨）されたため、現在の新規開発では使用しないでください。代わりに、ジャンプ先の要素にid属性を付与する方法が標準的な手法となっています。動作はn
-
HTMLで画像をリンクとして使用する方法
HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。基本的な書き方構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画