質問: google mapのサイズのcssによる変更 現在webページをスクリーンサイズによってpcとスマホにcssを切り替えることによって 振り分けています、この場合google mapのサイズを切り替えたいのですがうまくいきません。 google mapは のように指定しています。 やってみたのはpc用cssをpc.css、スマホ用cssをsm.cssとすると と記述し、それぞれのcssでdisplay:none;したのですが無条件で2件目のmapが表示されないためうまくいきません、cssに関わらず二重設置になるからだと思います。 なにかいい方法はないでしょうか?
回答: まず、htmlが間違っています。 idは、ひとつの文書内に一つしかかけません。 「この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 ( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/struct/global.html#adef-id )」 ・また、htmlはデザインために書くものではありません > 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を書くのですか? でよいのでは? さらにいえば、スマホもパソコンもスクリーン端末(madia)です。普通にリキッドデザインで作成すればよいのでは?・・・・それとも今後さまざまな端末が登場するたびに、スタイルシートを作成する???