flexboxで、PCとスマホの表示を変える方法について
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
初めまして。
現在、PCで2〜5カラムの表示を以下のように指定しているのですが、
スマホだと小さすぎるので、%数値を変更したいと考えております。
しかし、以下の"@media (max-width: 480px){〜"で指定しても、PCの方が優先されてしまい、表示が変わりません。
何かいい手法があれば教えていただけないでしょうか。
よろしくお願いいたします。
[class^="img-flex-"] {
display: flex;
}
.img-flex-2 > img,
.img-flex-2 a { width: 49%; height: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 32%; height: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 24%; height: 24%; }
.img-flex-5 > img,
.img-flex-5 a { width: 20%; height: 20%; }
}
}
/***** 解像度480px以下のスタイル *****/
@media (max-width: 480px){
[class^="img-flex-"] {
display: flex;
}
.img-flex-2 > img,
.img-flex-2 a { width: 49%; height: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 32%; height: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 49%; height: 49%; }
.img-flex-5 > img,
.img-flex-5 a { width: 32%; height: 32%; }
}
}
現在、PCで2〜5カラムの表示を以下のように指定しているのですが、
スマホだと小さすぎるので、%数値を変更したいと考えております。
しかし、以下の"@media (max-width: 480px){〜"で指定しても、PCの方が優先されてしまい、表示が変わりません。
何かいい手法があれば教えていただけないでしょうか。
よろしくお願いいたします。
[class^="img-flex-"] {
display: flex;
}
.img-flex-2 > img,
.img-flex-2 a { width: 49%; height: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 32%; height: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 24%; height: 24%; }
.img-flex-5 > img,
.img-flex-5 a { width: 20%; height: 20%; }
}
}
/***** 解像度480px以下のスタイル *****/
@media (max-width: 480px){
[class^="img-flex-"] {
display: flex;
}
.img-flex-2 > img,
.img-flex-2 a { width: 49%; height: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 32%; height: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 49%; height: 49%; }
.img-flex-5 > img,
.img-flex-5 a { width: 32%; height: 32%; }
}
}
mimi さん
04月06日 13時32分
mimiさん、はじめまして。
あくまで推測ですが、現状ではHTML側にて、.img-flex-2は並べる子要素が2個、.img-flex-3は3個、img-flex-4は4個……という感じでしょうか。
flexboxは初期値がnowrap（折り返しさせない）なので、サイズ指定をしても、それを無視して横一列に並べてしまいます。
先ほどのような構造のHTMLであれば、img-flex-4でwidth: 49%;を指定しても、子要素が4つあればサイズ指定が無視されます。(PCが優先されると言うよりFlexboxの仕様です)
サイズ指定を優先させる（＝折り返しをさせる）にはflexコンテナにflex-wrap: wrap;を足します。
これでひとまずは希望通りの動作になるでしょうか。
HTMLが推測になりますので、もしも何か認識が誤っていましたらご指摘いただければ幸いです。
あくまで推測ですが、現状ではHTML側にて、.img-flex-2は並べる子要素が2個、.img-flex-3は3個、img-flex-4は4個……という感じでしょうか。
flexboxは初期値がnowrap（折り返しさせない）なので、サイズ指定をしても、それを無視して横一列に並べてしまいます。
先ほどのような構造のHTMLであれば、img-flex-4でwidth: 49%;を指定しても、子要素が4つあればサイズ指定が無視されます。(PCが優先されると言うよりFlexboxの仕様です)
サイズ指定を優先させる（＝折り返しをさせる）にはflexコンテナにflex-wrap: wrap;を足します。
これでひとまずは希望通りの動作になるでしょうか。
[class^="img-flex-"] {
display: flex;
flex-wrap: wrap;
}
display: flex;
flex-wrap: wrap;
}
HTMLが推測になりますので、もしも何か認識が誤っていましたらご指摘いただければ幸いです。
馬場誠 さん
04月06日 15時14分
馬場さん＞
ご回答ありがとうございます。
HTMLの方は、ご指摘いただいた通りです。
失念しており、大変失礼いたしました；
またflexboxの仕様についてきちんと把握できておりませんでした。
丁寧に教えていただき、ありがとうございます。
flex-wrap: wrap;でPCの数値の方は反映されているのですが、
スマホ版の方が優先されない状態です。
!important;などで指定しても、PC表示のままになってしまいます。
勉強不足で申し訳ございませんが、もし解決策などあればお教えいただければと思います。
自分でもflexboxについて、きちんと勉強し直します。
よろしくお願いいたします。
ご回答ありがとうございます。
HTMLの方は、ご指摘いただいた通りです。
失念しており、大変失礼いたしました；
またflexboxの仕様についてきちんと把握できておりませんでした。
丁寧に教えていただき、ありがとうございます。
flex-wrap: wrap;でPCの数値の方は反映されているのですが、
スマホ版の方が優先されない状態です。
!important;などで指定しても、PC表示のままになってしまいます。
勉強不足で申し訳ございませんが、もし解決策などあればお教えいただければと思います。
自分でもflexboxについて、きちんと勉強し直します。
よろしくお願いいたします。
mimi さん
04月06日 19時56分
mimiさん、こんにちは。
もしかしてですが、PC用と思われる方のCSSの閉じがおかしかったので、PCサイズのみにflex-wrap: wrapが適用されるようになっていないでしょうか（例えばPC用にメディアクエリを使っている場合等）
※いずれにしても、CSSの開始と閉じの対応を直した方が良いです。
※[class^="img-flex-"] { }部分のようなかぶった指定になる場合は、同じ指定を繰り返さないようにすることも検討してみてください。
!importantをしても適用されないとのことなので、あくまで推測ですが、スマホサイズにflex-wrap: wrapが効いていないっぽい感じはします。
CSSとHTMLをまるまるいただければズバリ原因を特定できるのですが、それが難しい場合は、様々な要因が考えられるため、明確にお答えするのが難しいです。ご自身で「検証ツール（デベロッパーツール）」にて、調査されるのも良いかもしれません。
検証ツールとは、要素に適用されているCSS等が分かる、開発に欠かせない便利ツールです。
ブラウザによって多少違いますが、該当箇所（想定サイズが適用されていない場所）をピンポイントでカーソルを合わせて右クリックし「検証」または「要素を検証」から、検証ツールを立ち上げます。
480px以下にウィンドウサイズをぐっと狭め、flexコンテナ（ここでは.img-flex-4）を検証ツールから選択し、flex-wrap:が適用されているかを調べます。
同様に、flexアイテム（img-flex-4 > img）を選択し、width: 49%が適用されているかを調べます。
これが想定と違えば、CSSの指定方法がどこかで間違っていることが分かります。
※検証ツールの使い方に関しては、文章よりも、図で説明されているサイトがあると思いますので、そちらの方がわかりやすいと思います。「検証ツール ＋ ブラウザ名」等で検索して調べてみてください。
個人的には検証に使うブラウザはChromeかFirefoxがお勧めです。
もしかしてですが、PC用と思われる方のCSSの閉じがおかしかったので、PCサイズのみにflex-wrap: wrapが適用されるようになっていないでしょうか（例えばPC用にメディアクエリを使っている場合等）
※いずれにしても、CSSの開始と閉じの対応を直した方が良いです。
※[class^="img-flex-"] { }部分のようなかぶった指定になる場合は、同じ指定を繰り返さないようにすることも検討してみてください。
!importantをしても適用されないとのことなので、あくまで推測ですが、スマホサイズにflex-wrap: wrapが効いていないっぽい感じはします。
CSSとHTMLをまるまるいただければズバリ原因を特定できるのですが、それが難しい場合は、様々な要因が考えられるため、明確にお答えするのが難しいです。ご自身で「検証ツール（デベロッパーツール）」にて、調査されるのも良いかもしれません。
検証ツールとは、要素に適用されているCSS等が分かる、開発に欠かせない便利ツールです。
ブラウザによって多少違いますが、該当箇所（想定サイズが適用されていない場所）をピンポイントでカーソルを合わせて右クリックし「検証」または「要素を検証」から、検証ツールを立ち上げます。
480px以下にウィンドウサイズをぐっと狭め、flexコンテナ（ここでは.img-flex-4）を検証ツールから選択し、flex-wrap:が適用されているかを調べます。
同様に、flexアイテム（img-flex-4 > img）を選択し、width: 49%が適用されているかを調べます。
これが想定と違えば、CSSの指定方法がどこかで間違っていることが分かります。
※検証ツールの使い方に関しては、文章よりも、図で説明されているサイトがあると思いますので、そちらの方がわかりやすいと思います。「検証ツール ＋ ブラウザ名」等で検索して調べてみてください。
個人的には検証に使うブラウザはChromeかFirefoxがお勧めです。
馬場誠 さん
04月07日 07時38分
馬場様
ご回答ありがとうございます。
おっしゃる通り、スマホサイズでwidth: 49%が適用されていいないようです。
PCの方のCSSの閉じ方がおかしいということで、こちらが原因のような気がします。
色々と検討してみます！
わざわざお時間をいただいて、ありがとうございました！
ご回答ありがとうございます。
おっしゃる通り、スマホサイズでwidth: 49%が適用されていいないようです。
PCの方のCSSの閉じ方がおかしいということで、こちらが原因のような気がします。
色々と検討してみます！
わざわざお時間をいただいて、ありがとうございました！
mimi さん
04月08日 10時20分
