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

目次
こんにちは。新年明けたと思ったらあっという間に一月が終わりますね。
ジャネーの法則なんてものがありますが、毎日同じことに繰り返しだとやはり体感的に早く感じてしまうようですね。
ヴィム・ヴェンダース監督、役所広司主演の「PERFECT DAYS」を見ましたが、同じように見える毎日でも変わらないものはないみたいですよ。過去を振り返ることなく覚悟を持って淡々と毎日を送る。
生きるっていうのはそういうことみたいです。
さて、今回はCSSをネスト(入れ子構造)にして書く方法です。
以前はSass(CSSを拡張して扱いやすくしたもの)でしかできなかったのですが、通常のCSSでも2023/08/29、全ブラウザで対応されました!
いろんな書き方がありますが、今回は基礎的なよく使うものについて紹介します。
ネスト(入れ子構造)とは
ネスト(入れ子構造)とは何ぞやと思う方もいると思います。
ざっくり言うと親要素を何回も書かなくていい書き方です!
<div class="parent">
<div class="child_01">
こんにちは
</div>
<div class="child_02">
こんにちは
</div>
</div>
例えばですが、こんなHTMLがあり、それぞれ別の色を変えたかったとします。
.parent .child_01{
color:red;
}
.parent .child_01{
color:blue;
}
通常のCSSだとこのように書きますが、入れ子ですと…
.parent{
.child_01{
color:red;
}
.child_02{
color:blue;
}
}
このように書けます!
指定するセレクターの量が多くなってきたときやクラス名がやたら長いときなど何度も同じ親要素をを書かなくていいので効率がとても上がりますし、見た目も分かりやすく綺麗になります。
使わない手はないですね!
hoverなど疑似クラスの記述はどう書けばいいの?
hoverなどの擬似クラスはネストした階層で「&:」を先頭につける書き方になります。
<a class="link" href="#">リンク</a>
というHTMLでホバーした時、訪問済みにリンクの色を変えたい場合は
.link{
&:hover,
&:visited{
color:red;
}
}
こう書きます!
よく使用するfirst-of-type等も疑似クラスなのでこの書き方ですね。
擬似要素はどう書けばいいの?
before、afterなどの擬似要素はネストした階層で「&::」を先頭につける書き方になります。
<div class="giziyouso">擬似要素</div>
.giziyouso{
&::before{
content:"";
width:100px;
height:100px;
}
}
となるわけですね!
その他のセレクタ(一部)
・隣接セレクタ
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li class="list_03">リスト3</li>
<li>ここの色変えたい</li>
<li>リスト5</li>
</ul>
.list_03{
+ li{
color:red;
}
}
・直下セレクタ
<div class="below">
<h2>h2の見出し</h2>
<p>ここの色変えたい</p>
<p>ここの色変えたい</p>
<div>
<h3>h3の見出し</h3>
<p>テキスト</p>
<p>テキスト</p>
</div>
</div>
.below{
> p{
color:red;
}
}
メディアクエリはどう書けばいいの?
.test {
color: blue;
@media (max-width: 768px) {
color: red;
}
}
このように書けちゃいます!
いやー、楽ですし見やすいです。
注意点
私の経験上の備忘録的にはなってしまうのですが、
疑似要素にメディアクエリをつけるなどのネストはスマホなどの実機で見たとき、反映されないケースがありました。
例:
.test{
&::before{
background-image: (/..../....);
background-size: 100px;
background-position: center;
@media (max-width: 768px){
background-size: 50px;
background-position: bottom;
}
}
}
実機ですとメディアクエリの内容が反映されません。
検証ツール等で見ると反映されているので、あれ?となり、メディアクエリをこのネスト構造から外したら実機でも反映されました。
詳細に検証しているわけではないのですが、このような書き方は自分の中では避けるようにしています。同じような経験がある方試してみてください。
まとめ
ネスト(入れ子構造)基礎的な書き方のご紹介でした。
通常のCSSでもネストで書けるようになり、非常に便利になりました。これからもっといろいろ便利になるんでしょうね…
これからも、使える技術は大いに活用させてもらってWEB制作やってきましょう!それでは!
-
CONTACTお問い合わせ
- デザインの力で事業を発展させたい、
システムの開発・運用を検討してみたい、など
まずはお気軽にご相談ください。