• 締切済み

フレームと横スクロールを使ったサイト

こんにちは。質問お願いします。 今、http://youmos.com/reference/smooth_scroll.htmlのサイト様のような スクロールを使ったサイトを作りたいと思っています。 内容は、上下に分かれたフレームで 上はメニュー、下はコンテンツ、 メニューのボタンを押すと、下のコンテンツが横スクロールして 表示されるというものです。 検索したのですが、いまいちわかりませんでした。 HPについて詳しい方!回答をお待ちしております><

みんなの回答

  • N_A_O
  • ベストアンサー率66% (37/56)
回答No.2

http://www.soup-web.net/ こんな感じでよければ、下記参照。 <frameset rows="200,*" > <frame src="menu.html" name="menu"> <frame src="content.html" name="content"> </frameset> menu.html <body bgcolor="#ffff00">  <a href="#1" onClick="parent.content.scrollPageTo(0,0)">left</a>   <a href="#1" onClick="parent.content.scrollPageTo(1600,0)">menu1</a>  <a href="#2" onClick="parent.content.scrollPageTo(2600,0)">menu2</a> content.html <script> var isIE = 0; if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1;} function scrollPageMath(start_x,end_x,start_y,end_y){ var distance_x; var distance_y; var move_x; var move_y; var set_x; var set_y; distance_x = (end_x - start_x)/20; // 動かすx幅の比率 if(distance_x > 0)set_x = Math.ceil(distance_x); else set_x = Math.floor(distance_x) ; distance_y = (end_y - start_y)/20 ; // 動かすy幅の比率 if(distance_y > 0)set_y = Math.ceil(distance_y); else set_y = Math.floor(distance_y); move_x = start_x + set_x; move_y = start_y + set_y; if (set_x > 0 && move_x <= end_x || set_y > 0 && move_y <= end_y || set_x < 0 && move_x >= end_x || set_y < 0 && move_y >= end_y){ scroll(move_x,move_y) start_x += set_x; start_y += set_y; setTimeout("scrollPageMath("+start_x+","+end_x+","+start_y+","+end_y+")",1); } else return true; } function scrollPageOffset(go){ if (go=="go_x")return (document.getElementById) ? document.body.scrollLeft:pageXOffset; if (go=="go_y")return (document.getElementById) ? document.body.scrollTop:pageYOffset; } function scrollPageTo(end_x,end_y){ var start_x = scrollPageOffset("go_x"); var start_y = scrollPageOffset("go_y"); scrollPageMath(start_x,end_x,start_y,end_y); } </script> <body bgcolor="#ff00ff"> <div id="top" style="position:absolute;top:10; left:100px;">left</div> <div id="menu1" style="position:absolute;top:10; left:1700px;">menu1</div> <div id="menu2" style="position:absolute;top:10; left:2700px;">menu2</div> <div id="end" style="position:absolute;top:10; left:4000px;">end</div>

  • usagikun2
  • ベストアンサー率28% (52/182)
回答No.1

やはり回答が付かないようですね! 問題点があります。 1.ホームページを何で作ろうとしてるのでしょうか?  ホームページビルダーで作るのであれは、フレーム雛形から制作出来ますが、ただし、最近はフレームページは利用する側にとっても管理する側にとっても不都合な面が有るのであまり人気が無いように思います。 2.横スクロール  上記サイトは上下スクロールですが、横スクロールにしたいのですね? 一般的に横スクロールをされてるサイトが少ないので、利用者側から言わせると、不慣れで使いずらいサイトになります。 3.上記サイトは、ジャバスクリプトを使用したスクロールですが、ジャバにもバージョンがあり利用者が古いバージョンだと動かなかったり、又は、ジャバ無効にしてる方も居られるので、広く一般の方にご利用されないサイトになる可能性が出て来ます、又は、そうした、無効にされている方向けの対策が必要になります。

関連するQ&A

  • 横にスムーズスクロールしたい

    以前似た質問をしたのですが少し進展があったのでもう一度質問させて下さい。 私はjavascriptにはほとんど詳しくないものです。 複数のリンクを横に並べ、「次へ」のボタンをクリックすると横にスムーズにスクロールするjavascriptを組みたいと思っています。 今考えているのは http://youmos.com/reference/smooth_scroll.html こちらのサイト様の横バージョンを作りたいと思っています。 色々と試行錯誤してみましたが横にスクロールすることがうまくできなかったためどなたかご教授願えないでしょうか… 宜しくお願い致します。

  • フレームのスクロールを出さない方法(ドリウィ&Flash)

    こんにちは。初めてちゃんとしたHPをドリームウィーバーで 作っているところなんですが、フレームを3つにわけて、 一番上のフレームにflashで作ったメニューボタンを入れて、 コンテンツが真ん中のフレームに来るように設定して作っています。 ボタンの機能など、アクションはきちんとできているのですが、 一番上のフレームにflashのメニューボタンを当て込んだら フレームサイズと高さは変わらないのに、 スクロールバー&空欄ができてしまうんです。 フレームの行を1相対にすると 上下にすごい空欄が出てきてしまうんです。 逆に真ん中のフレームは下に空きができてしまいます。 一番上のフレームの高さ(行)を45pix、 真ん中のフレームの高さ(行)を316pixに設定してます。 当て込んでいるflashは メニューボタンは42pix、コンテンツは316pixの高さです。 どうしたらいいのでしょうか? 環境はMac OS9、Dreamweaver4、Flash5です。 よろしくお願いします。

  • フレームとスクロール

    frameset により、フレームを左右に分割し、左にメニュー、右にコンテンツを表示しました。 メニューフレームに <a href="・・・・.html#a" target="content">A として、コンテンツフレームに <a name="a"> を設定すると、メニューフレームの「A」をクリックすると、コンテンツのフレームは 「A」のところまでスクロールします。 これを、少し変化させて、 「A」をクリックすると、右スクロールバーを一回クリックしたのと同様に、下に隠れていた 続きの部分が上に移動して表示されるようにしたいのですが、・・・。 HTLMで、こういった処理が可能でしょうか。可能でしたら、教えていただきたいのですが。 不可能でしたら、あきらめます。よろしくお願いします。

    • ベストアンサー
    • HTML
  • フレームのサイズ固定とスクロールバー

    初心者ですが、宜しくお願いいたします。 現在「上部にタイトル」「下左にメニュー」「下右に本文」のフレームで3分割されたhpを作成途中です。 1.表示サイズを狭くした場合、下右の本文が左によって来て左下のメニューの幅が狭くなってしまいます。左下のメニューの横サイズを固定したいのですがどうすれば宜しいのでしょうか? 2.また、表示サイズを小さくして上部タイトルの幅よりも狭くなった時にタイトルの下ではなく、画面全体の一番下にスクロールバーを出したいのですが出来ますでしょうか? 3.同じ事が縦でもあり、上下の表示を狭くした場合下左のメニューの下が隠れたときに、画面全体の右側(下右の本文の更に右)にスクロールバーを表示したいのですがいかがなものでしょう? デザイン的にフレームとフレームの間にスクロールバーは避けたいのです。 何卒、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • フレームのスクロール

    ご質問させていただきます。 1つのページを上下2つのフレームに分けます。 そして、下のフレームのページを左右にスクロールさせると、 同じように上のページが自動的に左右にスクロールする。 といったことは可能でしょうか? 上のフレームに表のタイトル 下のフレームに表のデータ を表示させようと考えています。 アドバイスよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 横へスクロール

    あるボタン(例えばnext)を押すと、画面が横へゆっくりスクロールするようなものを作りたいのです。 どこかにそれが書かれているサイトはないかと探したのですが、どうやって検索していいのかもわかりません。。 どうぞよろしくお願いします。

  • 複数の画像を横にスクロールさせるボタンについて

    複数の画像を横にスクロールさせるボタンについて こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるボタンはどのようにすればできますか。Javascriptは扱ったことがないのでわかりやすく教えていただければ助かります。よろしくお願いいたします。

  • 複数の画像を横にスクロールさせる方法について

    複数の画像を横にスクロールさせる方法について こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるのはどのようにすればいいのでしょうか。できれば、CSSとhtmlのタグを教えていただければうれしく思います。 また、横についているボタンだけにするとか、下のスクロール部分だけにするとかも教えて下さい。 よろしくお願いいたします。

  • フレームなどで、スクロールの表示を消すにはどうしたらいい?

     すいません、教えてください。 フレーム機能を使っていると思うんですが、 画面からはみ出し多分は普通なら、 ▲ ▼ みたいなボタンが現れて、それをドラッグして 見えない部分を見ようとしますよね?▲と▼の 部分には長方形の物体が存在します。なんのことか わからないかもしれませんが、多分今見てるこのサイトでも 右横と一番下に現れてると思います。  普通なら、画面からはみ出た部分は上に書いたような スクロールさせるための機能が自然に現れると思うんですが、 多分、フレーム機能を使った場合、そういうスクロールのための 表示がまったくされなくて、画面からはみ出た部分を見るには マウスの右クリックと左クリックの真中についてる、クルクル 回すやつで移動させないとだめな機能はどうやったらできるのでしょうか?  フレームで枠表示をさせないようもしたんですが、できませんでした。  勿論、フレームを使っていない普通のHPの場合は画面に収まり 切れない部分がある場合、普通に画面右と下にスクロールするための 機能が出ることを言っているのではないです。  あと、こういう機能を使うのはHP閲覧者にとって どういう印象があるのでしょうか?見づらいでしょうか・・・? 

  • 横スクロールバーについて。

    http://www.d3.dion.ne.jp/~tiyoko01/fure-mu/sample/top1.html 上記のようなHPを作ってるのですが、 画面左(ピンク色)の方の横(下)スクロールバーが出ません。 これだと画面縮小した時に右側が消えてしまって困るのですが、どうやったら出せますか? scroll="auto"にしても出来ませんでした(>_<) CSSを加えないといけないんでしょうか? できたらソースも書いていただけると助かります!

専門家に質問してみよう