CSSをネスト(入れ子)で書く方法 | 東京都墨田区のHP・デザイン・イラスト制作会社 TenCy株式会社
  • 2025.1.31

    CSSをネスト(入れ子)で書く方法

    こんにちは。新年明けたと思ったらあっという間に一月が終わりますね。
    ジャネーの法則なんてものがありますが、毎日同じことに繰り返しだとやはり体感的に早く感じてしまうようですね。
    ヴィム・ヴェンダース監督、役所広司主演の「PERFECT DAYS」を見ましたが、同じように見える毎日でも変わらないものはないみたいですよ。過去を振り返ることなく覚悟を持って淡々と毎日を送る。
    生きるっていうのはそういうことみたいです。

    さて、今回はCSSをネスト(入れ子構造)にして書く方法です。
    以前はSass(CSSを拡張して扱いやすくしたもの)でしかできなかったのですが、通常のCSSでも2023/08/29、全ブラウザで対応されました!
    いろんな書き方がありますが、今回は基礎的なよく使うものについて紹介します。

    ネスト(入れ子構造)とは

    ネスト(入れ子構造)とは何ぞやと思う方もいると思います。
    ざっくり言うと親要素を何回も書かなくていい書き方です!

    例えばですが、こんなHTMLがあり、それぞれ別の色を変えたかったとします。

    通常のCSSだとこのように書きますが、入れ子ですと…

    このように書けます!
    指定するセレクターの量が多くなってきたときやクラス名がやたら長いときなど何度も同じ親要素をを書かなくていいので効率がとても上がりますし、見た目も分かりやすく綺麗になります。

    使わない手はないですね!

    hoverなど疑似クラスの記述はどう書けばいいの?

    hoverなどの擬似クラスはネストした階層で「&:」を先頭につける書き方になります。


    というHTMLでホバーした時、訪問済みにリンクの色を変えたい場合は

    こう書きます!
    よく使用するfirst-of-type等も疑似クラスなのでこの書き方ですね。

    擬似要素はどう書けばいいの?

    before、afterなどの擬似要素はネストした階層で「&::」を先頭につける書き方になります。

    となるわけですね!

    その他のセレクタ(一部)

    ・隣接セレクタ

    ・直下セレクタ

    メディアクエリはどう書けばいいの?

    このように書けちゃいます!
    いやー、楽ですし見やすいです。

    注意点

    私の経験上の備忘録的にはなってしまうのですが、
    疑似要素にメディアクエリをつけるなどのネストはスマホなどの実機で見たとき、反映されないケースがありました。

    実機ですとメディアクエリの内容が反映されません。
    検証ツール等で見ると反映されているので、あれ?となり、メディアクエリをこのネスト構造から外したら実機でも反映されました。
    詳細に検証しているわけではないのですが、このような書き方は自分の中では避けるようにしています。同じような経験がある方試してみてください。

    まとめ

    ネスト(入れ子構造)基礎的な書き方のご紹介でした。
    通常のCSSでもネストで書けるようになり、非常に便利になりました。これからもっといろいろ便利になるんでしょうね…
    これからも、使える技術は大いに活用させてもらってWEB制作やってきましょう!それでは!

    OTHER NEWS

    一覧にもどる