歴史的に見て、CSSは扱いにくい言語でした。CSSプリプロセッサは、CSSを扱いやすくし、ループ、ミックスインなどの追加機能も提供しました。長年にわたり、CSSはより強力になり、CSSプリプロセッサが最初に導入した機能の一部を採用しました。そのような機能の1つが「ネストされたスタイル設定」です。
ネストされたスタイル設定により、開発者はCSSルールを相互にネストして、HTML構造を反映させることができます。これにより、HTML要素と対応するスタイルの関係が視覚的に明らかになり、コードがより整理され、読みやすくなります。
ネストされたスタイル設定:従来の方法
ネストされたスタイル設定は、Sass、Stylus、Less CSSなどの多くのCSSプリプロセッサで使用できる機能です。これらのプリプロセッサ間の構文は異なる場合がありますが、基本的な概念は一貫しています。クラス名containerのdiv内のすべてのh1要素にスタイルを設定したい場合、通常のCSSでは次のように記述します。
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
Less CSSなどのCSSプリプロセッサでは、次のようにネストされたスタイル設定を実装します。
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
上記のコードブロックは、通常のCSS実装と同じ結果になりますが、コードを読む開発者が何が起こっているかを把握しやすくなります。この「階層」の感覚は、CSSプリプロセッサの最大のセールスポイントの1つでした。
ネストツリーは制限なく任意の深さまでネストできますが、ネストが深すぎるとコードが冗長になる可能性があるため、注意が必要です。
CSSのネイティブネストされたスタイル設定
すべてのブラウザがネイティブのネストされたスタイル設定をサポートしているわけではありません。Can I use... Webサイトは、ターゲットブラウザがこの機能をサポートしているかどうかを確認するのに役立ちます。
CSSのネイティブネストされたスタイル設定は、CSSプリプロセッサと同様に機能します。つまり、任意のセレクタを別のセレクタの中にネストすることができます。ただし、注意すべき重要な違いが1つあります。以下のコードブロックを見てみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div>
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
</style>
</body>
</html>
上記のコードブロックでは、クラス名containerのdivは赤の背景色になっています。h1要素のスタイル設定は.containerブロックにあります。このh1要素は黄色の色になっています。このコードをブラウザで実行すると、何かがおかしいことに気付くかもしれません。ブラウザはcontainerdivに赤い背景色を正しく適用しますが、h1には適切なスタイル設定がありません。
これは、LessなどのCSSプリプロセッサと比較して、CSSでネストされたスタイル設定が少し異なる方法で動作するためです。ネストされたツリーでHTML要素を直接参照することはできません。これを修正するには、以下のようにアンパサンド(&)を使用する必要があります。
.container {
background-color: red;
& h1 {
color: yellow;
}
}
上記のコードブロックでは、&は親セレクタへの参照として機能します。h1要素の前にアンパサンドを置くことで、ブラウザはcontainerdivのすべての子h1要素をターゲットにしていることを認識するはずです。ブラウザでコードを実行すると、次のようになります。
&は親要素を参照するために使用される記号であるため、要素の疑似クラスや疑似要素を次のようにターゲットにすることは十分に可能です。
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
ネストされたメディアクエリ
CSSネストされたスタイル設定の実装前に、ブラウザの幅に応じてスタイルを条件付きで適用することを目的としていた場合、次のような方法に頼る必要がありました。
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
ブラウザがページをレンダリングすると、ブラウザの幅に基づいてp要素の色を決定します。ブラウザの幅が750pxを超えると、灰色を使用します。それ以外の場合は、デフォルトの色(黒)を適用します。
この実装は問題なく機能しますが、想像できるように、特定のルールに基づいて異なるスタイルを適用する必要がある場合、すぐに非常に冗長になる可能性があります。要素のスタイルブロックにメディアクエリを直接ネストすることが可能になりました。
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
このコードブロックは、前述のコードブロックと基本的に同じことを行いますが、理解しやすいという利点があります。メディアクエリとネストされた親要素を見るだけで、定義された条件が満たされたときにブラウザが適切なスタイルをどのように適用するかを判断できます。
CSSネストされたスタイルでWebサイトにスタイルを設定する
これまで学んだことをすべて実践し、シンプルなWebサイトを作成してCSSのネストされたスタイル設定機能を活用しましょう。フォルダーを作成し、好きな名前を付けます。そのフォルダーにindex.htmとstyle.cssファイルを作成します。
index.htmファイルに、次のボイラープレートコードを追加します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Simple Website</title> </head> <body> <div> <div> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1> <div> <span>David Uzondu</span> <span>3 hours ago</span> </div> <div> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad, asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero minima consequatur recusandae quasi aliquid quibusdam ducimus eaque! Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto iste repellat autem aspernatur beatae ut quis odio est voluptates sunt qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum quae laudantium. </div> </div> <div> <h2>Trending Articles</h2> <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4> </div> </div> </body> </html>
上記のコードブロックは、模擬ニュースWebサイトのマークアップを定義します。次に、style.cssファイルを開き、次のコードを追加します。
.container {
display: flex;
gap: 25px;
@media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
上記のコードブロックは、CSSネストされたスタイル設定のみを使用してWebサイトにスタイルを設定します。.containerセレクタはルート深度として機能します。&記号を使用して、このセレクタを参照できます。ブラウザでコードを実行すると、次のようになります。
CSSプリプロセッサは依然として必要か？
ネイティブCSSにネストされたスタイルが導入されたことで、CSSプリプロセッサは不要に思えるかもしれません。しかし、CSSプリプロセッサはネストされたスタイル設定以上の機能を提供していることを覚えておくことが重要です。ループ、ミックスイン、関数などの機能を提供します。最終的には、CSSプリプロセッサを使用するかどうかは、具体的なユースケースと個人的な好みによります。
コメントする