SASSなしで使えるCSSネストの基本

はじめに

CSSのネスト（入れ子構造）は、従来SASSやLESSといったプリプロセッサを使わなければ実現できませんでした。しかし、CSSの仕様として正式にネストが導入されつつあり、ブラウザの対応も進んでいます。本記事では、SASSなしで使えるCSSネストの基本を解説します。

CSSネストとは、親要素のスタイル内に子要素のスタイルを記述することで、階層構造を直感的に表現できる技術です。これにより、コードの可読性が向上し、よりシンプルに管理できるようになります。

CSSのネストは &（アンパサンド）を使って実現します。基本的な構文は以下のとおりです。

.container {
    color: black;
    
    & h1 {
        font-size: 2em;
    }
    
    & p {
        font-size: 1em;
    }
}

このコードは、以下のように展開されます。

.container {
    color: black;
}

.container h1 {
    font-size: 2em;
}

.container p {
    font-size: 1em;
}

親子関係が視覚的にわかりやすくなり、どの要素がどこに属しているのかを直感的に理解できます。

不要なクラス名の重複を減らすことで、CSSの記述量を削減できます。

関連するスタイルをまとめて記述できるため、修正や追加が容易になります。

& を活用することで、疑似クラスや疑似要素も簡単に記述できます。

.button {
    background-color: blue;
    color: white;
    
    &:hover {
        background-color: darkblue;
    }
}

このコードは、以下のように展開されます。

.button {
    background-color: blue;
    color: white;
}

.button:hover {
    background-color: darkblue;
}

メディアクエリもネスト内に記述できます。

.card {
    padding: 20px;
    
    @media (max-width: 600px) {
        padding: 10px;
    }
}

このコードは、以下のように展開されます。

.card {
    padding: 20px;
}

@media (max-width: 600px) {
    .card {
        padding: 10px;
    }
}

CSSネストは現在、多くのモダンブラウザで対応が進んでいますが、一部の古いブラウザではサポートされていません。利用する前に最新の対応状況を確認しましょう。

ネストを深くしすぎると、逆に可読性が下がり、CSSの管理が難しくなります。3～4階層以内に抑えるのが理想です。

CSSのネスト機能を活用すると、より直感的で管理しやすいスタイルシートを作成できます。SASSを使わなくても、モダンなCSSだけで効率的に記述できるようになってきています。ブラウザ対応状況を確認しつつ、適切に活用していきましょう！