個人ブログのようなものです。とくにジャンルはありません。
記事の概要
作成日:2024-01-15
最終更新日:2024-01-15
1ヵ月あたりのビュー数:43
記事の文字数:1630
本記事のトピック
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
当然ですが本サイトでもCSSを使っています。
その中でメディアクエリ(@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でのそれぞれの正しい書き方は以下らしいです。
.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見せて聞いたら、そもそもネストしてメディアクエリ書くこと自体ダメだって言われました
関連ページ
(現在ページ)SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話 当然ですが本サイト…
Twitterの「興味関心」のチェックを全部まとめて外す
Twitterの「興味関心」のチェックを全部まとめて外せない Twitterに「興味関心」とやらを…
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題…
アークナイツ-育成素材数集計ページの作成にあたっての余談
アークナイツ-育成素材数集計ページの作成にあたっての余談…
東京03のyoutubeチャンネルの概要ページの挙動がおかしい
東京03のyoutubeチャンネルの概要ページの挙動がおかしい…
Youtube Data APIでハンドルIDからユーザ情報を取得できない
Youtube Data APIでハンドルIDからユーザ情報を取得できない問題 結論から言うと現在…
ウマ娘まとめサイト(InoReader)
ウマ娘まとめサイト(InoReader)…
ウマ娘まとめサイト(Feedly)
ウマ娘まとめサイト(Feedly)…
Pythonを使ってinoreaderでサイトの更新情報を取得してみた
inoreader(イノリーダー?)が公開しているWeb APIを使用して、Pythonで自動的にサ…
Pythonを使ってFeedlyでサイトの更新情報を取得してみた
Pythonを使ってFeedlyでサイトの更新情報を取得してみた…
CPU-マルチプロセッサによる並列処理
CPU-マルチプロセッサによる並列処理…
CPUの高速化方式
CPUの高速化方式…
CPUの性能指標
CPUの性能指標…
CPU-アドレス指定方式
CPU-アドレス指定方式…
CPU命令実行の流れ
CPU命令実行の流れ…
文字コードについて
文字コードについて…
base64エンコードの流れ(C#)
base64エンコードの流れ(C#)…
サイバー攻撃:非標的型攻撃とは
サイバー攻撃:非標的型攻撃とは…
サイバー攻撃:標的型攻撃とは
サイバー攻撃:標的型攻撃とは…
IPアドレスについて
IPアドレスについて…
シングルサインオン/SAML認証について
シングルサインオン/SAML認証について…
コメントログ
コメント投稿




本サイトのタグ一覧
タグを表示する Webサイト作成Webツールアークナイツアークナイツ-ステージ攻略日記アズールレーンアズールレーン-日記ウマ娘ゲームデビラビローグホラーポケットタウン気ままな日記情報技術情報技術-WebAPI知的財産権統合戦略白夜極光本サイトについて魔王スライム様がんばる!漫画