ページの横移動

前へ 次へ
このQ&Aのポイント
  • ページの横移動について制作方法を教えてください。
  • 左側にナビゲーション、右側にコンテンツを配置したサイトで、右側のコンテンツ部分のみ横移動して表示させたいです。
  • また、一定の時間で表示切替ができる方法も教えてください。
回答を見る
  • ベストアンサー

ページの横移動

左側にナビゲーション(200px)、右側にコンテンツ（600px×600px）を配置した、左右の縦に分かれたサイトを制作しています。 左のナビゲーションボタンをクリックすると右側のコンテンツ部分の 表示内容が変わるようにしたいのですが、これをページ移動するのではなく 右側のコンテンツ部分のみ横移動（するするとスクロールさせたいです）して表示させたいのです。 つまり、右コンテンツ部分のデフォルト表示サイズ（600px×600px）と同じ大きさのコンテンツが右側（非表示、下部スクロール表示無し）から現れるようにしたいのです。 また、同時にこの右側コンテンツ部分の表示切替を～秒とかある一定の時間で切り替わるようにしたいです。 FLASHを使用せずに制作したいのですが、これは可能でしょうか？？ みなさまのお知恵を拝借させていただきたく、ご質問させていただきました。 よろしくお願いいたします！

  • AJAX
  • 回答数1
  • ありがとう数8

質問者が選んだベストアンサー

  • ベストアンサー
  • inoue_kou
  • ベストアンサー率57% (27/47)
回答No.1

jQueryのプラグインですが「jQuery pageSlide」と言うのがありますが、 これではだめでしょうか？ http://srobbin.com/blog/jquery-pageslide/ 表示中のページが丸ごと左にスライドして、右から隠れていたコンテンツがスライドして現れます。

dcfc_08
質問者

補足

inoue_kouさま 早速のお返事ありがとうございます！ また、ご返信が遅くなり大変申し訳ありません！ お教えいただいたプラグインとてもかっこ良く参考になりました。 私の無知故の説明不足だったのですが こうしたいという参考サイトが下記URLです。 http://www.ks-architects.com/ja/works/ このWORKSはページ下部のスクロール及び矢印がページ移動の方法かと 思うのですが、これを左側に置いたナビゲーションのボタンによって操作したいのです。 また、同様に一定時間で勝手にページが横移動して、 ギャラリー的に動いているように見せたいのです。 可能でしょうか。。。 勝手な質問で大変申し訳ありません。 よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • CSSでの擬似インラインフレーム

    CSSでの擬似インラインフレームでのサイトを作成しています。 ページ全体枠を900px×650pxで左右上下の中央表示にし、 左側にナビゲーション、右側にコンテンツを配置しています。 右側のコンテンツ部分は400px×500pxのみ表示して 残りの部分はoverflow:hiddenを指定して表示しないようにしました。 左側のナビゲーションは位置を固定にし、ボタンをクリックすると 右側のコンテンツ枠に各項目の内容が入れ替わり表示するように しました。 次に、クリックした際に右側のコンテンツ部分の表示移動が パッと入れ替わるのではなく、スルスルと画面が推移するなめらかスクロールで場面が移動しているように見せたいのですが スクロールのjavascriptはこちらのサイト（http://lab.centralscrutinizer.it/the-tiny-scrollings/）でダウンロードさせていただいたファイルを設置したのですがパッと画面表示が変わるのみでスルスルっと動いてくれません。。。 私はjavascriptの記述知識がないためどうすればよいのかわからず ご質問させていただきました。 どうすれば良いのでしょうか。 どなたかお助けくださいませ。 よろしくお願いします！

    • ベストアンサー
    • HTML
  • CSSでページ下部ソースを上に表示するには？

    タイトルがわかりづらくて申し訳ございません・・・。 やりたいことを要約しますと、CSSをつかい ページの上部によく配置しているナビゲーションメニューを ページ上では上に表示したいのですが、 ソース上、すべてのページが共通ですので SEOを考えて、ソースの下に配置したいのですがどうすればいいかわかりません・・・ 現在、サイドバーはfloatをつかい、ソース内では、コンテンツの下にきております。 現在の構成と、希望の構成を書きますので、ご教授いただけると助かります！ ■現在の構成 （ヘッダー） （ナビゲーションメニュー） （コンテンツ）※ブラウザでは右側 （サイドバー）※ブラウザでは左側に表示 （フッター） ■希望の構成 （ヘッダー） （コンテンツ） （サイドバー） （ナビゲーションメニュー） （フッター） ブラウザ上の表示は、同じにしたいです。

    • ベストアンサー
    • CSS
  • 3段組みを中央に配置したい

    3段組の配置で行き詰っております。 お解かりの方がいらっしゃいましたら、お手数でもご回答をお願い申し上げます。 XHTMLで3段組のHPを作成したいのですが、どうしても、リキッド表示になり困っております。 目標は、750pxで中央に配置したいのです。 3段組みの構成は、 左側に「navigation」 真ん中に「photo」 右側に「contents」 「photo」と「contents」をcontainerとしてfloat: right;を使用しておりますが、うまくいきません。 containerが画面のサイズに合わせて右端を基点に動きます。 YAHOOのサイトのように常に中央に配置したいのですが、どうしたら良いでしょうか。 ちなみに、ヘッダーとフッターについては body { text-align:center; } で中央に配置されております。 重ねてお願い申し上げます。

  • フレームを使わないページの移動方法

    http://park16.wakwak.com/~html-css/tag_dictionary/dic_page.html 上記のサイトのように、左側にある「ページ」「テキスト」「スクロール」というリンクをクリックすると右側に各ページが表示されます。しかし「ページ」「テキスト」「スクロール」は変わっていません。フレーム、アイフレームも使ってないみたいですが、どのように右側のページだけを変更しているんでしょうか？

  • フレーム分割したページの表示について

    教えてください！ 左右にフレーム分割したページで 左側にリストボックスを設置してコンテンツを作り、右側に選択したものを 表示させるようにしているのですが、 表示された時、右側のページで1度クリックしないと（アクティブにしないと？） その状態でホイールを回すとコンテンツが次々と変わってしまいます。 1度確定（クリック）しなくても、下にページをスクロールする方法はありますか？ たとえば、リストボックスの隣によく”ＧＯ”ボタンを見ますが あれも一つの解決方法でしょうか？ お願いします（_　_）

    • ベストアンサー
    • HTML
  • 動画を掲載すると最下部のフッターを突き抜ける

    CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html

    • ベストアンサー
    • CSS
  • スタイルシートで画面を縦に２分割する方法

    スタイルシートで左側にメニュー(class=menu)を、右側に本文を書くようなサイトを作っています。 body { margin: 0px; } .menu { background-image:url(./img.gif) ; background-repeat:repeat ; margin:0px ; padding:10px ; position:absolute; width:150px ; } といった感じにしていましたが、左側メニューの背景がテキストの終端部分で切れてしまいます。（メニューの行数が短いので。） 私は、下までメニュー部分の背景がくるようにしたいのです。（つまり、画面が左右に２分割されるように） そこで、いろいろ調べて、body{}と.menu{}に「height:100%;」を加えることによって、少し改善が見られました。 表示させると、画面がきちんと２分割されます。 しかし、右の本文が長い時、スクロールをすると、それに伴いメニューが上に行き、やはりメニュー部分の下部が空白になります。 スクロールしても、下まできちんと２分割できるようにするには、どうすればいいでしょうか？ たぶん、分かってしまえば簡単なことなのでしょうが、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • デスクトップのアイコンの移動

    Windows2000を使用しています。 よく使うアイコン(マイコンピュータ、マイドキュメントなど)は左側 たまに使うようなアイコン(翻訳ソフト、ゲームや書類など)は右側に 配置しているのですが、 右側のアイコンをクリックしてアプリケーションなどを実行した場合に 右側に配置されているはずのアイコンが勝手に左側に移動してきてしまいます。 右クリックで新規作成でファイルなどを作成した場合にも 右側で作成しているにもかかわらず、左側に配置されてしまいます。 これだと、大変不便なのですが どのように設定を変更したら、位置が固定されるのでしょうか？ ご存知の方、よろしくお願いいたします。

  • フッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法

    現在 http://www.stylish-style.com/csstec/ultimate/fix-foot.html で紹介されている方法を使いフッタを常に最下部へ表示させています。#containerでページを囲み、#mainでフッタのパンディングを確保、 #mainのheightは100%-フッタ用パンディングの30pxとなっています。 #main内にヘッダ、ナビゲーションを上部から順に配置し ナビゲーション以降を#main2としコンテンツ部として表示させようと考えています。 ただ、この方法ではフッタが固定されるもののコンテンツはどんどん下へと伸びてしまいます。 私の考えている表示としては、 (1)コンテンツ部は常にフッタまでボックスを広げる。 (2)コンテンツがoverflowした場合はスクロールする。 この2点をクリアさせたいです。 #main2のheightをピクセルで固定させればできそうですが 解像度の変化に対応できないと思うので… どなたか良い方法を知っている方がいれば教えていただければ幸いです。 htmlとcssは下記URLです。 http://beatprovider.info/test/index.html http://beatprovider.info/test/style_d.css よろしくお願いします。

    • 締切済み
    • CSS
  • デスクトップのアイコンの移動

    Windows2000を使用しています。 よく使うアイコン(マイコンピュータ、マイドキュメントなど)は左側 たまに使うようなアイコン(翻訳ソフト、ゲームや書類など)は右側に 配置しているのですが、 右側のアイコンをクリックしてアプリケーションなどを実行した場合に 右側に配置されているはずのアイコンが勝手に左側に移動してきてしまいます。 右クリックで新規作成でファイルなどを作成した場合にも 右側で作成しているにもかかわらず、左側に配置されてしまいます。 これだと、大変不便なのですが どのように設定を変更したら、位置が固定されるのでしょうか？ 自動整列にはチェックは入っていません。 ご存知の方、よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する