• 締切済み

HTML5で、メニューボタンを固定位置にする方法

HTML5で、メニューボタンをスクロールしても固定位置に表示する方法を教えてください。 今回はスマートフォン向けのサイトです。 CSSやJavascriptで実現できる方法はいくつかあるのですが、スマートフォンではうまく機能しません。 HTML5では機能しなかったり、スマホブラウザでは機能しなかったり・・・。 よろしくお願いいたします。

みんなの回答

回答No.1

http://home.wi-wi.jp/lab/00k/ ソースコードを参考にしてみてください。 スマホには画面の拡大機能がありますので、 どういう表示をすれば邪魔にならずに画面の固定をできるか、というのを考える必要があります。 単純に固定するだけでは使い勝手の悪い物になると思います。 position:fixedの弊害について、ユーザビリティーで調べてみてください。

ask_island
質問者

お礼

回答ありがとうございます。参考にしてみます。

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

関連するQ&A

  • 左メニューをCSSで固定したい

    左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。 固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。 これをフレームを使わずに作ることはできないでしょうか？ できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu　　■　main　　　　　　■ ■　 　　 　■　　　　　　 　　　■　　　 ■ 　 　　 　■　　　　　　 　　　■ ■　　 　 　■　　　　　　 　　　■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる ・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール 【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }

    • ベストアンサー
    • HTML
  • 表示位置の固定

    背景画像の表示位置を固定する場合、 background-attachment: fixed;としますがP要素やDIV要素をこれと同じく表示位置を固定しスクロールしても動かなくすることをCSSで実現可能でしょうか？

    • ベストアンサー
    • HTML
  • HTML5＋CSS3　でしかできないこと

    長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php　など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML５＋CSS３　が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5＋CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや　header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 ３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！

  • HTMLのメニューをインクルードできますか？

    PHPでいう <? include("menu.htm"); ?> と同じ事をJavascriptで実現してメニュー用のHTMLを 各HTMLに埋め込みたいのですが可能でしょうか？ document.write("メニューのHTMLタグ")では改行が入るとNGみたいで。。

  • 表の見出しをどのブラウザでも固定する方法は？

    http://shinsama1980.web.fc2.com/hyakuhoh-data1.htm このサイトの表の見出しを固定するＣＳＳを書きました。 同サイトをchromeやedgeで見ると見出しが固定されているのですが、 firefoxで見ると固定されておりません。 ＣＳＳにはブラウザごとで見え方が異なるものなのでしょうか？ また、どのブラウザでも同じように表がスクロールさせる方法はあるのでしょうか？ もし、そのような方法があるのであれば、ご教示願います。 Ｐ．Ｓ 当方はＨＴＭＬ、ＣＳＳについては初心者ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。

    • ベストアンサー
    • CSS
  • ブラウザ上に固定させるメニュー

    http://www.430.jp/rak2/user/samp1/ ↑サンプル掲示板ではページ上部にメニューを固定させていますが、これと同じようなものを探しています。これはJavaScriptで実現させるのでしょうか？ 以前にスタイルシートで試したことがあるのですが、低スペックマシンで高速スクロールするとメニューがぶれてしまいました。 サンプルソースを紹介しているサイト、または、書き方をお教え頂けると助かります。どうぞよろしくお願いいたします。

  • 表の位置をスクロールしても動かないようにブラウザで固定させたい

    ○○○○ブラウザ○○○○▲ ■■■■■■■■■■■○□ ■１．位置固定の表■■○□ ■■■■■■■■■■■○□ ◇◇◇◇◇◇◇◇◇◇◇○□ ■■■■■■■■■■■○□ ■■■■■■■■■■■○□ ■■■２。非固定の■■○□ ■■■　普通の表　■■○□ ■■■■■■■■■■■○□ ■■■■■■■■■■■○□ ■■■■■■■■■■■○□ ○○○○○○○○○○○○▼ みたいなのを フレームを使わずに　１ページ内におさめたいと思っています いろいろ調べましたがわかりません フレームで３ページ分　用意しないとできないのでしょうか？ １。style="position:fixed" としてみましたが、 　　firefoxでは固定できるようなのですがなぜか、IEでは　固定できませんでした。 ２。のほうは　スクロールバーで移動するとスクロールしてくれればいいです。 　　z-indexは、１を上にする予定です。 フレームを使えばないいことなんですが。(^_^; cgiで動的に作りたいので　フレームにすると３回呼び出さないといけないので 負荷がかかるのでさけたいと思っています １ページで済ませたいと思っています。 １。は　メニューとして使いたいのでブラウザ画面から動かないようにしたいです。 ２。は、ブラウザのスクロールで移動みたいなのが欲しいです。。 よろしくお願いします　m(_ _)m

    • ベストアンサー
    • HTML
  • JavaScriptで縦固定と横スクロールしたい

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

  • エレベーターメニュー

    サイドのメニューがスクロールにと同時にスクロールされる、エレベーターメニューのスクリプトをこちらからダウンロードさせていただきました。↓↓↓ http://www.sonicjam.co.jp/soniclabs/?p=3 いろいろなものを試したのですが、ブラウザによって表示がちがったたり、となかなかうまくいかなかったのですが、こちらからダウンロードさせていただいたものは、どのブラウザでも同じように表示され、とても簡単に設置でき、とても使いやすくて気に入っています。 ただひとつ、一番下まで行くと、フッターの上にメニューがかぶってしまいます。好きな位置で停止できるように、編集したいのですがJavascriptがまったく分かりません・・・。どなたかどこをどう編集したら好きな位置で止められるか分かる方がいらっしゃいましたら、ご教授していただけませんでしょうか。 どうぞよろしくお願いいたします。

  • 【CSS/HTML】ナビゲーションメニューについて

    【CSS/HTML】ナビゲーションメニューについて http://pegoring.blog108.fc2.com/ ・ボタンたちをコンテンツの幅に合わせる方法（左並びからセンタリングへ）を教えてください。 ・ボタンにカーソルを合したとき（hover)にそのカーソルを合したときの高さと背景の高さが合いません。 ・そのコンテンツの時にボタンの要素（色や背景など）を変更する方法を教えてください。（たとえば、Homeならチプページにいるときだけ、そのボタンだけ背景を変えるなど） →Javascriptになるとおもいます。javascriptに詳しい方、こっちも教えていただけると幸いですorz。 画像を横幅いっぱいにrepeatさせて、中央にコンテンツを置くようにしたいんです。 オレンジの背景が横いっぱいに最後まで続き、ボタンはコンテンツの幅に揃えたいんです。 とにかく、リンクから実際に見てもらえば言いたいことのおおよそはつかんでいただけると思います。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する