• ベストアンサー

トップに最初に表示されるエリアの位置について。

トップに最初に表示されるエリアの位置について。 一枚の縦に長いウェブサイトを作っています。 メニューは5項目でトップに固定してあり、 下に文章や画像等が5項目ならんでいます。 サイトに初めに来た時に、1項目目でなく4項目目が見えるように したいのです。 また、もし素人レベルで可能であれば、 メニューを選んだ際に、ユーザーが同じページのスクロールだと 分かるようにゆっくりと上下するにしたいです。 ウェブ作成初心者です。 分かりやすく教えていただけると助かりますm(__)m

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

  • ベストアンサー
  • pnck
  • ベストアンサー率90% (9/10)
回答No.1

HTMLだけでは無理ですので、JavaScriptが必要になります。 Web作成初心者だと少し難しいかもしれません。 > サイトに初めに来た時に、1項目目でなく4項目目が見えるように こちらに関しては、Cookieを使って実装します。 Cookieについての説明は、↓に書いてあります。 http://e-words.jp/w/Cookie.html 初回訪問時はCookieが見つからないので、 見つからなかったら4項目目に飛ばすという処理を、JavaScriptで記述します。 そしてその際にCookieを発行します。 Cookieの発行方法は様々ですが、この場合JavaScriptで発行するのがベターでしょう。 こうすることによって、初回訪問であるかを判別できるようになります。 ただCookieは任意のタイミングで消せるし、受け付けない人もいるので、 そういう人たちには毎回4項目目が表示される可能性があります。 > メニューを選んだ際に、ユーザーが同じページのスクロールだと > 分かるようにゆっくりと上下するにしたいです。 こういうエフェクトなども、多くはJavaScriptで実装します。 エフェクトの内容によっては最近のCSSで実装できる場合もありますが、 CSSに関してはあまり詳しくないのですみません。 この場合、1/10秒毎に目的地に向かって一定の距離を進むような処理を記述します。 Cookie処理はそんなに難しくないので、少し調べれば気合で実装できると思います。 エフェクト処理は、初心者には少し難しいかもしれませんが、 簡単に行うためのライブラリがたくさんあるので、そういうのを試すといいと思います。 とはいっても、JavaScriptの知識が少々いるので、一筋縄にはいきませんが・・・ 初心者だと意味不明だとは思いますが、1つ紹介しときます。 スクロール(コード説明) http://www.webdesignerwall.com/tutorials/scrollto-posts-with-jquery/ スクロール(デモ) http://www.webdesignerwall.com/demo/scrollto-demo/ ちなみに私なら、Cookieは使わず『初めて訪問した方は項目4を御覧ください。』 という文章とともにリンクを目立つとこに貼ることで対処します。

41500
質問者

お礼

ありがとうございます。 確かに素人には[ちんぷんかんぷん]!ですね・・・ やりたいことばかりが先走ってしまって 頭が追いつきません。 地道に勉強してみます。 ありがとうございました!

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • リンクの飛ばし方とその位置について

    リンクの飛ばし方とその位置について 似たような質問を見つけましたが、分からなかったので質問します。 一枚の縦に長いウェブサイトを作っています。 アンカータグをつけて同じページ内のリンク先に到達するようにしたいのですが、、 ページのトップにメニューを固定しているので、ページの先頭ではなく トップから200pxの位置をに持ってきたいのですが どうしたらよいでしょうか。 メニューには5項目で、下に文章や画像等が5項目ならんでいます。 たとえば2項目目にメニューからリンクした際に、上や下の項目が見えていてかまいません。 ウェブ作成初心者です。 分かりやすく教えていただけると助かりますm(__)m

    • ベストアンサー
    • HTML
  • Wordpress でトップ画面に固定ページを複数

    Wordpress でトップ画面に固定ページを複数表示させるにはどうすればいいでしょうか? envo businesses というテンプレートを使っています。 メニューには固定ページのタイトルが表示され、クリックするとページの内容は表示されます。 これらのページをトップページに上下に並べて表示させ、スクロールでも全てのページが閲覧できるようにしたいのですが、どうすれば良いでしょうか?

    • ベストアンサー
    • CSS
  • 縦は位置を固定で横はスクロールで見れるようにしたい

    縦は位置を固定で横だけスクロールで見れるようにしたいのですが、その方法はどうすればいいでしょうか。 position-y:fixed; position-x:absolute; と書いていますが目次が消えてしまいます。 position:fixed; これだけならうまくいきますが縦も横も固定されたままです。 目次を縦のときは固定でスクロールしても動かないようにしたいのですが、解像度が低いモニターのために横だけはスクロールしたときに横だけ全部見えるようにしたいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • divでスクロールの位置を記憶するには?

    始めまして。よろしくお願いします。 ブログのトップページがdivで2つに分かれています。 左側はメニュー画面で非常に縦長になっていてスクロールして表示しています。 メニュー画面のリンクをクリックするとメニュー画面のスクロールバーが一番上まで言ってしまって困っています。 リンクをクリックしてもスクロールバーの位置を変えない良い方法はないでしょうか? どなたかよろしくお願いします。

  • html+CSSでテーブルのスクロール(位置固定)

    助けてください。 たとえば、10項目の列を持つテーブルがあったとします。 レコード件数は100件だとします。 画面に表示できるのは5項目、10件だとした場合、 そのテーブルに対して縦横スクロールバーを つけるのですが、その際に縦スクロールバーを下に動かした場合、 <th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。 また、横スクロールバーを右に動かした場合、5項目は固定で6項目目以降をスクロールさせたいです ※エクセルのウインドウ枠の固定 を適用したイメージ htmlとスタイルシートで実現できますでしょうか?

    • ベストアンサー
    • CSS
  • スクロールバーの位置指定

    OS情報:MacOSX ブラウザ情報:Safari 今作成中のホームページの左側にボックスをつくってその中にクリックすると別ページに飛ぶリンクを縦に並べています。ボックス内はCSSでオーバーフロー自動の設定にしているので、下の方のリンクはスクロールしなければ見えません。今の状態は見えているリンクをクリックして別ページに飛ぶ分にはいいのですが、スクロールしてリンクをクリックした場合、別ページに移動した時、またスクロールがトップの位置に戻ってしまいます。これだとそれ以下にあるリンクをクリックしたい時に、いちいち下方向にスクロールしながらでないといけません。そこで、クリックして移動した後、そのページのリンク名が表示される位置でスクロールバーを固定できないか…ということなのですが、何かよい方法はないでしょうか?

  • Excel UserForm の表示位置

    Excel UserForm を選択セルの右下に表示させたいのです。 皆様こんばんわ。 セル選択を(例)B5:F5とし、右クリックでユーザーフォームを表示させているのですが 最後のセルF5の右下にユーザーフォームの左上がくる様な表示方法はあるのでしょうか? Set Area = Selection With UserForm1 .StartUpPosition = 0 .Top = 400 .Left = Area.Left + Area.Width .Show vbModeless End With などと行っていますが、エクセル画面の最大表示とそうでない場合とで表示位置が異なってしまいます。 ウィンドウズのエリアとエクセルのエリアで座標が異なるのかなぁと思いつつ。。。 良いアイデア(?)が浮かびません。 良い方法が御座いましたら 皆様、宜しくご教示願います。

  • HTMLでテーブルを表示させようとしています。

    HTMLでテーブルを表示させようとしています。 画像のような勤務状況がわかるテーブルをHTMLで表示させようとしています。 テーブルの数字項目は時刻を表しています。(9から18まであります) ブラウザの横スクロールは表示させたくないので テーブル内の一部項目(「No.」から「氏名」まで)を固定にして 横スクロールバーを表示させたいのです。 縦スクロールのサンプルを見つけ、 これを横に対応させればよいかと思ったのですが うまく表示させることが出来ませんでした。 一部項目を固定にして横スクロールバーを表示することは可能なのでしょうか?

    • ベストアンサー
    • HTML
  • 管理画面TOPの不具合

    管理画面TOPの画面の右側3分の2が欠落し、項目覧とスポンサー広告のみが 縦に縦列し、欠落部分が最下部までスクロールしないと閲覧できなくなった。 修復方法を教えてください。

  • ページトップへスクロール

    webページをスクロールしていくと最後に「ページトップへ」のようなリンクがあって、クリックするとスクロールしてページトップでゆっくり止まるjavaを使用しているんですが、javaをオフにしているユーザーのために、同じリンクボタンで普通のアンカーでトップページに切り替わる(name属性を使った方法)のも併用したいのですがどうすれば良いのでしょうか。 リンク部分のソースはこれです。 <a href="javascript:pageup()">pagetop</a>