- ベストアンサー
レスポンシブデザインにする方法、参考サイト
- レスポンシブデザインにする方法や参考サイトをまとめてください。
- 現在作成しているサイトをレスポンシブにするために、いくつかのサイトを調べていますが、まだ良い情報が見つかっていません。
- レスポンシブデザインについて基本的な部分でつまずいています。htmlの<head>部分でのリンクの貼り方に問題があります。どこが間違っているのでしょうか？参考になるサイトも教えていただけるとありがたいです。
- hpineh0913
- お礼率55% (39/70)
- CSS
- 回答数2
- ありがとう数14
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
問題はCSSの切り分け方と順番ですね。 まずCSSのルールですが、基本的に後に書いたスタイルが優先されます。 それは良いですよね？ で、ご質問者様のheadでのmedia指定ですが、 min-width:1024px→min-width:768px→min-width:480pxと指定します。 この場合注意しないといけないのは、すべてmin-widthによる指定なので、結局min-width:480pxでのCSSに指定したものは、480px以上の場合必ず適用されると言うことです。 考えてみれば当然です。 min-width:480pxって指定しているんですから、横幅が1024以上のPC画面でも、もちろん横幅480px以上あるわけですから、適用されるに決まってます。 そして、先ほど書いた、CSSは後の方が優先されるルールです。 この場合、smart.cssが後に読み込まれるので、layout.cssよりsmart.cssが優先されるのは当然です。 なので、この場合、 min-width:1024px→min-width:768px→min-width:480pxではなく min-width:480px→min-width:768px→min-width:1024pxという順番で指定した方が良いと言うことです。 PCから記述したい場合は、 layout.css→media制限なし tabletcss→max-widht:1023px smart.css→max-widht:767px という感じで指定します。 ご参考まで。
その他の回答 (1)
- muuming2001
- ベストアンサー率23% (202/847)
layout.css にも @media screen and (min-width:480px) { と記述するとうまくいかないということですか？
お礼
そうだったのですが、結局layout.css一つに@media screen and (max-width: 1000px) {}のように全てのブレイクポイントを記述して自己解決致しました。 回答いただきありがとうございました。
お礼
結局layout.css一つに@media screen and (max-width: 1000px) {}のように下に行くにつれ小さいブレイクポイントを指定して自己解決致しました。 しかしやり方は色々あると思いますので、次回スタイルシートを分ける時は回答者様の回答を参考にさせていただきたいと思います。 回答いただきありがとうございました。