CSSセレクタの使い方を完全ガイド！初心者でもわかる:not()の使い方
生徒
「先生、CSSのセレクタで、特定の要素だけ除外する方法ってありますか？」
先生
「いい質問ですね。CSSには:not()という“除外”ができる疑似クラスがあるんです。」
生徒
「えっ、CSSに“除外”なんてできるんですか！？全然知りませんでした！」
先生
「そうなんです。初心者でも簡単に使えるので、これから丁寧に解説していきますね！」
1. CSSのセレクタとは？初心者でもわかる基本から説明！
まずは、CSSの「セレクタ」について説明します。セレクタとは、HTMLの中の「どの要素に対してデザインを適用するか」を指定するためのものです。
例えば、<p>というタグの文字の色やサイズを変えたいときは、その<p>をセレクタとして指定します。
2. :not()疑似クラスとは？簡単に言うと「除外フィルター」
:not()は、特定のセレクタを「除外」するためのCSSの機能です。難しい言葉でいうと「疑似クラス（ぎじゅくらす）」という種類のひとつですが、これは「特定の条件に合った要素だけを選ぶ仕組み」と覚えておくといいでしょう。
簡単に言えば「このルールを適用するけど、◯◯だけは除いてね」とCSSにお願いできる便利な道具です。
3. 実際に:not()を使ってみよう！基本の使い方
例えば、ページ内のすべての段落<p>に色をつけたいけれど、特定のクラス名がついている段落だけには色をつけたくない場合、次のように書きます。
<style>
p:not(.no-color) {
color: red;
}
</style>
<p>これは赤くなります。</p>
<p class="no-color">これは除外されて赤くなりません。</p>
4. :not()はどうやって書くの？構文を確認しよう
:not()は次のように書きます。
セレクタ:not(除外したいセレクタ)
「セレクタ」は、影響を与えたいHTMLのタグやクラスのことで、「除外したいセレクタ」は、影響を受けたくないタグやクラスのことです。
つまり、p:not(.no-color)と書けば、クラス名が「no-color」でない段落（pタグ）にだけスタイルが適用されます。
5. 複数の要素を除外する方法は？カンマではダメ！
:not()の中には、カンマ（,）で複数のセレクタを直接書くことはできません。たとえば:not(.a, .b)という書き方はできないのです。
そのかわり、次のように複数の:not()を連続して書く必要があります。
<style>
p:not(.no-color):not(.skip) {
color: green;
}
</style>
<p>これは緑になります。</p>
<p class="no-color">これは除外されます。</p>
<p class="skip">これも除外されます。</p>
6. 応用編：HTMLの構造に応じて使いこなそう！
:not()は、タグ・クラス・IDなど、さまざまな形で使うことができます。たとえば、リストの中で特定のアイテムだけを除外したいときにも便利です。
<style>
li:not(.exclude) {
font-weight: bold;
}
</style>
<ul>
<li>これは太字になります</li>
<li class="exclude">これは除外されて通常の文字です</li>
</ul>
7. :not()はSEOにも役立つ！表示の工夫で見やすいページに
:not()を使うことで、ユーザーが見やすくて、必要な情報だけを目立たせるようなページ作りができます。例えば、「広告だけは目立たせないようにしたい」「特定のボックスだけスタイルを外したい」といったときに使うと、見た目がスッキリ整います。
結果として、ページの読みやすさが上がるので、Googleなどの検索エンジンにも良い影響を与えることがあります。
8. 初心者が間違えやすいポイントとその対策
初心者がよくやってしまう間違いは、次のようなものです。
:not()の中にカンマを入れてしまう- 除外対象にクラス名やIDを正しく書かない（ピリオドやシャープの付け忘れ）
:not()をHTMLではなくCSSに書くことを忘れる
ポイントは、「スタイルを書くのはCSS」、「除外する相手は:not()の中に1つずつ書く」と覚えることです。
9. おさらい：:not()はCSSの柔軟なスタイリングに必須！
:not()を使えば、特定のクラスや要素を簡単に除外できるので、CSSでのデザイン調整がとてもラクになります。
まだCSSを始めたばかりでも、:not()の考え方を知っておくと、後々かなり便利に使えるようになります。
まずは「色をつけるけど、このクラスは除きたい」といった簡単な場面で、どんどん試してみましょう！
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSSセレクタとは何ですか？初心者にもわかりやすく教えてください。
CSSセレクタとは、HTMLの中でどの要素に対してCSSのスタイルを適用するかを指定するものです。たとえば段落タグpに色をつけたい場合、pをセレクタとして指定します。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
