個人ブログのようなものです。とくにジャンルはありません。
世界征服彼女 -Switch
商品ページ
Amazon
収益広告(手動登録)
【Amazon.co.jp限定】大人の科学マガジン BESTSELECTION07 小さな活版印刷機 活字増量版
商品ページ
Amazon
収益広告自動登録)
龍の国 ルーンファクトリー - Switch
商品ページ
Amazon
収益広告自動登録)
【PS5】ELDEN RING NIGHTREIGN 【数量限定特典】ジェスチャー「雨よ!」同梱
商品ページ
Amazon
収益広告自動登録)
【PS5】ELDEN RING NIGHTREIGN 【数量限定特典】ジェスチャー「雨よ!」同梱【Amazon.co.jp限定】ポストカードセット 付き 同梱
商品ページ
Amazon
収益広告自動登録)
記事の概要
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
作成日:2024-01-15
最終更新日:2024-01-15
記事の文字数:1630
Webサイト作成情報技術気ままな日記プログラミング
本記事のトピック
  • SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
  • どう書けばいいか
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見せて聞いたら、そもそもネストしてメディアクエリ書くこと自体ダメだって言われました
コメントログ
※コメントは最新50件が表示されます
コメント投稿




画面下部の「コンタクト」からも連絡可能です。
管理人ツイート
D.C.Ⅱ.S.S.~ダ・カーポⅡセカンドシーズン~(TV番組)
商品ページ
Amazon
非収益広告(手動登録)
ファンタジーライフi グルグルの竜と時をぬすむ少女 -Switch 【初回特典】 「駆け出し冒険者セット」(獲得経験値アップ効果のついたアクセサリー「チョウチョのチャーム」、「お役立ち消費アイテム9種」 ) 封入
商品ページ
Amazon
収益広告自動登録)
【任天堂ライセンス商品】貼りやすい 高硬度ブルーライトカットフィルム“ピタ貼り" for Nintendo Switch™ 2【Switch2専用】
商品ページ
Amazon
収益広告自動登録)
スッキリわかるJava入門 第3版 (スッキリわかる入門シリーズ)
商品ページ
Amazon
収益広告(手動登録)
管理人作品宣伝
ChatGPT-アイコンと名前変更
Chrome 拡張機能 / 最終更新:2023-12-14
ChatGPTのアイコン等を自分の好みに変えられます。好きなキャラと話しているような気…ChatGPTのアイコン等を自分の好みに変えられます。好きなキャラと話しているような気分になれるかもしれません。

ChromeWebストアで閲覧する
利用素材等の詳細情報
ジグソーパズル風パズルゲーム
Webサイト / 最終更新:2025-01-23
ジグソーパズル風パズルゲームです。自分で画像を設定してパズルにできます。…ジグソーパズル風パズルゲームです。自分で画像を設定してパズルにできます。

HPで閲覧する
利用素材等の詳細情報
作品一覧はこちら
関連ページ
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-03
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-02
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-01
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
ニコニコで著作権侵害の通報(削除申請)をしたときの話
概要 ニコニコ動画において著作権侵害の通報をしたので、その時の手順や入力内容について迷ったところの…
GIF / APNG(アニメーション付きPNG)ファイル解析ページ
ファイル読込・操作 以下に調べたいファイルを読み込ませてください。 ファイル情報 カラーパレットを…
gifler.js仕様メモ
本ページの趣旨 「gifler.js」という、gifアニメーションをcanvasに簡単に表示できる…
L'Arc~en~Cielの曲を個人的に評価した
本ページについて ラルクの中で各曲を個人的に評価して★0個から5個までを付けています。 ★0個が基…
【プログラミング】実例で分かるかもしれない再帰処理
本ページは以下動画の台本を書き起こしたものです 解説の趣旨・方向性 皆さん、こんばんは今回はプログ…
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-公開
概要 SNSツイートを一元化するためのツールを作成しています(古い記事ですが、こちらのページで紹介…
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-Python
概要 概要 SNSのツイートを一元化する際の備忘録というかPythonコードの共有です。 それぞれ…
本サイトのタグ一覧
NovelAIR18VRoidWebサイト作成Webツールととモノ。アークナイツアークナイツ-ステージ攻略日記アズールレーンアズールレーン-日記ウマ娘ギャラリーゲームデビラビローグネットスラング系プログラミングホラーポケットタウン怪談気ままな日記情報技術情報技術-WebAPI知的財産権統合戦略白夜極光本サイトについて魔王スライム様がんばる!漫画
人気記事
メイド・オブ・ザ・デッド-攻略お助け情報
ネタバレ注意! 本ページは『メイド・オブ・ザ・デッド』の情報を記録しているものです。 攻略の参考に…
937.8138 pt
ポケットタウン_パズル一覧
グレーのピースの数 (Number of gray pieces):検索グレーピースの数を入力して、…
751.3676 pt
剣と魔法と学園モノ。2G - パーティ編成確認ツール
ツール概要 ととモノ。2Gのパーティ編成を考える際に使うツールです。 あくまでストーリークリアまで…
211.6452 pt
ゲーム『イカれた狩場の看板娘』の紹介・レビュー
記事概要 イカれたゲームを紹介するぜ! イカれた狩場の看板娘! 以上だ! ちなみにそんなイカれてな…
96.5714 pt
アークナイツ-昇進2率ランキング
アークナイツのTier表を作る際の備忘録です こちらのページで、昇進2率を基にTier表を作ろうと…
87.1912 pt
ロックマンエグゼ3-バグのかけら必要数まとめ-
バグのかけら必要数 必要数 これぐらいあれば足りるはず。 コレクト要素に関わる部分だけなら、ギガチ…
80.0833 pt
地獄先生ぬ~べ~で好きな切ないエピソード
概要 初代というべきか、週刊少年ジャンプで連載されていた地獄先生ぬ~べ~で好きな切ないエピソードを…
76.8182 pt
アークナイツ-常設商品-理性換算
概要 "常設商品でお得な商品はどれか"というのを理性に換算して一覧化したものとなります。 絶対的に…
76.7368 pt
最新記事
地獄先生ぬ~べ~で好きな切ないエピソード
概要 初代というべきか、週刊少年ジャンプで連載されていた地獄先生ぬ~べ~で好きな切ないエピソードを…
本サイトについて
本サイトの概要 概要 個人ブログのようなものです。とくにジャンルはありません。 本サイト内の情報に…
なぜ「ぬるぽ→ガッ」なのか
ぬるぽ→ガッとは このページを見ている人は大体知っていると思いますが、誰かが「ぬるぽ」と言ったと…
剣と魔法と学園モノ。3 - パーティ編成確認ツール
ツール概要 ととモノ。3のパーティ編成を考える際に使うツールです。 攻略本や攻略wikiを参考にし…
カプコン ファイティング コレクション2 -Switch
商品ページ
Amazon
収益広告自動登録)