id、class、style、title
基本的なグローバル属性を任意のHTML要素に適用します。
「id、class、style、title」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
グローバル属性
グローバル属性は、任意のHTML要素に適用できます：
id— 一意の識別子class— 1つ以上のCSSクラスstyle— インラインCSStitle— ツールチップのテキスト- その他にも、lang、hidden、tabindex、data-*などがあります
id属性
id属性は、要素に一意の識別子を割り当てます：
<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>
<!-- Rules:
- Must be unique per page
- No spaces
- Use hyphens: user-profile
- Case-sensitive: #hero ≠ #Hero
-->idの用途
id属性には複数の用途があります：
- CSSでの対象指定：
#hero-banner { ... } - JavaScriptでの選択：
document.getElementById('signup-form') - フラグメントナビゲーション：
<a href="#installation"> - ARIAによるラベル付け：
aria-labelledby="modal-title"
class属性
class属性は、1つ以上のCSSクラスを割り当てます：
<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>
<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->idとclassの違い
それぞれの使い分け：
id— ページ上の特定の1つの要素class— 複数の要素に適用するスタイルパターン
<!-- id: unique element -->
<main id="main-content">...</main>
<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>style属性
style属性はインラインCSSを追加します：
<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
Info box
</div>
<!-- Inline styles have the highest specificity
They are hard to override and hard to maintain
Prefer external CSS classes whenever possible -->インラインstyleを使う場合
インラインstyleは、次のような場合に使用できます：
- JavaScriptで設定する動的な値
- CSSを書く時点では値が決まらないもの（ユーザーが設定する色や幅など）
- メールHTML（メールクライアントが外部CSSを削除するため）
静的な見た目の設定にstyleを使わないでください。そのような設定はCSSに記述します。
title属性
title属性は、ホバー時に表示するツールチップのテキストを提供します：
<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>titleのアクセシビリティ上の制限
title属性には、アクセシビリティ上の大きな問題があります：
- キーボードナビゲーションでは利用できません
- タッチスクリーンには表示されません
- スクリーンリーダーでの動作に一貫性がありません
- 重要な情報を
titleだけに記載しないでください
重要な情報には、aria-labelまたは表示されるテキストを使います。
詳細度：id、class、インラインの比較
CSSの詳細度を低い順に並べると：
/* Element selector: 0-0-1 */
p { color: gray; }
/* Class selector: 0-1-0 */
.text { color: blue; }
/* ID selector: 1-0-0 */
#unique { color: green; }
/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>classの命名規則
よく使われるclassの命名規則：
<!-- BEM (Block Element Modifier) -->
<div class="card">
<div class="card__header">
<h2 class="card__title card__title--featured">Title</h2>
</div>
</div>
<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">確認問題
id属性に関する重要なルールは何ですか？
振り返り：id、class、style、title
グローバル属性の基本：
id— ページ内で一意。CSS、JavaScript、フラグメント、ARIAに使いますclass— 再利用可能。複数のクラスはスペースで区切りますstyle— インラインCSS（使用は控え、外部CSSを優先します）title— ツールチップ。キーボードやタッチのユーザーにはアクセシブルではありません- CSSでは、idの詳細度がclassの詳細度を上回ります
よくある質問
「id、class、style、title」レッスンは無料ですか？
はい。「id、class、style、title」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「id、class、style、title」で何を学びますか？
基本的なグローバル属性を任意のHTML要素に適用します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「id、class、style、title」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- id、class、style、title
- hidden属性
- tabindexとaccesskey
- カスタムデータ属性data-*