HTMLタグだけでも色々できるけど、もっと詳しい指定をしたい時はどうすればいいの？
いい着眼点だね！それが今日学ぶ「属性」なんだ。属性を使うとタグに詳細な指示を出せるようになるよ。まるでオプション設定のようなものだね。
オプション設定って分かりやすい例えですね！具体的にはどんなことができるんですか？
例えば、画像を表示する時にサイズを指定したり、リンクの色を変えたり、文字にIDを付けて特別な装飾をしたりできるんだ。まずは基本的な書き方から見てみよう。
属性の基本的な書き方
属性はタグの開始タグ内に書きます。書き方にはルールがあるので、正確に覚えましょう。
属性の構造
属性は属性名と属性値の組み合わせで、タグに追加情報を与えます。
属性の構成要素：
| 要素 | 説明 | 例 |
|---|---|---|
| 属性名 | 何を指定するかを表す | href, id, class |
| =（イコール） | 属性名と属性値を繋ぐ | |
| 属性値 | 具体的な値をダブルクォートで囲む | "main-text", "https://example.com" |
属性の書き方パターン
ひとつの属性を指定する場合
<タグ名 属性名="値">内容</タグ名>複数の属性を指定する場合
<タグ名 属性名1="値1" 属性名2="値2">内容</タグ名>実際の例
<!-- ひとつの属性を指定 -->
<p id="main-text">これはメインテキストです</p>
<!-- 複数の属性を指定 -->
<a href="https://example.com" target="_blank">外部サイトへ</a>
<img src="image.jpg" alt="美しい風景" width="300">属性を書く時の重要なルール
| ルール | 説明 | 例 |
|---|---|---|
| スペースで区切る | タグ名と属性、属性と属性の間はスペース | <p id="text" class="highlight"> |
| =で値を指定 | 属性名の後に=を付けて値を設定 | id="text" |
| ダブルクォートで囲む | 属性の値は必ず”で囲む | src="image.jpg" |
| 大文字小文字を統一 | 属性名は小文字で書く | id（○） ID（×） |
よく使われる共通属性
HTMLにはどのタグにも使える共通属性があります。これらを覚えると、Webページ作りが格段に便利になります。
id属性で要素に固有の名前をつける
id属性は、ページ内でその要素を唯一の存在として識別するために使います。
<h1 id="page-title">私のブログ</h1>
<p id="introduction">はじめまして！</p>
<div id="main-content">メインコンテンツ</div>id属性の特徴
- ページ内で1つだけ 同じid名は1つのページに1回だけ使用
- JavaScriptで操作 プログラムでその要素を簡単に見つけられる
- アンカーリンク ページ内の特定箇所へのリンクに使用
- CSS装飾も可能 特別な場合に限定的に使用（基本はclassを推奨）
class属性：要素をグループ分けする
class属性は、似たような役割の要素をグループとして管理するために使います。
<p class="important">これは重要な情報です</p>
<p class="important">こちらも重要な情報です</p>
<p class="note">補足説明です</p>
<div class="card">カード1</div>
<div class="card">カード2</div>class属性の特徴
- 何度でも使用可能 同じclass名を複数の要素に指定できる
- 複数指定可能 1つの要素に複数のclassを指定できる
- CSSで一括装飾 同じclassの要素をまとめてスタイリング
複数のclassを指定する方法
<p class="important red-text large">重要で赤い大きな文字</p>
<div class="card featured highlight">特別なカード</div>idとclassの違いがよく分からないな。どう使い分ければいいの？
簡単に言うと、idは「一人だけの名前」、classは「グループ名」だよ。例えば学校で言うなら、「田中太郎」がid、「3年A組」や「サッカー部」がclassみたいなものかな。
idとclassの使い分け実例
実際のWebページでどのように使い分けるかを見てみましょう。
ブログページの例
<!DOCTYPE html>
<html>
<head>
<title>私のブログ</title>
</head>
<body>
<!-- ページ全体で1つだけの要素 → id -->
<header id="site-header">サイトヘッダー</header>
<nav id="main-navigation">ナビゲーション</nav>
<!-- 繰り返し使われる要素 → class -->
<article class="blog-post">
<h2 class="post-title">記事タイトル1</h2>
<p class="post-date">2024年1月15日</p>
<p class="post-content">記事の内容...</p>
</article>
<article class="blog-post">
<h2 class="post-title">記事タイトル2</h2>
<p class="post-date">2024年1月10日</p>
<p class="post-content">記事の内容...</p>
</article>
<!-- ページ全体で1つだけの要素 → id -->
<footer id="site-footer">サイトフッター</footer>
</body>
</html>名前の付け方のコツ
良い名前の付け方
- 内容・役割を表現 要素の機能や内容を明確に示す
- 分かりやすい英語 誰が見ても理解できる一般的な単語を使用
- ケバブケース推奨 単語をハイフンで繋ぐ（
main-content,user-profile） - 具体的で明確 曖昧な表現を避け、目的が明確に分かる
- 一貫性を保つ プロジェクト全体で命名規則を統一
例
<!-- 内容を表す分かりやすい名前 -->
<div id="main-content">メインコンテンツ</div>
<p class="warning-message">警告メッセージ</p>
<button class="primary-button">メインボタン</button>避けるべき名前の付け方
- 見た目だけの表現 色やサイズなど変更される可能性がある要素
- 意味不明な略語
btn1,div01,aaaなど内容が推測できない - 日本語の使用 技術的な問題やチーム開発での混乱を避ける
- 長すぎる名前
very-long-and-complicated-section-titleなど実用的でない - 数字だけの区別
item1,item2など役割の違いが分からない
例
<!-- 見た目だけを表す名前は避ける -->
<div id="red-box"><!-- ❌ 色が変わったら意味がない --></div>
<p class="big-text"><!-- ❌ サイズが変わったら意味がない --></p>
<!-- 意味不明な名前も避ける -->
<div id="aaa"><!-- ❌ 何の要素か分からない --></div>
<p class="xxx"><!-- ❌ 何の要素か分からない --></p>属性が必要な重要タグ
属性の使い方は分かったけど、実際にはどんな時に使うんですか？
実は、HTMLには属性が必須のタグがあるんだ。特に重要なのが、画像を表示するimgタグとリンクを作るaタグだよ。これらは属性なしでは機能しないんだ。
img属性で画像を表示する
img タグは画像を表示するためのタグです。このタグは必ず属性とセットで使います。
imgタグの必須属性
| 属性 | 役割 | 例 |
|---|---|---|
| src | 画像ファイルの場所を指定 | src="image.jpg" |
| alt | 画像の説明文（代替テキスト） | alt="美しい夕焼け" |
<img src="sunset.jpg" alt="美しい夕焼けの写真">alt属性は画像が表示されない時の代替テキストで、以下の重要な役割を果たします
- アクセシビリティ向上 視覚に障害のある方が読み上げソフトで画像の内容を理解できる
- ネットワークエラー対応 画像読み込み失敗時に代替テキストが表示される
- SEO効果 検索エンジンが画像の内容を理解し、検索結果に反映される
alt属性を適切に設定することで、すべての人が使いやすいWebサイトを作ることができます。
alt属性って、画像が見えない人のためなんですね。優しい機能ですね！
その通り！Webは誰でも使えるものであるべきだから、alt属性はとても大切なんだ。ちょっとした配慮で、みんなが使いやすくなるんだよ。
aタグ：リンクを作る
aタグはリンクを作るためのタグです。「anchor（アンカー）」の略で、このタグも属性が必須です。
aタグの必須属性
| 属性 | 役割 | 例 |
|---|---|---|
| href | リンク先のURLや場所を指定 | href="https://example.com" |
<a href="https://www.google.com">Googleへのリンク</a>リンクの種類
aタグのhref属性には様々な値を指定できます：
| リンクの種類 | href属性の値 | 例 |
|---|---|---|
| 外部サイト | 完全なURL | href="https://www.google.com" |
| 同じサイト内 | ファイル名やパス | href="about.html" |
| ページ内リンク | #とid名 | href="#top" |
| メールアドレス | mailto: | href="mailto:test@example.com" |
実践：imgとaタグを使ってみよう
実際にimgタグとaタグを使ってみましょう。以下のエディターで練習してみてください：
💡 試してみよう
- 画像のsrc属性を変更してみましょう（存在しないファイル名にするとalt属性の動作が確認できます）
- alt属性の内容を変更してみましょう
- リンクのhref属性を他のURLに変更してみましょう
- 新しいリンクや画像を追加してみましょう
HTMLコードを入力:
プレビュー:
画像が表示されない場合は、alt属性のテキストが代わりに表示されるのが分かるかな？これが代替テキストの役割なんだ。
imgタグとaタグについては第2章で詳しく学びます。
その他の便利な共通属性
title属性：ツールチップを表示
title属性を使うと、要素にマウスを重ねた時にツールチップ（小さな説明ウィンドウ）が表示されます。
<p title="これは段落要素です">文章内容</p>
<img src="cat.jpg" alt="猫" title="可愛い子猫の写真">
<a href="https://example.com" title="外部サイトに移動します">リンク</a>実践：title属性を体験しよう
以下のエディターで、title属性の動作を確認してみましょう：
💡 試してみよう
- 各要素にマウスを重ねて、ツールチップが表示されることを確認してみましょう
- title属性の内容を変更してみましょう
- 新しい要素にtitle属性を追加してみましょう
HTMLコードを入力:
プレビュー:
style属性：直接スタイルを指定
style属性を使うと、その要素に直接CSSのスタイルを適用できます。
<p style="color: red; font-size: 20px;">赤い大きな文字</p>
<div style="background-color: yellow; padding: 10px;">黄色い背景のボックス</div>ただし、style属性は緊急時の応急処置として使い、基本的にはCSSファイルでスタイルを管理することを推奨します。
理解度チェッククイズ
さあ、ここまでの内容を振り返ってみよう。属性の使い方やid、classの違いを理解できたかな？クイズに挑戦してみてね！
HTML属性ミニクイズ
まとめ
今日は属性について学んだね。最初は難しく感じたかもしれないけど、どうだった？
最初はid属性とclass属性の違いがよく分からなかったけど、「一人だけの名前」と「グループ名」の例えで理解できました！
属性を使うとHTMLが本格的になりますね！CSSでスタイルを付ける時に、これらのidやclassを使うんですか？
その通り！CSSでは、idには#、classには.を付けて要素を指定するんだ。例えば#my-nameや.main-titleのようにね。CSSを学ぶ時により詳しく説明するよ。
- id属性 「一意の識別子」として使用し、ページ内で重複しないようにする
- class属性 「グループ化」のために使用し、同じスタイルを適用したい要素にまとめて指定
- alt属性は必須 アクセシビリティとSEOの両方に重要な代替テキスト
- 属性名は分かりやすく 将来的にコードを見返した時に理解しやすい名前を付ける
- 一貫性を保つ プロジェクト全体で命名規則を統一する
次回は、文章をより豊かに表現するテキスト要素について学習します。強調表現、引用など、意味を意識したマークアップ方法をマスターしましょう！