本記事のトピック
- SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
- どう書けばいいか
管理人作品宣伝
1分以内に超能力テストゲームをクリアする
動画 / 最終更新:2025-01-261分以内に超能力テストを全問クリアでクリアする動画です。コンセプトはありません。 サ…
YouTubeで閲覧する
利用素材等の詳細情報
【MMD】当店はセルフサービスとなっております
動画 / 最終更新:2024-12-03ありとあらゆるサービスがセルフサービスになってるファミレス…
YouTubeで閲覧するニコニコ動画で閲覧する
利用素材等の詳細情報
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
当然ですが本サイトでもCSSを使っています。
その中でメディアクエリ(@mediaなんちゃらって書くアレ)や疑似要素(::beforeとか::hoverとか)も当然使っています。
それで今までは以下のような書き方をしてたんです。
ただ、疑似要素はともかくメディアクエリが混ざってくるとCSS内もぐちゃぐちゃというか、同じような内容が全然別の場所に書かれてしまうようになってしまうので、 できればまとめて書きたくなります。
そこでSCSSという良いものがあり、その書き方を使うことで、メディアクエリをセレクタ内にネストして書くことができるらしいんです。
ということで、こんな風に書きました。
以下はダメだった例です。
ただこの書き方だと、疑似要素側のスタイルがスマホ(正しくは幅が1024px以下の画面)で適用されませんでした。
その中でメディアクエリ(@mediaなんちゃらって書くアレ)や疑似要素(::beforeとか::hoverとか)も当然使っています。
それで今までは以下のような書き方をしてたんです。
.cls{
/* ここに基本的なスタイル */
}
.cls::before{
/* ここに疑似要素のスタイル */
}
@media screen and (max-width:1024px) {
.cls{
/* ここにスマホでのスタイル */
}
.cls::before{
/* ここにスマホでの疑似要素のスタイル */
}
}
まぁ普通の書き方だと思います。ただ、疑似要素はともかくメディアクエリが混ざってくるとCSS内もぐちゃぐちゃというか、同じような内容が全然別の場所に書かれてしまうようになってしまうので、 できればまとめて書きたくなります。
そこでSCSSという良いものがあり、その書き方を使うことで、メディアクエリをセレクタ内にネストして書くことができるらしいんです。
ということで、こんな風に書きました。
以下はダメだった例です。
.cls{
/* ここに基本スタイルを書くのは変わらない */
@media screen and (max-width:1024px) {
/* ここにスマホでのスタイルを書ける */
}
}
.cls::before{
/* ここに疑似要素のスタイルを書く(動くが、SCSSではもっと良い書き方がある) */
@media screen and (max-width:1024px) {
/* 【NG!】ここにスマホでのスタイルを書ける……? */
}
}
気持ちはわかると思います。だってもともと疑似要素は別々に書いてたじゃないですか。ただこの書き方だと、疑似要素側のスタイルがスマホ(正しくは幅が1024px以下の画面)で適用されませんでした。
どう書けばいいか
ちょっと横にそれた話になりますが、疑似要素とメディアクエリ。SCSSでのそれぞれの正しい書き方は以下らしいです。
で、これらを踏まえて疑似要素とメディアクエリを組み合わせた書き方は以下のようになります。
パッと探した感じこの組み合わせで引っかかった人いないみたいなんですが、ボクくらいしか引っかからないこと?
SCSSとやらの勉強をきちんとしたら引っかからないことなのかもしれないですが、ボクは勉強が嫌いなので。
ちなみにChatGPT4先生に生のCSS見せて聞いたら、そもそもネストしてメディアクエリ書くこと自体ダメだって言われました
.cls{
/* ここに基本スタイルを書くのは正しい */
&:before{
/* 疑似要素のスタイルはここに書くのが正しい */
}
@media screen and (max-width:1024px) {
/* スマホでのスタイルはここに書くのが正しい */
}
}
つまり、疑似要素は「&:疑似要素名{}」内に、メディアクエリはそのままメディアクエリ内に書くのが正しいらしいです(&は親要素セレクタを指すらしい)。で、これらを踏まえて疑似要素とメディアクエリを組み合わせた書き方は以下のようになります。
.cls{
/* ここに基本スタイルを書く */
&:before{
/* ここに疑似要素のスタイルを書く */
@media screen and (max-width:1024px) {
/* 【NG!】疑似要素内でメディアクエリの指定は無視される */
}
}
/* ここにスマホでのスタイルを書く */
@media screen and (max-width:1024px) {
&:before{
/* 【OK!】スマホでの疑似要素のスタイルはここに書くのが正しい */
}
}
}
つまり、メディアクエリ→疑似要素、の書き方じゃないとダメだよということらしいです。パッと探した感じこの組み合わせで引っかかった人いないみたいなんですが、ボクくらいしか引っかからないこと?
SCSSとやらの勉強をきちんとしたら引っかからないことなのかもしれないですが、ボクは勉強が嫌いなので。
ちなみにChatGPT4先生に生のCSS見せて聞いたら、そもそもネストしてメディアクエリ書くこと自体ダメだって言われました
コメントログ
コメント投稿