- ベストアンサー
画像表示の方法（html・css）を教えてください
HTMLで小さい地図（携帯閲覧用）をホームページに載せて、 その地図を隠すように、 cssで大きい地図（PC閲覧用）を表示させることは可能でしょうか。 できるのであればタグを教えてください。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
携帯で見たときにどのように表示されるかは、キャリア（携帯の種類）によって異なると思いますよ。 画像を重ねたいのであれば、＃2さんの方法や、質問者さんが言うように、一枚を背景としてその上に画像を置くという方法が妥当かと思います。 ちなみにソースを拝見しましたが＃２さんの方法が上手くいかないのはCSSでid設定がされていないからではないでしょうか。 補足として付け加えておきますが、"position"で要素を重ねる場合は"z-index:0;"などを使用して「重ね順」を指定すると上手くいきますよ。
その他の回答 (2)
- Java-Java
- ベストアンサー率41% (14/34)
div#map { position: relative; height:400px; } div#map p { position: absolute; top: 0; left: 0; } <div id="map"> <p><img src="small.gif" alt="小さい地図" width="200" height="200" /></p> <p><img src="large.gif" alt="大きい地図" width="400" height="400" /></p> </div> これで、小さい地図の上に大きい地図を表示することができます。
補足
うまいこと表示されません。 http://nagaishorinji.hp.infoseek.co.jp/access.html 携帯で見たときに、小さい地図のみを表示させるには、 cssファイルにbackground url(大きい地図) としたらよろしいのでしょうか。
HTMLがどのようになっているのかわからないので、まずソースを教えてください。 それと、単純に隠すと言ってもページデザインによってできることとできないことがあります。
補足
以下、ソースです。 <map></map> のところに、携帯かPCかで画像（アクセスマップ）を変えて表示させるようにしたいのです。 よろしくお願いします。 http://nagaishorinji.hp.infoseek.co.jp/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta name="keywords" content="少林寺拳法,格闘技,護身術,道場,支部,大阪,長居,大阪市長居障害者スポーツセンター,運動,スポーツ,趣味"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>少林寺拳法 大阪市長居障害者スポーツセンター > ホーム</title> </head> <body id="bodyid"> <a name="TopofPage"></a> <div id="image"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="what.html">少林寺拳法とは</a></li> <li><a href="entry.html">入部について</a></li> <li><a href="schedule.html">練習日時及び場所</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="info.html">お問い合わせ</a></li> <li><a href="http://www.shorinjikempo.or.jp/">■公式サイト■</a></li> </ul> </div> <div id="page"> <h1>少林寺拳法</h1> <h2>大阪市長居障害者スポーツセンター</h2> <h3>【アクセス】</h3> <div class="txt"> <p> 大阪市長居障害者スポーツセンターへのアクセスは以下の通りです<BR> <BR> <strong>交通機関</strong><BR> ■地下鉄御堂筋線「長居」駅1号出入口から北へ徒歩4分（約150ｍ）<BR> ■市バス「地下鉄長居」から北へ徒歩6分（約300ｍ）<BR> ■JR阪和線「長居」駅から東へ徒歩5分（約200ｍ）<BR> </p> <map></map><br><br><br> <div id="pagetop"><a href="#TopofPage">↑このページのトップへ</a></div> </div> <div id="copy">Copyright (C) 2008 nagai-shorinjikempo. All rights reserved.</div> </div> </body> </html>
お礼
回答ありがとうございます。勉強になりました。 別のホームページで重ね順指定を使わせていただきました。 ＞携帯で見たときにどのように表示されるかは、キャリア（携帯の種類）によって異なると思いますよ。 なるほど。 私の携帯ではCSSが消えるので、携帯用の小さい地図を作って、その上にCSSでホムペ用の大きい地図をかぶせてみます。