過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>クラスセレクタ</strong>は <code>.classname</code> の形でドットに続けて HTML の <code>class</code> 属性値を書く CSS セレクタ</li><li>同じクラス名を持つ<strong>すべての要素</strong>に同じスタイルを当てられる（複数要素への一括適用に最適）</li><li><code>要素名.classname</code> で<strong>特定の要素タイプに絞り込み</strong>、<code>.a.b</code> で<strong>両方持つ要素</strong>のみ選択</li><li>詳細度は <strong>0,1,0</strong>。ID（0,1,0,0）より弱く、要素セレクタ（0,0,0,1）より強い</li><li>実務では <strong>BEM</strong>（<code>.block__element--modifier</code>）など命名規則で衝突を避ける</li></ul></td></tr></table>
<h2>クラスセレクタとは</h2>

<p><strong>クラスセレクタ</strong>は、HTML の <code>class</code> 属性値を CSS から指定するためのセレクタです。<strong>ドット（<code>.</code>）</strong>に続けてクラス名を書き、その値を持つすべての要素にスタイルを適用します。</p>

<p>同じ <code>class</code> 値は<strong>1 つのページ内で何度でも使える</strong>ため、ボタン・カード・見出しといった<strong>繰り返し使うパーツ</strong>のスタイル定義に向いています。</p>

<h2>基本構文</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* .subtitle クラスが付いた要素すべてに適用 */
.subtitle {
  color: #fff;
  font-size: 14px;
}</code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><h2 class="subtitle">小見出し</h2>
<p class="subtitle">補足テキスト</p>
<div class="subtitle">どの要素でも適用される</div></code></pre>
<h2>記法のバリエーション</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>セレクタ</th><th>意味</th></tr></thead>
<tbody>
<tr><td><code>.btn</code></td><td><code>class="btn"</code> を持つすべての要素</td></tr>
<tr><td><code>p.subtitle</code></td><td><code><p class="subtitle"></code> のみ（要素を絞る）</td></tr>
<tr><td><code>.btn.primary</code></td><td><code>btn</code> と <code>primary</code> を<strong>両方</strong>持つ要素</td></tr>
<tr><td><code>.btn .icon</code></td><td><code>.btn</code> の<strong>子孫</strong>にある <code>.icon</code></td></tr>
<tr><td><code>.btn > .icon</code></td><td><code>.btn</code> の<strong>直接の子</strong>の <code>.icon</code></td></tr>
<tr><td><code>.btn, .link</code></td><td><code>.btn</code> または <code>.link</code>（カンマで OR）</td></tr>
</tbody>
</table>

<h2>HTML 側で複数クラスを付ける</h2>

<p><code>class</code> 属性は<strong>スペース区切り</strong>で複数のクラスを指定できます。これにより<strong>機能の重ね合わせ</strong>（基本ボタン + 配色バリアント）が表現できます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><button class="btn primary">保存</button>
<button class="btn danger">削除</button></code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.btn          { padding: 8px 16px; border-radius: 4px; }
.btn.primary  { background: #3498db; color: #fff; }
.btn.danger   { background: #e74c3c; color: #fff; }</code></pre>
<h2>詳細度（Specificity）</h2>

<p>セレクタの優先度は <strong>(インライン, ID, クラス, 要素)</strong> の 4 桁で計算されます。クラスセレクタは<strong>クラスの桁を 1 つ増やします</strong>。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>セレクタ</th><th>詳細度</th></tr></thead>
<tbody>
<tr><td><code>p</code></td><td>0,0,0,1</td></tr>
<tr><td><code>.subtitle</code></td><td>0,0,1,0</td></tr>
<tr><td><code>p.subtitle</code></td><td>0,0,1,1</td></tr>
<tr><td><code>.btn.primary</code></td><td>0,0,2,0</td></tr>
<tr><td><code>#header</code></td><td>0,1,0,0</td></tr>
<tr><td><code>style="..."</code>（インライン）</td><td>1,0,0,0</td></tr>
</tbody>
</table>

<h2>ID セレクタとの使い分け</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>セレクタ</th><th>記法</th><th>用途</th></tr></thead>
<tbody>
<tr><td>クラス</td><td><code>.name</code></td><td>繰り返し使えるパーツのスタイル</td></tr>
<tr><td>ID</td><td><code>#name</code></td><td>ページ内で<strong>1 回だけ</strong>の要素</td></tr>
</tbody>
</table>

<p>実務では <strong>CSS は基本クラスセレクタ</strong>で書き、ID はリンクのアンカーや JavaScript の参照に取っておく方針が主流です。</p>

<h2>命名規則：BEM</h2>

<p>クラスが増えると衝突や上書きでカオスになりがちです。<strong>BEM</strong>（Block / Element / Modifier）はクラス名を以下のように構造化する命名規則です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__body">本文</p>
  <button class="card__button card__button--primary">OK</button>
</div></code></pre>
<ul>
<li><strong>Block</strong>（<code>.card</code>）— 独立した部品</li>
<li><strong>Element</strong>（<code>.card__title</code>）— Block の構成要素。<strong>__</strong> で繋ぐ</li>
<li><strong>Modifier</strong>（<code>.card__button--primary</code>）— 状態 / バリアント。<strong>--</strong> で繋ぐ</li>
</ul>

<h2>属性セレクタとの違い</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>記法</th><th>マッチ条件</th></tr></thead>
<tbody>
<tr><td><code>.foo</code></td><td><code>class</code> に <code>foo</code> を<strong>含む</strong>（スペース区切り）</td></tr>
<tr><td><code>[class="foo"]</code></td><td><code>class</code> が<strong>完全一致</strong>で <code>foo</code></td></tr>
<tr><td><code>[class~="foo"]</code></td><td><code>.foo</code> と同じ意味（スペース区切りで含む）</td></tr>
</tbody>
</table>

<h2>まとめ</h2>

<ol>
<li>クラスセレクタは <code>.name</code> で <code>class</code> 属性を狙う</li>
<li>同じクラスは複数要素に付けられ、<strong>一括スタイル変更</strong>に最適</li>
<li><code>.a.b</code> で<strong>複数クラス AND</strong>、<code>.a, .b</code> で<strong>OR</strong></li>
<li>詳細度は <strong>0,0,1,0</strong>。ID より弱く、要素より強い</li>
<li>BEM などの命名規則で<strong>衝突を予防</strong>する</li>
</ol>

<h2>疑似クラスと組み合わせる</h2>

<p>クラスセレクタは <code>:hover</code> や <code>:nth-child(...)</code> などの疑似クラスと自由に組み合わせられます。これによりホバーやフォーカス、特定位置の要素だけにスタイルを当てられます。よく使う組み合わせを挙げます。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>セレクタ</th><th>意味</th></tr></thead>
<tbody>
<tr><td><code>.btn:hover</code></td><td>マウスオーバー時の <code>.btn</code></td></tr>
<tr><td><code>.input:focus</code></td><td>フォーカス時の <code>.input</code></td></tr>
<tr><td><code>.list-item:nth-child(odd)</code></td><td>奇数番目の <code>.list-item</code>（ゼブラストライプ）</td></tr>
<tr><td><code>.menu li:first-child</code></td><td><code>.menu</code> 内の最初の <code>li</code></td></tr>
<tr><td><code>.btn:not(.disabled)</code></td><td>無効化されていない <code>.btn</code> だけ</td></tr>
</tbody>
</table>

<h2>子孫セレクタ・直接子セレクタ・隣接セレクタ</h2>

<p>クラスは単独で書くだけでなく、<strong>結合子</strong>と組み合わせて DOM 構造を絞り込めます。よく使う 4 種類を整理します。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>結合子</th><th>例</th><th>意味</th></tr></thead>
<tbody>
<tr><td>スペース（子孫）</td><td><code>.card .title</code></td><td><code>.card</code> の<strong>子孫</strong>の <code>.title</code></td></tr>
<tr><td><code>></code>（直接子）</td><td><code>.card > .title</code></td><td><code>.card</code> の<strong>直接の子</strong>の <code>.title</code></td></tr>
<tr><td><code>+</code>（隣接兄弟）</td><td><code>.title + .desc</code></td><td><code>.title</code> の<strong>直後の兄弟</strong>の <code>.desc</code></td></tr>
<tr><td><code>~</code>（一般兄弟）</td><td><code>.title ~ .desc</code></td><td><code>.title</code> 以降の<strong>同じ親内のすべての兄弟</strong>の <code>.desc</code></td></tr>
</tbody>
</table>

<h2>JavaScript からクラスを操作する</h2>

<p>状態（開閉 / 選択 / エラー）に応じてクラスを付け外しすると、スタイルと挙動を分離できます。<code>classList</code> API を使うのが現代的です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-js">const el = document.querySelector(&apos;.menu&apos;);
el.classList.add(&apos;is-open&apos;);       // 追加
el.classList.remove(&apos;is-open&apos;);    // 削除
el.classList.toggle(&apos;is-open&apos;);    // 反転
el.classList.contains(&apos;is-open&apos;);  // 判定</code></pre>
<h2>状態クラスの命名</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>慣習</th><th>意味</th></tr></thead>
<tbody>
<tr><td><code>.is-active</code> / <code>.is-open</code> / <code>.is-disabled</code></td><td>状態（state）クラス。動的に付け外し</td></tr>
<tr><td><code>.has-error</code> / <code>.has-icon</code></td><td>修飾（含む）</td></tr>
<tr><td><code>.js-trigger</code> / <code>.js-modal</code></td><td>JavaScript 専用フック（スタイル非依存）</td></tr>
</tbody>
</table>

<h2>関連</h2>

<ul>
<li>セレクタ — CSS のターゲット指定全般</li>
<li>ID セレクタ — <code>#name</code> で 1 つだけ指定</li>
<li>属性セレクタ — <code>[attr=value]</code></li>
<li>詳細度 — セレクタの優先度計算</li>
<li>class属性 — HTML 側のクラス指定</li>
</ul>