In HTML, the class attribute is a mechanism for labeling and grouping one or more elements, enabling unified control of their design and behavior through CSS and JavaScript.
class属性の基本HTMLのclass属性は、要素に対して「名前」を付けるための属性です。付けられたクラス名をもとに、CSSやJavaScriptでスタイリングや操作を行います。ウェブページをデザイン・機能面で整理するうえで非常に重要な役割を担います。
HTML
<p class="highlight">この文章には "highlight" というクラスが付与されています。</p>なぜclass属性が重要なのか
class属性を使うと、特定の要素だけにスタイルを適用できます。class属性の基本的な書き方HTML
<!-- 基本形 -->
<要素 class="クラス名">コンテンツ</要素>
<!-- 具体例 -->
<div class="container">
ここにコンテンツを配置
</div>HTMLでは、タグの開始タグ内にclass="～"という形で属性を書きます。名前（クラス名）は基本的に自由に設定できますが、慣例的に小文字やハイフン区切り（kebab-case）で書かれることが多いです。
ひとつの要素に複数のクラスを指定したい場合は、半角スペースで区切って記述します。
HTML
<p class="text-highlight large-text">
複数のクラスが付与されています。
</p>上記の例では、text-highlight と large-text の2つのクラスが同時に付与されています。このようにすると、複数の目的やスタイルを同時に適用できます。
CSS側では、次のようにクラスごとにスタイルを記述できます。
CSS
.text-highlight {
color: #ff0000; /* 文字を赤色にする例 */
}
.large-text {
font-size: 1.5rem; /* 文字を大きくする例 */
}HTML
<p class="error-message">エラーが発生しました。</p>CSS
.error-message {
color: red;
font-weight: bold;
}クラス名と同じ.error-messageというセレクタを用意して、スタイルを記述します。class名に対してスタイリングする際は、CSSセレクタで先頭に.（ドット）を付ける点がポイントです。
JavaScriptでDOM操作をする際にも、class属性はよく使われます。例えば、ボタンを押したときにクラスを付け替えて表示状態を切り替えるといった処理です。
表示テキスト
HTML
<button id="toggleBtn">切り替え</button>
<p id="text" class="hidden">表示テキスト</p>
<script>
<!-- JavaScript code here -->
</script>CSS
.hidden {
display: none;
}JavaScript
const btn = document.getElementById("toggleBtn");
const text = document.getElementById("text");
btn.addEventListener("click", () => {
// クラスの追加/削除を切り替える例
text.classList.toggle("hidden");
});上記の例では、classList.toggle("hidden")を使うことで、クラスhiddenが付いていなければ付与、付いていれば削除を行います。
.btn, .header-nav, .main-content
main-content）mainContent）中級者以上の方には、BEMと呼ばれる命名規則がよく使われます。
.nav, .button など).nav__item, .button__icon など).button--disabled など)HTML
<nav class="nav">
<ul class="nav__list">
<li class="nav__item nav__item--active">Home</li>
<li class="nav__item">About</li>
</ul>
</nav>BEMのメリットは、HTML構造とクラス命名規則が連動してわかりやすくなることです。大規模なプロジェクトや複数人での開発時に特に効果を発揮します。
class属性class属性は、フレームワークやライブラリ（Bootstrap, Tailwind CSS, Vue.js, React など）との組み合わせでさらに活用されます。
Bootstrapでは既定のクラス名が多数用意されており、クラスを付与するだけでスタイルが反映されます。
HTML
<button class="btn btn-primary">送信</button>Tailwind CSSはユーティリティファースト（細かいスタイルをクラスで制御する）という設計思想です。
HTML
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
送信
</button>bg-blue-500, hover:bg-blue-700などのクラス名で個々のスタイルを設定し、必要なスタイルを組み合わせていきます。コンポーネント単位でclass属性（Reactの場合はclassName）を付与し、状態に応じてクラスを付け替えたり、コンポーネントごとにスコープを区切ってスタイリングしたりできます。
先ほどの例で紹介したclassList.toggle()の他に、
classList.add("クラス名")classList.remove("クラス名")classList.contains("クラス名")などのAPIもあり、細かい制御が可能です。
クラスを付けすぎるとHTMLが煩雑になり、可読性や保守性が下がってしまうことがあります。必要以上に大量のクラスを付与するのは避け、設計の段階でクラスの役割を整理するとよいでしょう。
classセレクタは、CSSの詳細度（specificity）において、要素セレクタよりも高く、IDセレクタよりは低い位置づけです。複雑なセレクタを多用すると予期せぬ競合が起きる場合があるため、クラスを使った簡潔な記述を心がけると管理しやすくなります。
class属性自体はアクセシビリティに直接影響を与えるものではありません。ただし、クラスを使ってJavaScriptで要素を動的に制御する場合、ユーザーの操作がわかりやすくなるよう、ARIA属性（aria-hiddenなど）と組み合わせる方法も考慮しましょう。
最後に、class属性の使い方を踏まえた構成例を示します。デザインとスクリプトを組み合わせた簡単なサンプルです。
HTML
<div class="container">
<header class="header">
<div class="header__logo">MySite</div>
<button class="btn" id="toggleNoticeBtn">メッセージ表示</button>
</header>
<div class="notice hidden" id="noticeBox">
これは通常の通知です。
</div>
<button class="btn btn--secondary" id="changeToSuccessBtn">成功メッセージ</button>
<button class="btn btn--secondary" id="changeToErrorBtn">エラーメッセージ</button>
</div>
<script>
<!-- JavaScript code here -->
</script>CSS
/* --- レイアウト --- */
.container {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
/* --- コンポーネントのスタイル --- */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.header__logo {
font-size: 1.5rem;
font-weight: bold;
}
/* --- ボタン --- */
.btn {
padding: 0.5rem 1rem;
background-color: #008CBA;
color: #fff;
border: none;
cursor: pointer;
}
.btn--secondary {
background-color: #e7e7e7;
color: #333;
}
/* --- 表示切り替え要素 --- */
.hidden {
display: none;
}
.notice {
border: 1px solid #008CBA;
padding: 0.5rem;
margin-top: 1rem;
}
.notice--success {
border-color: #4CAF50; /* 緑色 */
}
.notice--error {
border-color: #f44336; /* 赤色 */
}JavaScript
const toggleNoticeBtn = document.getElementById("toggleNoticeBtn");
const noticeBox = document.getElementById("noticeBox");
const changeToSuccessBtn = document.getElementById("changeToSuccessBtn");
const changeToErrorBtn = document.getElementById("changeToErrorBtn");
// 表示/非表示の切り替え
toggleNoticeBtn.addEventListener("click", () => {
noticeBox.classList.toggle("hidden");
});
// 成功メッセージに変更
changeToSuccessBtn.addEventListener("click", () => {
noticeBox.classList.remove("notice--error");
noticeBox.classList.add("notice--success");
noticeBox.textContent = "これは成功メッセージです。";
noticeBox.classList.remove("hidden"); // 表示しておく
});
// エラーメッセージに変更
changeToErrorBtn.addEventListener("click", () => {
noticeBox.classList.remove("notice--success");
noticeBox.classList.add("notice--error");
noticeBox.textContent = "エラーが発生しました。";
noticeBox.classList.remove("hidden"); // 表示しておく
});class="container" : コンテナレイアウトclass="header__logo" : BEM風にヘッダー内のロゴ要素を命名class="btn btn--secondary" : 複数のクラスを使ったスタイリングclass="notice notice--success" : ベースクラスに修飾用クラスを加えて見た目を変化classList.add()やclassList.remove(), classList.toggle()を利用してクラスの切り替えを行い、表示・非表示やスタイル変更を実現HTMLのclass属性は、ウェブ開発において非常に基本的かつ重要な要素です。CSSやJavaScript、さらにはフレームワークと組み合わせることで、デザインと機能の柔軟な制御が可能になります。
class属性の取り扱いをマスターすることは、フロントエンドエンジニアとしての基礎体力を養ううえで欠かせません。ぜひ、さまざまなプロジェクトで効果的に活用してみてください。