-
ID:xoMin0 さんの質問

【レスポンシブ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 件

ID:HJuYeQ さんの回答

もし1つのCSSファイルの中で画面幅によってわけるタイプだったら、

li{PCスタイル}
@media screen and (max-width: タブレットサイズ) {
li{タブレットスタイル}
}
@media screen and (max-width: スマホサイズ) {
li{スマホスタイル}
}

と書いてるんだと思うんだけど、
スマホのスタイル
 =(PC用スタイル+タブレットスタイル+スマホスタイル)
でclassを複数あてた時と一緒になるよ。

だから削除するんじゃなくてmargin:0;指定しないとマージン解除できないし、
いちいちfloat:none;とかしないとダメだよ。

ID:HJuYeQ

スマホのスタイル
 =(PC用スタイル+スマホスタイル) だった。

ID:xoMin0

CSS自体はPC用、タブレット用、モバイル用で分けていて、HTML上で
<!-- PC -->
<link rel="stylesheet" href="stylesheet.css" media="screen and (min-width: 1024px)">
<!-- Tablet -->
<link rel="stylesheet" href="stylesheet_tablet.css" media="screen and (max-width: 1024px)">
<!-- Mobile -->
<link rel="stylesheet" href="stylesheet_mobile.css" media="screen and (max-width: 768px)">
と書いています。

PC用のCSSを複製したので内部的にスタイルが残ってしまっているのか…
原因はわからないのですが、一旦PC用のCSSのスタイルを全て外して試してみます…。

ID:YUQEsm

768px以下の画面で、この書き方だと全部のCSSが適用されますよ。

ID:ncPF5a

上書きすれば問題ない

ID:YUQEsm

上書きでリセットとか無駄な事するぐらいなら素直にモバイルファーストにしたほうがいいよ。

ID:xoMin0

すでにPC用のものがある状況なので、モバイルファーストは今回は難しいです…。

ID:YUQEsm

PC用のCSSをモバイル用にリセットしていく手間よりも楽だと思うけどなぁ

ID:n2EYRN さんの回答

”li {margin: 10px 0;}”これを解除したいなら、
”li {margin: none;}”とか”li {margin: 0;}”にするのはどうですか?

ID:xoMin0

お返事が遅くなりましてすみません。

”li {margin: 10px 0;}”を解除したい、というよりは、PC用のCSSで設定したスタイルが全てモバイル用のスタイルにも適用されている、という状態を解除したいのです…。
”li {margin: 10px 0;}”以外にも、適用されてしまっているスタイルは何百個とあるもので…。

ID:BIIZMT

今の状態だと、PC版はどれにも適用される。
複数のCSSを読み込んでいるから、それを無効にするには、その設定を打ち消すCSSを書かないとだめだよ。

ユーザーエージェントで分岐して、読み込みCSSかえた方が簡単だと思うけど。

ID:xoMin0

PCとタブレットはそれぞれ想定通りのスタイルができているのですが、モバイルのものだけ、PCのスタイルを踏襲しています。
ブラウザのサイズ指定でCSSが切り替えられる、というやり方は様々なサイトで紹介されており、プログラム系の知識がまだ乏しい私にはHTMLとCSSだけでできるのでいいかなと思ったのですが…。
動的な処理はJavascriptが限界なので、勉強しないとですね…。

最終更新日:2014-06-13 (4,965 views)

関連するトピックス

ページ上部に戻る