みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

google mapのサイズのcssによる変更

現在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に関わらず二重設置になるからだと思います。

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

投稿日時 - 2012-08-15 09:20:01

QNo.7644649

すぐに回答ほしいです

質問者が選んだベストアンサー

まず、HTMLが間違っています。
idは、ひとつの文書内に一つしかかけません。
「この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id )」

・また、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/visuren.html#propdef-display )]より

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

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

投稿日時 - 2012-08-15 21:53:51

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問