【レスポンシブWebデザインについて】
HTMLは共通で、CSSでPC・タブレット・モバイル用のデザインをそれぞれ書いています。
CSSは元々PCのものがあったので、それを複製してそれぞれ書き直しているのですが、なぜかPCのCSSがタブレットとモバイルにも引き継がれて困っています。
具体的に言うと、PCでメニューリストに対し”li {margin: 10px 0;}”と記述していた箇所を、モバイル用のCSSでは”li {margin: 10px 0;}”の一文を丸っと削除。
にも関わらず、ブラウザで確認すると”li {margin: 10px 0;}”が適用されています。
ちなみに、PC・タブレット・モバイルでそれぞれ背景や文字サイズを変えてブラウザのサイズを変更すると、想定した通りにきちんと表示されます。
個別に設定したスタイルは適用されているのですが、それにプラスして削除したはずのPC用のスタイルがなぜか暗黙的に入り込んでいるという現象です。
レスポンシブ制作をするのは初めてで、勝手がわからないのですが、これはこういうものなのでしょうか。
解決方法をご存知でしたら教えていただきたいです…。
みんなの回答 2 件
もし1つのCSSファイルの中で画面幅によってわけるタイプだったら、
li{PCスタイル}
@media screen and (max-width: タブレットサイズ) {
li{タブレットスタイル}
}
@media screen and (max-width: スマホサイズ) {
li{スマホスタイル}
}
と書いてるんだと思うんだけど、
スマホのスタイル
=(PC用スタイル+タブレットスタイル+スマホスタイル)
でclassを複数あてた時と一緒になるよ。
だから削除するんじゃなくてmargin:0;指定しないとマージン解除できないし、
いちいちfloat:none;とかしないとダメだよ。
”li {margin: 10px 0;}”これを解除したいなら、
”li {margin: none;}”とか”li {margin: 0;}”にするのはどうですか?
関連するトピックス