OCN光で最大124,800円おトク!

現在webページをスクリーンサイズによってPCとスマホにCSSを切り替えることによって
振り分けています、この場合google mapのサイズを切り替えたいのですがうまくいきません。

google mapは
<div id="map" style="width:606px; height:420px;">
のように指定しています。

やってみたのはPC用CSSをpc.css、スマホ用CSSをsm.cssとすると
<div id="pcmap">
<div id="map" style="width:606px; height:420px;">
</div>
<div id="smmap">
<div id="map" style="width:406px; height:420px;">
</div>
と記述し、それぞれのCSSでdisplay:none;したのですが無条件で2件目のmapが表示されないためうまくいきません、CSSに関わらず二重設置になるからだと思います。

なにかいい方法はないでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (1件)

まず、HTMLが間違っています。


idは、ひとつの文書内に一つしかかけません。
「この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

・また、HTMLはデザインために書くものではありません

><div id="map" style="width:606px; height:420px;">
 HTMLのstyle属性での指定は、詳細度が a=1 ですので、外部スタイルシートやHTML内のスタイルシートでは上書きできません。
【引用】____________ここから
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Assigning property values, Cascading, and Inheritance( http://www.w3.org/TR/CSS2/cascade.html#specificity )]より

 もう一点、DOMは理解されていますか
       id
div   pcmap
 + div  map
 + div  smmap
  + div map
 firefoxをお使いなら、ツールにDOM inspector がありますので確認してください。たぶん想定されているものと異なるのではないですか?

 また、display:noneを指定すると、その子孫要素で他のnone以外を指定しても無効です。
【引用】____________ここから
none
 要素には、整形構造にまったくボックスを生成させない(すなわちレイアウトに影響しない)。 子孫要素にも同様にボックスを生成させない。 この効果は、子孫要素の'display'に別の値を設定しても無効化できない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より

 なぜ、スタイルシートを切り替えているのに、複雑怪奇なHTMLを書くのですか?
<div id="map"></div>
 でよいのでは?

 さらにいえば、スマホもパソコンもスクリーン端末(madia)です。普通にリキッドデザインで作成すればよいのでは?・・・・それとも今後さまざまな端末が登場するたびに、スタイルシートを作成する???
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング