CSSのコードがぐっと読みやすく！『CSS入門入れ子編』をリリースしました

2024年12月11日 11:13

今週は CSS 入門に「入れ子編」のレッスンを追加しました。一部の古いブラウザには対応していませんが、主要なモダンブラウザの最新版では問題なく使えるのと、知っておくとやはり便利なので、基本的な使い方についてまとめてみました。

CSS の入れ子って？

CSS を書いていると、以下のように子孫結合子を使ってスタイリングをすることがよくあります。

.card {
  ...
}

.card h2 {
  ...
}

.card p {
  ...
}

これはこれでいいのですが、CSSの入れ子を使って次のように書けば、上とまったく同じ意味になります。

.card {
  ...

  h2 {
    ...
  }

  p {
    ...
  }
}

このように書けば、.card に関するスタイルをまとめて書くことができてコードのメンテナンスがしやすくなりますね。とっても便利なので、（ブラウザ対応状況を考慮する必要はありますが）テクニックとして習得しておくといいでしょう。

今回のレッスンはCSSの基礎（特にセレクター）やメディアクエリーの知識を前提としています。そのあたりのレッスンを受講された方が、ひとつ上のレベルをめざすのに最適です。

また今回のレッスンは全 8 回とコンパクトにまとめてみました。1 本ごとの時間も短いので、スキマ時間を効果的に活用したい、という方はぜひチェックしてみてください。