質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

248閲覧

メディアクエリに関する質問です。

tiqua_nibio

総合スコア62

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/11/14 04:32

例えば、下記のようなコードがあるとします。

HTML

1<div class="class_01 class_02 class_03 class_04">sasa</div>

CSSファイルの中では、

CSS

1.class_01.class_02{ 2 text-align:left; 3} 4 5@media screen and (max-width:1024px) { 6 .class_01.class_02{ 7 8 text-align:center; 9 /*(※)この部分を実行させることができない。*/ 10 11 } 12}

というふうにwidthによってCSSを分岐させています。

しかしながら、これですと動きません。1024pxより小さいと、(※)の部分のスタイルに変わるようにしたいのですが、できません。

ただ、回避策はあります。以下の2つなら動くようです。

CSS

1.class_01.class_02{ 2 text-align:left; 3} 4 5@media screen and (max-width:1024px) { 6 .class_01.class_02.class_03.class_04{ 7 8 text-align:center; 9 /*これだと動く。*/ 10 11 } 12}

CSS

1.class_01.class_02{ 2 text-align:left; 3} 4 5@media screen and (max-width:1024px) { 6 .class_01.class_02{ 7 8 text-align:center !important; 9 /*これだと動く。*/ 10 11 } 12}

ですが、少し問題があります。それはclass_03の名前が色々と変わるのです。

ですので、class_03、class_04を指定しなくとも、class_01とclass_02のみでメディアクエリを動かせないでしょうか?

また、importantの乱発は良くないでしょうか?

まさかとは思いますが、@media screen and…の中では4つのクラスのすべてを指定していないと動かないとは思いませんでした。
@media screen and…の外であれば、4つのうち2つのクラスを指定するだけでもスタイルが適用されるようです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/11/14 04:37

メディアクエリに関する質問がこれっきりにならないのでしたらタイトルはもっと固有のものとなるよう要件を記載してください
guest

回答2

0

しかしながら、これですと動きません。1024pxより小さいと、(※)の部分のスタイルに変わるようにしたいのですが、できません。

再現しません。書かれていないコードが影響しているものと思われます。

jsFiddleで意図通り動作しています

投稿2019/11/14 04:45

編集2019/11/14 04:50
maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

!importantをつけることで意図したとおりになるのであれば
CSSの詳細度が原因のようですが、見た感じ最初の記述で動くはずなので不思議ですね。。

CSSの記述順もいただいたソースコードのように上からメディアクエリなし→メディアクエリなしになっているのですよね?(Scssなどで出力されたときに順序が変わったりしていないですよね?)

取り急ぎスタイルをあてたいようでしたら下記のようにどちらもメディアクエリを適用すればいけるかもしれません。

@media screen and (min-width:1025px) { .class_01.class_02{ text-align:left; } } @media screen and (max-width:1024px) { .class_01.class_02{ text-align:center; } }

!importantは最後の手段ですのでこれを使うよりは.class_03などで詳細度を上げるほうがよいと思います。

投稿2019/11/14 04:53

tsuyo_244

総合スコア219

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tiqua_nibio

2019/11/18 03:09

ありがとうございます。 私の求めていた方法が見つかりました。 maxとminを分けて指定し、スタイルの共通部分などを分けたりしてそろえると、うまくいきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問