1つのwebページで、スクロールする部分としない部分のあるページの作り方(インラインフレーム使わない)を、知っている方がいましたら、教えてください。


今GoogleMapを使って、
左に地図があり、右にスクロールするリストがあるページを制作したいと思っています。

はてなマップの↓
http://map.hatena.ne.jp/t/Football#

ちず窓の↓
http://chizumado.jp/

上のサイトと同じことをしたいです。

インラインフレームを使わないで、スクロールする部分としない部分をする方法を知っている方、

または、はてなマップやちず窓みたいな
左に地図右にリストでリストを選ぶと地図に反映
といったページの作り方
(インラインフレームを使っていても可)
を、どちらか知っている方がいましたら、
教えてください。

お願いしますm(_ _)m

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2006/05/24 19:17:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:kazu1107 No.4

回答回数199ベストアンサー獲得回数14

ポイント35pt

回答1の補足です。

overflow-xやoverflow-yについてはieのみがサポートとなっていますが、overflowについてはIE,ネスケ,Opera(とほほには書いてないがFirefoxも)対応しているはずです。

overflow:auto;

とすることで、はみ出す部分があればスクロールバーが出現します。

div要素などをいれて幅を100%以上に指定したり、大きい画像をいれたりすると横スクロールバーが出る可能性もありますが、通常のテキストだけならまず問題ないと思います。

とほほのスタイルシート入門:overflowの解説

http://www.tohoho-web.com/css/reference.htm#overflow

id:hiyarihatto

こちらを見て、解決しました。

ありがとうございますm(_ _)m

over-flowはブラウザ依存しないみたいですね‥

自分で調べてoverflow-yというキーワードが出てきて、

でも実行したらfirefoxで正しく動作しなかったため、深く調べないであきらめてしまいました。

もっとよく調べないといけませんね。

助かりました。

2006/05/24 19:14:27

その他の回答3件)

id:thunder9119 No.1

回答回数24ベストアンサー獲得回数0

ポイント30pt

テーブルにスクロールバーをつけてやるのはどうでしょう?

スタイルシートに↓こう記述すればOKです。

overflow-y: scroll

溢れた分はスクロールする、という意味です。


2つ目の質問については、インラインフレームを使って

地図ページの名前を tizu 、 メニューを menu と名づけたとして

menuの方のリンクに、

<a href="http://..." target="tizu">としてやればOKです。

地図に、ポップアップを表示するとか位置移動するとかのやり方を

質問されているのであれば的外れな回答ですいません。

ちず窓については、javascriptで右で指定した座標を

左の地図で真ん中に持ってくるような処理をしてるみたいですね。

id:hiyarihatto

レスありがとうございます。

overflow-y: scrollは、

IE独自の仕様でブラウザ依存しますよね。

ブラウザ依存しないで、スクロールさせる方法はないでしょうか?

ちず窓については、javascriptで右で指定した座標を

>>左の地図で真ん中に持ってくるような処理をし

>>てるみたいですね。

thunder9119 さんは、

ちず窓やはてなマップはインラインフレームを使っていると思いますか?

よかったら見解を教えてください。

2006/05/24 01:37:57
id:yotaro No.2

回答回数430ベストアンサー獲得回数32

ポイント5pt

GoogleMapAPIを使います。

下記のサイトなどで設置方法が説明されています。

http://hsj.jp/gme/

http://koma2deniro.jugem.jp/

http://www.ryo.com/ryo/2005/11/28/147/

 

以下で自分のkeyを取得する必要があります。

http://www.google.co.jp/apis/maps/

id:hiyarihatto

レスありがとうございます。

GoogleMapは現在使っていますので、

質問のような動作をさせる方法が知りたいです。

(スクロールさせる方法)

2006/05/24 01:30:47
id:wellmin No.3

回答回数93ベストアンサー獲得回数0

ポイント20pt

http://beginners.atompro.net/agss/006-010.html

上のURLの10番のテンプレートで、インラインフレームを使わないで、スクロールする部分を使ってあります。

スタイルシートで行っているようです。

スタイルシートはあまり詳しくないので、すみませんが解説はなしです。

id:hiyarihatto

こちらのサイト、

今回の質問だけではなく、

今後にすごい参考になりそうです☆

ありがとうございました。

2006/05/24 19:15:24
id:kazu1107 No.4

回答回数199ベストアンサー獲得回数14ここでベストアンサー

ポイント35pt

回答1の補足です。

overflow-xやoverflow-yについてはieのみがサポートとなっていますが、overflowについてはIE,ネスケ,Opera(とほほには書いてないがFirefoxも)対応しているはずです。

overflow:auto;

とすることで、はみ出す部分があればスクロールバーが出現します。

div要素などをいれて幅を100%以上に指定したり、大きい画像をいれたりすると横スクロールバーが出る可能性もありますが、通常のテキストだけならまず問題ないと思います。

とほほのスタイルシート入門:overflowの解説

http://www.tohoho-web.com/css/reference.htm#overflow

id:hiyarihatto

こちらを見て、解決しました。

ありがとうございますm(_ _)m

over-flowはブラウザ依存しないみたいですね‥

自分で調べてoverflow-yというキーワードが出てきて、

でも実行したらfirefoxで正しく動作しなかったため、深く調べないであきらめてしまいました。

もっとよく調べないといけませんね。

助かりました。

2006/05/24 19:14:27
  • id:yotaro
    ちょっと回答が言葉足らずだったようですが、GoogleMapAPIを自サイトに埋め込めばスクロールする地図が作れますよという趣旨でした。
    overflowやインラインフレームでは、はみ出した部分(窓に表示されていない部分)地図画像を作成しなければならないので、GoogleMapApiの地図データを呼び出して使った方が早いかなと思ったのですが。
    (作成例)某ファミレスマップ
    http://3baka.biz/map/joyfullmap.html
  • id:hiyarihatto
    こちらこそ、説明不足ですみません。
    GoogleMapAPIを自サイトに埋め込んで、
    地図を現在作っています。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません