• ベストアンサー

レスポンシブデザイン　縦画面固定

レスポンシブデザインで作ったWEBサイトを 縦画面に固定したい（スマホ横持ち時でも縦画面のまま） のですが、何か良い方法はありますでしょうか。 IPHONEやAndoroidの画面固定機能は使わず、 CSSなどで実現したいです。

  • CSS
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
回答No.2

<body> <!--既存のコンテンツ--> <div....... </div> <!--既存のコンテンツここまで--> <!--横で見ている場合にjsで挿入されるタグ--> <div id="alertbox"></div> <!--横で見ている場合にjsで挿入されるタグここまで--> </body> ------------------css #alertbox{ position:fixed; width:100%; height:100%; background:rgba(0,0,0,1); z-index:1000; } なんかこんな感じで上を覆ってやるタグを横でみてる場合にjavascriptにて挿入します。もしくはdisplay:noneにしておいてdisplay:blockに変更するのも手ですね。

ekekojr
質問者

お礼

ありがとうございます！

その他の回答 (1)

回答No.1

無理じゃないかな。 わたしはjavascript使って縦て見てない場合は、画面を隠して「縦で見ろ」と表示させてます。

ekekojr
質問者

お礼

ありがとうございます。 ちなみに『画面を隠して』ってどうやるんでしょうか

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

関連するQ&A

  • レスポンシブデザイン？

    cssで font-size: 0.85em; にしていて、スマホで見ると文字のサイズはちょうどいいのですが 同じサイトをＰＣで見ると文字のサイズが小さすぎて見づらいです。 一つのサイトを二つの媒体（スマホ・ＰＣ）で見る際に 文字のサイズを変える場合は レスポンシブデザインと言うのを学べばいいのでしょうか？

    • ベストアンサー
    • CSS
  • レスポンシブデザインのjQueryの書き方

    WEB初心者ながら、レスポンシブデザインに対応したホームページを制作したいと思っています。 スマホサイズのときのみ、ドロワーメニューにしたいのですが、jQueryをindex.htmlのheadに適応するとＰＣサイズの画面の時にも、そのjQueryが適応されてしまいます。 cssは、@media only screen and (min-width: 640px) { の書き方でひとつのファイルで行っております。 スマホサイズのときだけjQueryを適応させるにはどのような書き方をすればよろしいのでしょうか？ 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • 画面を縦で固定出来るアプリ

    端末：Dell Streak 001DL 画面を縦固定で使いたいのですが、 Dell Streakでは回転OFFすると、横固定になってしまいます AutoRotate OnOff系のアプリは幾つか有りますが、これでは縦固定は出来ません 縦、横を指定して固定出来るアプリは無いでしょうか （※センサーをごまかす方法は使いたくないので、それ以外でお願いします）

  • レスポンシブデザインでイメージマップ

    レスポンシブデザインでウェブサイトを制作しています。 その中で、イメージマップ（クリッカブルマップ）を使おうとしているのですが、スマホ縦で表示しますと、画像の大きさが変わりますので、リンクエリアがずれます。 そこで、jQuery RWD Image Mapsというものを見つけましたので、これを取り入れることにしました。 https://github.com/stowball/jQuery-rwdImageMaps が、うまく動きません。 試しに、シンプルなレスポンシブデザインのサンプルページがあったので、そのソースを拝借して、そこでこのjQueryがうまく動作するかテストしてみました。 HTML http://wakabaya.main.jp/example-09.html CSS http://wakabaya.main.jp/responsive-09.css jQuery http://wakabaya.main.jp/js/jquery.rwdImageMaps.min.js シンプルなサイトですので、何か他のjQueryやスタイルシートが干渉するということもないはずなのですが、やはり動きません。 ロゴ画像のSのあたりをリンクエリアとして指定し、パソコンではそこがリンクエリアとなっていますが、スマホ縦ではロゴ画像のynの下あたりにリンクエリアがきています。 jQueryを使うのは今回が初めてで、何か、初歩的なミスをしているのではないか…、と思うのですが、その原因が見つけきれず、こちらで質問させていただきました。 どういった原因、解決策が考えられるでしょうか。 よろしくお願いします。

  • レスポンシブデザインのCSSについて質問です。

    レスポンシブデザインのCSSについて質問です。PCで閲覧した時は、文章を左寄せ、画像を右寄せで表示させて、スマホで閲覧した時は、文章の下に画像を配置する方法を教えて下さい。 ちなみに私の場合はPC用サイトを以下のように作成していますが、スマホではどのようなCSSにすればいいのか、わからずに悩んでいる状況です。可能であれば、簡単なサンプル・ソースを教えていただけると嬉しいです。よろしくお願いします。 ■html <p><img src="gazo.png" class="photo">このページはサンプルです。</p> ■css .photo { float: right; width: 230px; position: relative; }

    • 締切済み
    • CSS
  • HTML5で、メニューボタンを固定位置にする方法

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

  • iphone/ipod touch 用サイトの制作について

    iphone/ipod touch 用サイトの制作について 現在、iphone/ipod touch 用サイトの制作を行っています。 画面を縦固定で使いたいので、横向きにしたときに画面を回転させないようにしたいのですが、 HTML側(もしくはcss、JavaScript、Jqueru側)で実装する方法はありますか？ 固定できるアプリは見つけたのですが、普通にSafariで見るときに実現したいので非常に困っています。

  • 縦画面

    タブレットやコンパーチブルで、キーボードはそのままで画面を縦位置で固定できる物はありますか？

  • JavaScriptで縦固定と横スクロールしたい

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

  • 画面上下にスクロールしても固定表示させる方法は？

    画面上下にスクロールしても固定表示させる方法は？ 通常は画面内にボタン群を表示させてもスクロールすると画面外に消えてしまいますが、これを常に表示させるようなことはできないのですか？ （iPhone の画面のようなイメージです） http://www.moongift.jp/2010/05/touchscroll/ でそれらしいことは可能なのですが、画面下部のみ実現可能なようで画面上部は無理そうです。 現在 PHP で考えていますが、実現可能なら JavaScript など他の方法への移行も視野にいれています。 すみませんがよろしくお願いします。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する