【Sassは不要】CSSで&（アンパサンド）を使ってネストする方法と命名ストレスからの解放

2025年7月6日

「もっと効率的にCSSを書くにはどうすれば良いだろう？」

「クラス名を考えるのってめんどくさい」

こんなふうに考えたことはありませんか？

私自身、良いCSSを書くにはどうすれば良いのかを、日々考えています。

この記事では、CSSを効率的に書くための&（アンパサンド）を使った方法を紹介していきます。

Sassを使用しなくてもネストは可能

少し前までは、CSSでネストの記述を使用するのには、Sassを使用する必要がありました。

【Sassの記述例】

.container {
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
 
  h1 { 
    color: #333;
    font-size: 2em;
    text-align: center;
  }
}

Sassは、プログラミングのようにCSSを記述できる方法として、一時期多くのプロジェクトで使用されました。

ただ一方で、

といったデメリットも存在します。

私自身、Sassは勉強しましたが、
あまり使っていません。

2025年現在、CSSでもSassと同じようにネスト記法を使うことが可能です。

【CSSのネスト記法】

.container {
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
 
  & h1 { 
    color: #333;
    font-size: 2em;
    text-align: center;
  }
}

※&がなくても問題ないが、一部ブラウザの過去Ver.では&がないと効かなくなるケースがあるようです。

CSSでネスト記法をするために必要なものは何もなく、通常のCSSファイルで利用することができます。

また、ネストに限らず、

root {
  --color: red;
}

.company {
  color: var(--color);
}

変数も利用可能です。

ネストを使うメリットとして、不要なクラス名を省けるという点があります。

<div class="company">
 <h1>h1タイトル</h1>
    <p>キャッチコピー</p>
    <p>本文</p>
</div>

<div class="service">
 <h1>h1タイトル</h1>
    <p>キャッチコピー</p>
    <p>本文</p>
</div>

上記のような2つのページがあって、h1タグとpタグのデザインを各ページで変えたい時、通常h1タグやpタグそれぞれにクラス名をつけると思います。

ただそうすると、.company-page-titleとか.company-catchとか、クラス名が長くなりがちだし、いちいち考えるのも面倒です。

ネストを使用すれば、

.company {
 & h1 {
  color: red;
}
}

.service {
 & h1 {
 color: blue;
}
}

クラス名は不要です。

例えば、見出しタグの場合なら、

.page-title{
  font-size: 3.2rem;
  font-weight: 700;
  color: red;
}

最低限の共通設定をしておき、
ページごとに異なるもののみ、
個別に記載すれば効率的です。

.company {
 & .page-title{
  font-size: 3.2rem;
  font-weight: 700;
  color: red;
}
}

私は普段のコーディングでは、基本的にネスト記法を使っています。

ただ、注意点もあります。

私はネストを使い始めた当初、何でもかんでもネストしていました。

.company {
 & .page-title {
  color: red;
 & span {
  font-size: .8em;
}
}
}

ネストは便利ですが、使いすぎると、どこをどうなおせば良いかがわからなくなります。

必要以上にネストしないようにしましょう。

生成AIにコードをチェックしてもらう際には、Sassの記述になってるという理由でエラー判定されます。

生成AIがデータベースに持っている情報は最新のものではないので、CSSのネストに限らず、最新のテクニックなどは、エラー判定されることが多いです。

 @media (width >= 750px)

例えば、上記コードは、
問題なく使用できますが、
コードチェックを依頼すると、

@media (min-width: 750px)

に変更されます。

CSSは日々進化していて、
これまでできなかったことができるようになっています。

とくに、ネスト記法はCSSを効率的に記述するための強力な武器です。

特別な準備も、学習も必要なく、すぐに利用できます。

ぜひ積極的に活用していきましょう。

もしよろしければシェアお願いいたします。