個人ブログのようなものです。とくにジャンルはありません。
広告枠
スッキリわかるJava入門 第3版 (スッキリわかる入門シリーズ)
商品ページ
Amazon
本記事のトピック
  • SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
  • どう書けばいいか
記事の概要
作成日:2024-01-15
最終更新日:2024-01-15
記事の文字数:1630
Webサイト作成情報技術気ままな日記プログラミング
管理人作品宣伝
1分以内に超能力テストゲームをクリアする
動画 / 最終更新:2025-01-26
1分以内に超能力テストを全問クリアでクリアする動画です。コンセプトはありません。 サ…
YouTubeで閲覧する
利用素材等の詳細情報
【MMD】当店はセルフサービスとなっております
動画 / 最終更新:2024-12-03
ありとあらゆるサービスがセルフサービスになってるファミレス…
YouTubeで閲覧するニコニコ動画で閲覧する
利用素材等の詳細情報
作品一覧はこちら
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見せて聞いたら、そもそもネストしてメディアクエリ書くこと自体ダメだって言われました
コメントログ
コメント投稿




広告枠
Python[完全]入門
商品ページ
Amazon
関連ページ
L'Arc~en~Cielの曲を個人的に評価した
本ページについて ラルクの中で各曲を個人的に評価して★0個から5個までを付けています。 ★0個が基…
【プログラミング】実例で分かるかもしれない再帰処理
本ページは以下動画の台本を書き起こしたものです 解説の趣旨・方向性 皆さん、こんばんは今回はプログ…
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-公開
概要 SNSツイートを一元化するためのツールを作成しています(古い記事ですが、こちらのページで紹介…
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-Python
概要 概要 SNSのツイートを一元化する際の備忘録というかPythonコードの共有です。 それぞれ…
NovelAI R18イラスト集
概要 『NovelAI』で作成したR18イラストの寄せ集めです。 全81枚。 R18なので満18歳…
NovelAI イラスト集
概要 『NovelAI』で作成したイラストの寄せ集めです。 別で失敗集も上げていますが、こちらはそ…
Windows-PowerShellを使用してのフォルダ内のファイル名を連番にリネームする
以下PowerShellコードを実行することで、フォルダ内のすべてのファイルのファイル名を「0001…
NovelAI 失敗集
概要 『NovelAI』で作成したイラストの中で失敗したものを集めました。 33枚ありますが見た目…
Youtubeで縦型画面で横型画面のゲームを投稿/配信してるときの対処法
Youtubeで縦型画面で横型画面のゲームを投稿/配信してるときの問題点 このページを見てる時点で…
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話 当然ですが本サイト…
管理人ツイート
本サイトのタグ一覧
NovelAIR18VRoidWebサイト作成Webツールアークナイツアークナイツ-ステージ攻略日記アズールレーンアズールレーン-日記ウマ娘ギャラリーゲームデビラビローグプログラミングホラーポケットタウン怪談気ままな日記情報技術情報技術-WebAPI知的財産権統合戦略白夜極光本サイトについて魔王スライム様がんばる!漫画
人気記事
メイド・オブ・ザ・デッド-攻略お助け情報
ネタバレ注意! 本ページは『メイド・オブ・ザ・デッド』の情報を記録しているものです。 攻略の参考に…
1136.6568 pt
剣と魔法と学園モノ。2G - パーティ編成確認ツール
ツール概要 ととモノ。2Gのパーティ編成を考える際に使うツールです。 あくまでストーリークリアまで…
288.0348 pt
アークナイツ-特訓アイテムの使用先考慮
アークナイツ-特訓アイテムの使用先について 概要と注意事項 この記事は1年以上前の実装状態での結果…
138.2727 pt
アークナイツ-5周年商品-理性換算
概要 "「5周年商品」および「新常設商品」でお得な商品はどれか"というのを理性に換算して一覧化した…
118.5679 pt
アークナイツ-「二次創作ガイドライン」と「ファンキット利用ガイドライン」の関連について
本記事の概要と注意点 本記事の趣旨・方向性 「アークナイツの二次創作ガイドライン」について、分から…
85.3333 pt
管理人について
「ふじみ むい」と言います ひょんなことから肉体を得たのでその肉体を使って活動をしています。 とい…
84.0122 pt
アークナイツ-昇進2率ランキング
アークナイツのTier表を作る際の備忘録です こちらのページで、昇進2率を基にTier表を作ろうと…
70.0833 pt
アークナイツ-4周年パック理性換算
概要 "4周年パックでお得な商品はどれか"というのを理性に換算して一覧化したものとなります。 絶対…
60.5000 pt
最新記事
メンバーシップについて
概要 他サイトのサービスでメンバーシップ登録が可能です。 メンバーシップ特典もありますが、基本的に…
本サイトについて
本サイトの概要 個人ブログのようなものです。とくにジャンルはありません。 本サイト内の情報について…
TRICK-本物っぽい霊能力者
概要 TRICKは基本的にインチキ霊能力者のインチキを暴いていく話ですが、中にはトリックでは説明が…
アークナイツ-特訓アイテムの使用先考慮
アークナイツ-特訓アイテムの使用先について 概要と注意事項 この記事は1年以上前の実装状態での結果…
広告枠