HTMLでのクラス名やIDの付け方にはいくつかの基本的なルールがあります。これらはコーディングの標準や保守性を向上させるために役立ちます。以下にHTMLでのクラスとIDの命名に関するルールを紹介します。
クラス（Class）の付け方
- ユニークでない名前:
クラスは一意でなければなりませんが、同じページ内で複数の要素に同じクラス名を使うことができます。 - 意味がある名前:
クラス名はその要素がどんな役割やスタイルを持っているかを表す名前になるよう心掛けましょう。適切で意味のある名前を付けることで、コードが理解しやすくなります。 - 複数の単語を組み合わせる:
クラス名には複数の単語を使いたい場合、キャメルケース（myClass）やハイフン区切り（my-class）を使うと良いです。ただし、どちらを使うかは一貫性が重要です。 - 意味を持たない省略語は避ける:
わかりにくい省略語や略語は避け、できるだけ意味のある単語を使いましょう。
IDの付け方
- ユニークである:
IDはページ内で一意でなければなりません。同じIDを複数の要素に付けてはいけません。 - クラスと同様に意味がある名前:
IDもクラス同様に要素が何を表しているかを反映する名前を使うと良いでしょう。 - 複数の単語を組み合わせる:
ID名に複数の単語を使う場合、キャメルケースやハイフン区切りを使用し、一貫性を持たせましょう。 - 意味を持たない省略語は避ける:
IDもクラスと同様に、理解しやすく意味がある名前を使うように心がけましょう。
例:
<!-- クラスの例 -->
<div class="header-container"></div>
<div class="article-content"></div>
<button class="submit-button"></button>
<!-- IDの例 -->
<div id="main-content"></div>
<section id="featured-section"></section>
<a id="home-link"></a>以上が一般的なクラスとIDの付け方のルールです。これらのルールに従うことで、コードが読みやすくなり、保守性が向上します。