Webサイトを作るときに欠かせないCSS。

コードが長くなると、「どのスタイルがどの要素に対応しているのか分かりにくい…」と感じたことはありませんか？

そんなときに役立つのが CSSネスト です。Sassのようなツールを使わなくても、ブラウザーが直接入れ子記法を理解してくれるようになりました。

この記事では、初心者の方でもすぐに使えるように、CSSネストの基本をやさしく解説します。

CSSネストとは？

CSSネスト（CSS Nesting） とは、CSSのコードを「入れ子」の形で書ける新しい書き方です。

これまでは「Sass」や「SCSS」、「Less」などのツールを使わないとできませんでしたが、今では通常のCSSだけでも書けるようになっています。

ネストを使うメリット

• 親と子の関係がひと目で分かる
• スタイルをひとまとめにできて見やすい

CSSネストの基本の書き方

まずは通常のCSSでの書き方を見てみましょう。

.card {
  padding: 1rem;
  background: #fff;
}

.card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.card p {
  color: #666;
}

.card:hover {
  background: #f5f5f5;
}

上のコードをCSSネスト を使って書くと、以下のようにまとめて書くことができます。

.card {
  padding: 1rem;
  background: #fff;

  & h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  & p {
    color: #666;
  }

  &:hover {
    background: #f5f5f5;
  }
}

このように、CSSネストを使うと、関連するスタイルをまとめて書けるのでコードがスッキリします。

CSSネストの基本ルール

「&」は親要素を指す

.card {
  & p { color: #666; } /* .card p と同じ意味 */
}

子要素はそのまま入れ子に書ける

.card {
  h2 { font-size: 1.5rem; } /*子要素を書くだけなら & はなくてもOK*/
}

擬似クラスや状態もまとめられる

.card {
  &:hover { background: #f5f5f5; } /* .card:hover と同じ意味 */
  &.active { border: 1px solid red; } /* .card.active と同じ意味 */
}

今回は、CSSネストの基本と書き方を紹介しました。

最初は「&」や入れ子の書き方に少し戸惑うかもしれませんが、親子関係の整理を意識して少しずつ使ってみるとすぐに慣れてきます。

まずは簡単なコードから挑戦して、コードの整理や見やすさを実感してみましょう。

なお、ネストにはデメリットもあるため、使い方には注意が必要です。こちらについては次回もうSassはいらない？CSSネストで快適にスタイルを書く｜メリット・デメリットで説明します。