スクロールをスマホなどでも使えるようにする

前へ 次へ
このQ&Aのポイント
  • スマホや他のデバイスでもスクロールを使用できる方法はあるのか？
  • スマホで表示するとサイトが崩れ、スクロールができない状態になっている
  • フリーのWEBデザイナーでもこのような状態のサイトを提出して問題ないのか？
回答を見る
  • ベストアンサー

スクロールをスマホなどでも使えるようにする

下記サイトのようなスクロールをスマホなどでも使えるようにすることは不可能なのでしょうか？ スマホに対応してくれと言われたらスクロールを使えませんとお客さんに伝えるのが正しいのでしょうか？ http://yu-ra-ri.jp/item/index.html スマホで見るとかなり崩れていてスクロールはできない状態になっています。 また今もまだフリーのWEBデザイナーでもこのサイトのようにスマホでここまでくずれてお客さんに提出しても問題ないのでしょうか？ 最後にドラッグしてスクロールする部分がオリジナルの画像になっているのですが、これはCSSなどを使って実現するのでしょうか？ ご存じなかたがいましたら教えてください。

noname#226032
noname#226032
  • HTML
  • 回答数3
  • ありがとう数4

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

  • ベストアンサー
  • Tasuke22
  • ベストアンサー率33% (1799/5383)
回答No.3

> IS11Tを私は使っているのですが確かに古いOSを採用しています。それが理由だったのですね。 直接では無いと思います。 直接の原因はブラウザのバージョンだと思います。 古いOSに新しいブラウザがサポートされていない、ということでしょう。 少なくとも正常にスクロールできるChromeブラウザはAndroid 4.0 以降でなければインストール出来ません。

noname#226032
質問者

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

noname#226032
質問者

補足

http://blog.livedoor.jp/tacshock-code14/archives/6500308.html 上記の問題です。スクロールではなくオーバーフローでした。 すいません。 JQUERYがないと解決できないそうです。 私はCSSしかできないので無理なのでしょうね。

その他の回答 (2)

回答No.2

>また今もまだフリーのWEBデザイナーでもこのサイトのようにスマホでここまでくずれてお客さんに提出しても問題ないのでしょうか？ 対応する事を契約の条項に入れているのであれば、対応しなければダメですね。 それはIE6、Firefox3、Safari3、フィーチャーフォンも同じです。 逆に契約に入れていないのであれば、問題ありません。 >スマホに対応してくれと言われたらスクロールを使えませんとお客さんに伝えるのが正しいのでしょうか？ 制作者の技術的にできないのか、ブラウザの仕様上できないのかで変わりますが、 ブラウザの仕様上できないのであれば、ブラウザの仕様を説明した上で問題なく読めるようにデザインを調整するのが問題ない対応方法でしょう。 対応するかどうかは究極的には契約次第ですが、 契約外（特に、契約内容が曖昧なため、何が契約内で何が契約外かわからない状態）でも追加料金なしで対応される方も多くいらっしゃいますので、それ以上の事は考え方次第ではないですかね。

noname#226032
質問者

お礼

ありがとうございます。お忙しい中大変ありがとうございました。 ＞契約外（特に、契約内容が曖昧なため、何が契約内で何が契約外かわからない状態）でも追加料金なしで対応される方も多くいらっしゃいますので そんな方も多くいるのですか？ するとお客さんはそれで当然と思っている人もおおいのかもしれませんね。 契約に契約外のことは追加料金になりますと書いておいたほうがよさそうですね。 IE8以前はシェアがほとんどないそうなので自分はそれ以降のみ対応しようかと思っているのですが、今後行うならそれでも一般的に問題ないですかね？

noname#226032
質問者

補足

http://blog.livedoor.jp/tacshock-code14/archives/6500308.html 上記の問題です。スクロールではなくオーバーフローでした。 すいません。 JQUERYがないと解決できないそうです。 私はCSSしかできないので無理なのでしょうね。

  • Tasuke22
  • ベストアンサー率33% (1799/5383)
回答No.1

バージョンの問題かも、ですね。 Nexus7(2013) Android 4.3 Chrome 29 これで全く問題ないですけど。 Android 2.2のスマホですとダメですね。 何が原因でどこが境目なのかは、にわかには分かりません。 バージョン問題は、バージョンに限界が有ることを説明したら 販売しても構わないでしょう。 常に最新のものを販売するというのは、事実上不可能なのですから。

noname#226032
質問者

お礼

ありがとうございます。お忙しい中大変ありがとうございました。 IS11Tを私は使っているのですが確かに古いOSを採用しています。それが理由だったのですね。 ちなみにスマホで上記サイトのパティシエのプライドがつくりあげた、シンプルだけど奥深い究極のプリン。店頭とWebで異なるフレーバーをご用意しています。というスクロールを動かす時はそこを指でスクロールするのですよね。 私のスマホは固定されて動かせません。 Android 2.2は一般的なWEBデザイナーならすでに対応していないのかもしれませんね。

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

関連するQ&A

  • テーブルにスクロールできますか？

    dreamweaverMXでHPを作成しています。 全体をテーブルで入れ子にして作っています。 一応商用サイトなのでお客さんの要望があって、 よく新着情報などをスクロールがついているテーブル？のようなもので作られていますよね。 それの作り方がわかりません。 ネットで検索したりcssにチャレンジもしたのですがやっぱりdreamweaverではテーブルにスクロールは付けられないのでしょうか？ 初心者のため自分でいろいろやったのですが難しくてわかりません。 出来ればテーブルで、テーブルが無理でも何かしら方法を教えて欲しいです。 よろしくお願いします。

  • 複数の画像を横にスクロールさせる方法について

    複数の画像を横にスクロールさせる方法について こちらのサイト（www.japanican.com/index.aspx）の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるのはどのようにすればいいのでしょうか。できれば、CSSとhtmlのタグを教えていただければうれしく思います。 また、横についているボタンだけにするとか、下のスクロール部分だけにするとかも教えて下さい。 よろしくお願いいたします。

  • 画像の一部分をスクロールして表示する方法

    画像の一部分をスクロールして表示する方法 初めて質問させていただきます。 一枚の画像の一部分を表示させ、画像をスクロールさせる→次の画像へ移る という見せ方をしたいと思っています。 参考サイト：http://www.kmad.jp/index.html ここのトップページのような形が出来たらと思っています。 HTMLとCSSには少し慣れてきたのですが、JavaScriptは初心者で全く分からない状態です。 もしJavaScript以外の方法でいいやり方があれば、そちらも教えていただけるとありがたいです。 すみませんが、詳しい方、宜しくお願いします。

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

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

  • 画像のCSS化

    添付のようなグラデーション画像を トップページのバナー背景にしたいのですが CSSで実現するにはどのような方法が簡単でしょうか。 画像をドラッグするとsvgやCSSに変換してくれるサイトなどはないでしょうか

    • ベストアンサー
    • CSS
  • 静的なPCサイトをスマホ対応にする手法

    まだスマホもCMSも流行っていない時期に作成した、 単純なｈｔｍｌとcss構築のPCサイトをスマホ対応(デザインやレイアウトの最適化)しようと思います。 以下のような条件の場合、どういった手法が最善でしょうか？ ・PCサイトの全体のページ数は100P以上。ほぼ静的なhtmlで、一部aspによる更新システムあり。 ・すべてのページを最適化しようとは考えていない。トップページと主要なコンテンツ数ページのみ最適化したい。 ・頻繁に修正の入るコンテンツ内容については、PC版を修正したらスマホも同様に変わるようにしたい。(修正の二度手間を無くすため) ・メインナビゲーションなど、ほぼ固定の箇所についてはPCとスマホそれぞれ別ソースでもかまわない 更新の二度手間がかなり気になる箇所なので、できればワンソースでcssによる切り替え対応したいところですが、もともとスマホのことなんて全く考慮していないhtml設計なので、正直cssだけでどこまで最適化できるのか微妙なところです。 希望の形としては、 PCサイト用の大枠のhtmlと、スマホ用の大枠のhtmlがそれぞれ存在していて、 その中のパーツパーツをワンソースで管理できたらベストだなーと思っています。 (PHPファイルとかで部分的なソースをインクルードして使う、みたいな感じでしょうか。) 上記のような方法は可能なのでしょうか？ 可能であるとしたら、どのように実現すれば良いでしょうか。 参考URLなどでも結構ですので教えていただきたいです。 また、上記手法が一般的ではない場合、どういう手法がベストなのでしょうか。 ご教授いただけますと幸いです。

  • javascript初心者です。

    javascript初心者です。 http://www.awaseba.com/sample/index.html の様に画像を組合せ、ドラッグで位置の移動、サイズの変更をやりたいのですが javascriptでの実現方法をどなたか教えていただけないでしょうか。 またはサンプルを掲載しているサイトか実現しているサイトを教えていただけないでしょうか。 よろしくお願い致します。

  • ブラウザのサイズを変えたら、divのボックスの高さも合わせて

    ブラウザのサイズを変えたら、divのボックスの高さも合わせて 可変できるようにしたいです。 さらに、可変したdivのボックスの高さより内容量が多い場合は ブラウザのスクロールバーのようにCSSのoverflow:autoで スクロールが表示されるようにしたいと考えております。 現時点で、スクロールバーはオリジナルの画像で作成しており、 表示させるのにjScrollPane.jsというJavaScriptを使用しています。 しかし高さが固定されており、カスタマイズしようと思っているのですが なかなかうまくいきません。 どなたか、実現方法をご教授願えますでしょうか。 よろしくお願いいたします。 ※情報不足であれば、追記いたしますのでご指摘お願いいたします。

  • PC(win/mac)と携帯を判別し、それぞれ違うindexを読み込ませるのはJavascript？CGI？PHP？

    【現在の状況】 [1]index.html（TOPページ内）にiframeがあり、その中で子ファイル（コンテンツページ）を表示するHPを作成。 ※<iframe>タグ内のscrolling=noと指定しています。 （スクロールは子ファイル内で下記のように指定しています。） [2]スクロールバーをcssとJavascriptを使ってカスタマイズし、すべての子ファイル内でそのスクロールバーが表示されるようにしています。（スクロールは縦のみ、横は非表示） ※<link href="../css/scroll.css" rel="stylesheet" type="text/css" /> 　<script type="text/javascript" src="scroll.js"></script>という感じです。 その結果、カスタムスクロールバーの表示は、 WindiwsはFirefox2.0○、IE6/IE7○、Opera9○、Netscape7○。 MacはFirefox2.0○、IE×、Safari×となりました。 両方とももちろんデフォルトもカスタムもスクロールバーは出ておらず、 Safariは子ファイルのテキストをドラッグすると下の方を見ることはできたのですが、IEは無反応でした。 【質問】 この状況を回避しするのにindex.htmlを2つ作って、一つは現状のまま、 もうひとつは<iframe>タグ内のscrollong=yesにし、scroll.jsもscroll.cssも指定していないindex2.htmlに飛ばして、プラットフォームデフォルトのスクロールで表示したいんです。 単純にWinとMacで分けたらいいのかもしれませんが、Mac版Firefoxではカスタムスクロールが表示可能なので、 MacのFirefoxのばあいはindex.htmlに飛ばしたいんです。 そして、さらに携帯でアクセスした場合、携帯用の/mobile/index.htmlに飛ばしたいのですが、 この場合、プラットフォームの判別？（Win/Mac/携帯）後、ブラウザの判別をしないといけないと思うのですが、 素人ながら、丸3日かけて本やgoogle等で調べて、Javascriptを書いて試してみたりしたんですが、 上記条件を満たす答えがわかりません。（そもそもの書き方が間違っているのかもしれません。） もしかしたら、CGIとかPHPじゃないとできないんでしょうか？ お願いいたします！ WindowsとMac/Firefoxの場合はindex.html、Macのその他ブラウザはindex2.html、 携帯からはmobile/index.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だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する