スマートフォン用ページの横スクロール機能

このQ&Aのポイント
  • スマートフォン向けHPの制作を検討中です。画像や図を多用するサイト構築となりそうですが、それらは横長サイズのものも多く、スマートフォンの縦画面では収まりきらないものも多くなるものと思います。
  • 相談した制作業者さんには縦画面での閲覧を維持しながら、横長の画像や図の部分だけは横スクロールで見せたいと相談しましたが、その技術はあまり聞いたことがないと言われました。
  • 私はどこかでそういうサイトを見たことがあるので、技術的には可能だと思いますが、具体的な実現方法はよくわかりません。jQueryやjQuery mobileなどの技術を使って表現することはできるのでしょうか。
回答を見る
  • ベストアンサー

スマートフォン用ページの横スクロール機能

私はフリーの個人事業主ですが、コンシューマ向けサービスを訴求するため、スマートフォン向けHPの制作を検討中です。 画像や図を多用するサイト構築となりそうですが、それらは横長サイズのものも多く、スマートフォンの縦画面では収まりきらないものも多くなるものと思います。 私はプログラマーではないので専門知識に乏しいのですが、とある制作業者さんに「縦画面での閲覧を維持しながら、横長の画像や図の部分だけは横スクロールで見せたい」と相談したところ、そういう技術はあまり聞いたことがない、と首をかしげられてしまいました。 私はどこかでそういうサイトを見たことがあるので、技術的には可能だと思うのですが・・・ ※どこのサイトか完全に失念してしまいましたが・・・ 私はよくわかりませんが、「jQuery」や「jQuery mobile」など、何らかの技術を使って表現することはできないものでしょうか。

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

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

最近の環境であればCSS1つで概ね上手くいくみたいです 古い環境への対応や細かな調整をしたい場合JSを使うことになりますね http://lab.informarc.co.jp/javascript/overflow_for_android.html

hsmclqoa11
質問者

お礼

ご回答ありがとうございます!いただいた回答は、早速今相談しているWeb制作業者さんにお伝えしてみますね。

関連するQ&A

  • スマートフォン用のサイト作成について

    スマートフォン用のサイトを作成したいと思っています。 検索すると  jQuery Mobile とか HTML でとか、色々出てきます。 基本は同じだとは思うのですが、どのような方法で作るのが現在の主流(一般的)なのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • スマホだとjQueryを使っているページが見れまん

    現在作成中のWebサイトの全ページをスマートフォンで確認したら、jQueryを使ってスライドショーをしているページだけが3秒くらいで消えます。 始めの3秒くらいは、きちんと表示されるのに、3秒後に突然ブラウザが閉じて、スマートフォンのホーム画面に戻ってしまいます。 その3秒後くらいというのは、おそらくスライドショーにより画像が切り替わる瞬間だと思います。 このような問題は、なぜ起きるのでしょうか? 私のスマートフォンはイーモバイル製ですが、このスマホだとjQueryが見れないからでしょうか? それならば、noscriptを付ければ良いのでしょうか? というよりも、別な問題なのでしょうか?

  • スマートフォンサイトの作り方

    現在Media Queriesをつかった方法や jquery mobileを使用した方法など様々な方法で PC、タブレット、スマートフォンに対応する方法がありますが それぞれの使い分けや、メリット、デメリットを整理したサイトや 書籍などありましたら教えていただきたいともいます。 また体験談などもご教示いただけましたら幸いです。 中小企業の会社ホームページを作成するということでは やはり理想はjqueryでの構築がよいのでしょうか。 (個人的にはMedia Queriesのほうが重くなるのかなとも考えています) 非常にざっくりした質問で恐縮ですが 皆様のご経験を伺いたく質問させていただきました。

    • 締切済み
    • CSS
  • スマートフォンで大きな画像を端末に合わせて表示

    スマートフォンサイトを制作しているのですが、大きな画像を端末に合わせて(自動的に)横幅いっぱいに表示したいと思っています。 どのような方法があるのでしょうか?

    • ベストアンサー
    • CSS
  • このサイトがうまく表示できないのですが、私だけ?

    http://dev.classmethod.jp/smartphone/jquery-mobile-component-4/ このサイトがうまく表示できないのですが、私だけですか? IE11を使っています。

    • ベストアンサー
    • HTML
  • 画面いっぱいの背景画像を縦にエンドレスにスクロールできますでしょうか?

    画面いっぱいの背景画像を縦にエンドレスにスクロールできますでしょうか? 上から下、もしくは下から上にシームレスに。つなぎ目が分からないような感じです。 いろいろと探してみたのですが、なかなかなくて。 画像のサイズはモニターサイズに自動リサイズもできればいいですね。 jqueryになるのでしょうか。 よろしくお願い申し上げます。

  • スマートフォン制作の画像サイズについて

    近年、あまりにもサイズが多様化している スマートフォンの画像サイズについて、お聞かせください。 この度、写真をスライドさせるUIをスマートフォンでつくる予定です。 これまでのスマートフォン制作では640pxで主に画像を作っておりました。 ただ、現状、スマートフォンの解像度が多様化しているので いったい、今の主流としてサイズはいくつで作るのが ベストなのかな…と毎回、悩んでおります。 Portrait、Landscape両方に対応予定です。 小さくしても、写真画像なので大きな劣化はないことは承知しているのですが、 写真の上に文字も少し載せる画像になります。 通信が重くならず、あまり劣化が気にならないサイズについて アドバイスをいただけたら助かります。 スマートフォンサイトの制作について お詳しい方、よろしかったら、ご教授いただけたらと思います。 何卒よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • jQuery等で背景をフル表示+スライドショー

    http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は3枚で、3枚目の画像だけ、縦長になっているので、 背景が3枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 3枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか? jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。

    • ベストアンサー
    • CSS
  • スマートフォンの画像サイズ

    スマートフォンのデザインを640pxで制作し、スマートフォンサイトを構築中です。 viewport の設定を <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> とし、画像を640pxで制作したサイズで切り出していますが スマートフォンで実機確認すると、縮小されず、倍のサイズで表示されてしまいます。 幅640pxで作成したデータを、半分に縮小したもの(320px)を画像として切り出すのが正しい方法なのか、それとも、切り出した画像の<img … width=" 半分のサイズ ">にするのでしょうか? それとも、幅640px で作成した画像を切り出して、自動的に縮小されるようにする方法があるのでしょうか? いろいろ調べたのですが、よくわからず(調べ方も分からず…)困っています。 無知で申し訳ないのですが、よろしくお願いいたします。

    • 締切済み
    • CSS
  • スマートフォン用画面の文字を非表示にしたい。

    OpenPNE 3.8.8 を使って、SNSサイトを制作中の者です。 スマートフォンから、自分の作ったサイトを見ると、新規登録画面とパスワード変更画面にに、「スマートフォン表示に切り替え」というリンクが表示されるのですが、リンクを押しても、スマートフォン表示に切り替わらないため、「スマートフォン表示に切り替え」という表示を、非表示にしたいと思っています。 ネットで調べると、次のような回答がありましたが、バッチの適用の仕方がわからず、困っています。 http://support.pne.jp/blog/support_info20130502.html よろしくお願いします。

専門家に質問してみよう