人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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

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


●質問者: hiyarihatto
●カテゴリ:インターネット ウェブ制作
✍キーワード:Web はてなマップ インラインフレーム サイト スクロール
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● thunder9119
●30ポイント

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

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

overflow-y: scroll

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


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

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

menuの方のリンクに、

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

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

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

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

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

◎質問者からの返答

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

overflow-y: scrollは、

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

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

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

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

>>てるみたいですね。

thunder9119 さんは、

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

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


2 ● yotaro
●5ポイント

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/

◎質問者からの返答

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

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

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

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


3 ● wellmin
●20ポイント

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

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

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

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

◎質問者からの返答

こちらのサイト、

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

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

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


4 ● kazu1107
●35ポイント ベストアンサー

回答1の補足です。

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

overflow:auto;

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

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

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

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

◎質問者からの返答

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

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

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

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

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

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

助かりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ