- ベストアンサー
画像表示の方法（html・css）を教えてください
HTMLで小さい地図（携帯閲覧用）をホームページに載せて、 その地図を隠すように、 cssで大きい地図（PC閲覧用）を表示させることは可能でしょうか。 できるのであればタグを教えてください。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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>
関連するQ&A
- CSSを用いた背景画像の表示方法
お世話になります。 ホームページ作成の初心者です。 H1タグ（大見出し）の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、CSSにて背景画像で表示したいと考えております。 本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。 ですが、添付画像ファイル（中に、”猫集まれ”と記載したいです）を、HTMLソース内部に、直接書き込みたいと思っております。 どのようにすればよろしいでしょうか？ 因に、以下の情報を載せさせていただきます。 <h1>猫集まれ！</h1> url("img/flower10.gif") background-repeat: no-repeat; padding-left: 30px; line-height: 120%; ご教示の程、よろしくお願い申し上げます。
- ベストアンサー
- CSS
- cssでリンク先のurlを表示させない方法
cssで、 左下に出るリンク先のurlを表示させない方法を教えてください。 HTMLであれば <BODY>タグを書き換えればいいのはわかるのですが、 cssはよくわからず…。 よろしくお願いします。
- ベストアンサー
- HTML
- 外部CSSで背景画像を表示させる方法
外部CSSについての質問です。 ホームページを作成するにあたり、外部CSSを使用しているのですが、背景画像が表示されません。 普通の（固定なし）背景画像はきちんと表示されるのですが、「背景画像を固定する」タグだと表示されません。 ソースは間違っていないし、何度やっても表示されず、こちらで質問することにしました。 固定方法は、パーセントで指定する方法です。 どなたかご指導頂けないでしょうか？ よろしくお願い致します。
- ベストアンサー
- CSS
- ＣＳＳのタグ「#warpper」の意味は、使い方は？
ＨＴＭＬ、ＣＳＳの勉強中です。基本的なタグを使って簡単なホームページを作成しようと取り組んでいます。そのため参考に公開されているホームページのソースを開いて見ていたら「#wrapper」が使われていました。しかし参考書で調べても当タグの記載を見つけることが出来ません。当タグの意味と使い方は何でしょうか、教えてください。
- ベストアンサー
- レンタルサーバ・ASP
- googlemapのマイマップをホームページに表示する方法
googlemapのマイマップをホームページに表示する方法 googlemapのマイマップで作った地図を自分のホームページに表示したいのですがやりかたがわかりません。 「リンク→HTML を貼り付けてサイトに地図を埋め込みます」で制作されたタグを使うとマイマップを表示することができるのですが最初から吹き出しが開いた状態で表示されてしまいます。 吹き出しを閉じた状態で日本全体を表示するようにしたいのですが…いまいちよくわかりませんorz APIkeyを取得するところまではなんとかできたのですが… よろしくお願いします。
- ベストアンサー
- HTML
- css 画像を表示・設定
cssでimgタグを使って画像を表示させたいのですが、 css内でsrcは使えないのでしょうか？ img{ background-image:url( http://orange.jpg ) } このような書き方しかできないのでしょうか？ 上記の書き方だと、画像の周りに線ができて、更にhtmlソース内のaltの文字まで表示されてしまいます。
- ベストアンサー
- HTML
- オススメのＣＳＳ辞典、教えてくださいｍ（＿＿）ｍ
このたび自分でＨＰをつくろうと思い「ＨＴＭＬタグ辞典」なるものを買ってきました。 そこで気付いた問題・・。 今の時代（？）「ＨＴＭＬ」だけじゃ、駄目なんだ・・・と。 ＨＴＭＬとＣＳＳを併せてやらなきゃ、いけない、ということを知りました。 けれど、ＣＳＳのこと、あんましよくわかっていません（ネットのホームページ作成講座なるものをいくつか読んで大体の概要はわかったのですが、、）。 そこで質問です。 ＣＳＳの本を買うにあたって、気をつけること、 またどんな本（？）が初心者にはわかりやすいか、 その他、アドバイス等含めて、教えてくださいｍ（＿＿）ｍ
- ベストアンサー
- XML
- 画面サイズにあわせて自動で画像表示サイズがかわる
HTMLタグか、Javaかわかりませんが・・・。 閲覧者の画面サイズにあわせて、画像表示サイズが自動で変わる方法を教えてください。 実際に画像表示が自動で変わっているＵＲＬを見ると、最後の拡張子はhtmlではなく、gifでした。 ちなみに、携帯ではなくＰＣ上での表示方法をお願いします。
- ベストアンサー
- HTML
- HTML、CSSについて
アメーバブログをやっています。 ＣＳＳの使用の仕方を覚えたくて、 いろいろやり方を調べてるんですけど、 教えてgooで検索すると、 「まずHTMLタグから覚えるとよいでしょう。」 と、回答者さんがよく答えています。 CSS＝ブログのデザインなどを細かいところまで自己流に改造する。 だと思うんですけど、 HTML＝？？？？？ HTML、HTMLタグとはなんなんですか？？ そして、読みかたは？？ 「エイチティーエムエル」ですか？ HTMLとは何をするもので、 どういうものですか？？ HTMLの例か、 HTMLの仕方（？） が詳しく載っているサイトを教えてください。 あと、CSSは 変えたいところ 英語でヘッダーと書いてあるところのあとに、 画像のURLを入力するだけでいいんですか？？ 詳しく教えて下さい。 お願いします
- ベストアンサー
- ブログ
- cssに関する質問です。
cssに関する質問です。 フッターをbodyタグの直後に置きたいのです。 そうするとフッターはbodyタグの直後に表示されてしまいます。 cssでフッターだけをホームページの最後に表示する方法はありますか。 <body> <div id="footer">フッター ホームページの一番下に表示したい。</div> <div id="content>ホームページの内容 フッターよりも上に表示したい。</div> </body> ＣＳＳハックのような方法でも構いませんが、実現方法があれば教えてください。 よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
お礼
回答ありがとうございます。勉強になりました。 別のホームページで重ね順指定を使わせていただきました。 ＞携帯で見たときにどのように表示されるかは、キャリア（携帯の種類）によって異なると思いますよ。 なるほど。 私の携帯ではCSSが消えるので、携帯用の小さい地図を作って、その上にCSSでホムペ用の大きい地図をかぶせてみます。