classを使わずにCSSを指定しよう（※ラッパーを除く）
通常のHTML/CSSコーディングでは class や id を使って狙った要素にスタイルを当てていきます。しかしブログ記事は、HTML/CSSの知識がない担当者が執筆するケースが大半です。毎回 class="highlight" のようなクラスを付けてもらうのは現実的ではありません。
そこで活躍するのが要素セレクタ（タグ名）ベースのCSSです。ただし、ページ全体の p や h2 に直接スタイルを当ててしまうとグローバルのCSSが汚染されてしまいます。そのため、ブログ本文を包むラッパー要素を1つだけ用意し、その子孫要素として指定するのが定石です。
グローバルのCSSを汚染しないラッパー子孫セレクタ
まず、ブログ本文のHTMLをひとつのクラスで囲います。
<article class="blog-body">
<h2>見出しテキスト</h2>
<p>本文テキスト</p>
</article>
次に、CSS側では .blog-body を起点にした子孫セレクタで各要素をスタイルします。
/* ラッパー子孫セレクタで指定 */
.blog-body h2 {
font-size: 1.5rem;
border-bottom: 2px solid #333;
padding-bottom: 0.5em;
margin-bottom: 1em;
}
.blog-body p {
line-height: 1.9;
margin-bottom: 1.6em;
}
/* 隣接セレクタで余白を調整 */
.blog-body h2 + p {
margin-top: 0.6em;
}
.blog-body blockquote {
border-left: 4px solid #b7e4c7;
padding: 12px 20px;
background: #f6fdf8;
color: #555;
}
この方法のポイントは、CSS のネストや +（隣接兄弟）・~（一般兄弟）セレクタを組み合わせることです。たとえば .blog-body h3 + p なら「h3 の直後にある p」だけを狙えるので、class を一切使わずに文脈に応じた細かい余白コントロールが実現できます。
【最新】@scope ルールを使った記述方法
Chrome 118 / Safari 17.4 以降では、CSS の @scope ルールが使えるようになりました。これは「このセレクタはこのスコープ内にのみ適用する」という宣言を CSS 側だけで完結できる仕組みです。ラッパークラスを使う従来の書き方と似ていますが、より宣言的で意図が明確になります。
@scope (.blog-body) {
h2 {
font-size: 1.5rem;
border-bottom: 2px solid #333;
}
p {
line-height: 1.9;
margin-bottom: 1.6em;
}
blockquote {
border-left: 4px solid #b7e4c7;
padding: 12px 20px;
}
}
@scope (.blog-body) の中に書いたセレクタは、自動的に .blog-body の子孫にのみ適用されます。さらに @scope にはスコープの上限と下限を指定する機能もあります。
/* .blog-body の中の、.no-style 以外の範囲だけに適用 */
@scope (.blog-body) to (.no-style) {
p {
line-height: 1.9;
}
}
上記のように書くと、.blog-body の中であっても .no-style という要素の中は除外されます。コンポーネントの「穴」を柔軟に空けられるのが @scope 最大の特徴です。
⚠️ ブラウザ対応状況（2025年6月時点）：@scope は Chrome 118 以上・Safari 17.4 以上・Firefox 128 以上で利用可能です。対応範囲は急速に広がっていますが、社内ツールなど特定環境向けでなければ、従来のラッパーセレクタ方式と組み合わせて使うのが安全です。
