音声スライド （クリックで展開／閉じる）
はじめに
- class 属性と id 属性の違いを学ぶ
- a 要素でリンクを作る方法を学ぶ
- 前回作った HTML ファイルに追記する
この単元では、HTML の要素に付けられる class 属性と id 属性の違いを学びます。また、a 要素を使って他のページへのリンクを作成する方法も学びます。前回の単元で作成した HTML ファイルに、実際にこれらの属性やリンクを追記しながら理解を深めていきましょう。
要素に名前を付ける仕組み
- HTML 要素には属性で追加情報を付けられる
- class 属性と id 属性はその代表的な例
- この単元では HTML 側の書き方だけを学ぶ
HTML の要素には、タグの中に属性を追加することで、様々な追加情報を持たせることができます。その代表的な例が class 属性と id 属性です。これらは主に CSS や JavaScript から要素を指定するために使われますが、この単元では、まず HTML 側でどのように書くかだけに絞って学びます。
class 属性とは
- 属性名は class 、値には好きな名前を指定する
- 同じ class 名を複数の要素に付けられる
- グループ分けの「目印」のようなもの
class 属性は、属性名として class と書き、値の部分に自分で決めた名前を指定します。この class の値は、同じ名前を複数の要素に付けることができるのが大きな特徴です。いわば、いくつかの要素を同じグループとしてまとめる「目印」のような役割を果たします。
id 属性とは
- 属性名は id 、値には一意な名前を指定する
- 同じ id 名は 1 つのページに 1 回しか使えない
- その要素だけの「個別の名札」のようなもの
id 属性は、属性名として id と書き、値の部分にはページの中で 1 つしかない、一意な名前を指定します。同じ id の値を複数の要素に付けることはできません。class が「グループの目印」だとすれば、id はその要素だけに付ける「個別の名札」のようなものです。
class と id の違い
| 観点 | class 属性 | id 属性 |
|---|---|---|
| 使える回数 | 1 ページ内で何度でも | 1 ページ内で 1 回だけ |
| 主な役割 | 複数要素をグループ化する目印 | 特定の 1 要素を指す名札 |
| 書き方の例 | class="intro-text" |
id="intro" |
class 属性と id 属性の違いを表にまとめました。class は 1 つのページの中で何度でも使うことができ、複数の要素を同じグループとして扱いたいときに使います。一方 id は、1 つのページの中でただ 1 回しか使えず、特定の 1 つの要素だけを指し示したいときに使います。
class 属性と id 属性の例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルタイトル</h1>
<p id="intro" class="intro-text">これは最初の紹介文です。id="intro"とclass="intro-text"の両方が指定されています。</p>
<p class="intro-text">これは2つ目の紹介文です。class="intro-text"が指定されています。</p>
<p class="intro-text">これは3つ目の紹介文です。同じくclass="intro-text"が指定されています。</p>
<p>これは通常の段落です。id属性もclass属性も指定されていません。</p>
</body>
</html>実際のコード例を見てみましょう。ここでは、複数ある p 要素すべてに同じ class の値を指定しつつ、そのうちの 1 つだけに id の値を付けています。class は繰り返し使われていますが、id は 1 箇所にしか使われていない点に注目してください。
a 要素とリンクの作成
- a 要素で他のページへのリンクを作る
- href 属性にリンク先を指定する
- タグで挟んだ文字がリンクの表示文になる
別のページへ移動するためのリンクは、a 要素を使って作ります。a 要素には href 属性を指定し、その値としてリンク先のファイル名や URL を書きます。開始タグと終了タグで挟んだ部分の文字が、実際に画面に表示されるリンクの文章になります。
コード例：リンクの作成
href 属性に “profile.html” を指定した a 要素の例です。タグの間に書かれた「詳しいプロフィールはこちら」という文字列が、クリックできるリンクとして画面に表示されます。
class・id・リンクの関係
class・id・リンクの関係をイメージ図で確認しましょう。複数の要素が同じ class 名でグループ化されている一方、id 名は 1 つの要素だけに付けられています。そして a 要素のリンクは、矢印のように別のページへとつながっています。
自己紹介ページに追加する
- 自己紹介文の p 要素に id 属性を追加した
- 同じ p 要素に class 属性も追加した
- 「詳しいプロフィールはこちら」の a 要素を追加した
前回作成した自己紹介ページに、今回学んだ内容を反映してみましょう。自己紹介文の p 要素に id=“intro” を追加し、同じ要素に class の指定も加えました（複数の class を組み合わせる書き方は次の単元で扱います）。さらに、「詳しいプロフィールはこちら」という文字列に a 要素のリンクを追加しています。
まとめ
- class 属性は複数要素に付けられる共通の目印
- id 属性はページ内で 1 つだけの個別の目印
- a 要素の href 属性でリンク先を指定できる
この単元では、class 属性と id 属性の違いを学びました。class は複数の要素に共通して付けられる目印であり、id はページの中でただ 1 つの要素だけに付ける個別の目印です。また、a 要素の href 属性を使うことで、他のページへのリンクを作成できることも確認しました。次の単元では、コメントや空要素など、他の基本的な書き方を学んでいきます。
