• 締切済み

iPadで、横スクロール不要なWebデザイン

いつも、ご丁寧な回答をありがとうございます。 PC向けのWebサイトを作成しているのですが、iPad、iPhoneなどタブレットやスマートフォンでも閲覧可能なものを目指しています。 iPadやiPhoneでは通常、機種ごとの解像度にあわせてWebサイトが最適化されて表示されますが、横スクロールが不要（画面が右側にはみ出ない）なサイトを作るにはどうしたら良いでしょうか。 例えば、 夕刊フジZAKZAK http://www.zakzak.co.jp/ Yahoo! http://www.yahoo.co.jp/ のようなサイトです。 cssのDIVボックスで、幅指定して、中央合わせした場合、はみ出てしまうのです。幅は、コンテンツ部分が980ピクセル。その左右にそれぞれ10ピクセルを予定しています。 ご回答、よろしくお願いします。

  • Chown
  • お礼率95% (481/505)

みんなの回答

  • IDii24
  • ベストアンサー率24% (1597/6506)
回答No.1

最近はこういう感じがはやりですよね。というかPreziはタブレッドの普及で急成長株です。 http://prezi.com/explore/

Chown
質問者

お礼

ご回答ありがとうございます。時代に合わせていろいろと技術が開発されるのですね。

Chown
質問者

補足

自己解決しました。 iPadやiPhoneで、なぜか右側にマージンができなかったのですが、bodyタグにcssで以下のような設定をするとバグ？を回避できました。 body {width:100%;}

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • 横スクロールバーが消えません

    webにフレームやFlashを導入してリニューアルさせてたのですが、横スクロールがいくつかのページで出てきてしまい困っております。 テーブル幅はどのページも600ピクセル以下に設定しています。mac os XのIE 5.2だと横スクロールバーは１つも出ないのですが、win XPのIE 6.0だと何故か何個か横スクロールが出てきてしまいます。 どこかのサイトで横スクロールバーを消す方法で <style type="text/css"> <!-- body { overflow-x: hidden; } --> </style> これで消えるとあったんで試してはみたのですが、なにせhtmlの知識が乏しいので、使い方も悪いのか、まだ消えません。 どうやったらこの横スクロールバーを消せるのでしょうか？ どなたか分かる方いらっしゃったら教えてください。

    • ベストアンサー
    • HTML
  • Webデザイン時のスクロールバー

    Xhtmlとcssでwebサイトを作っています。そのサイトは4ページで３つは高さ768pxでスクロールバーがでないのですが１つは情報量の違いで高さありスクロールバーがでます。その時にスクロールバーの分だけずれます。全ページがセンター固定です。 ページ移動をしたときに1ページだけ横に少しずれるので気になります。この状態を解決するにはどうすれば良いのですか？良い方法がなければずれは諦めようと思ってます。 わかる方がいたら教えて頂けたら幸いです。お願いします。

    • ベストアンサー
    • CSS
  • ウェブデザイン　paddingとwidthについて

    はじめまして。 http://www.e-washizu.co.jp/ こちらのサイトの横幅は７８６pxですが、 そのうち影画像分の６pxを引くと７８０pxです。 しかしcssを見たところ、 <div id=main>部分のwidth幅は７６０ピクセルになっていて、 padding-left:10px; padding-right:10px; この２つの値をあわせるとちょうど７８０pxになるのですが、 ここで疑問点が浮上しました。 え？paddingの値分widthの値から引くの？？と。。 私の作っていたサイトでは、 width幅を７６０pxではなく「７８０px、padding左右に10px」 と記述していましたがそれでデザインはちょうどピッタシになりました。 http://www.e-washizu.co.jp/のように、いったい何が違うのでしょうか？？ 分かる方、ご回答お願いいたします＞＜

    • ベストアンサー
    • HTML
  • 面白い切り口のニュ－スサイトを教えてください

    切り口が面白く他と一線を画しているようなサイトを 教えてください。 夕刊フジのサイトである「ZAKZAK」のような、 また情報系も含んで「探偵ファイル」のような サイトを教えてください。お願いいたします

  • CSSでのWebデザインについて。

    現在、Webページを作っておりCSSでデザインしようと思っているのですが http://jyouhouya3.sakura.ne.jp/　（情報屋さん。） このサイトや http://cowscorpion.com/　　（Cow&Scorpion） このサイトのように、大体見てもらえれば分かって頂けると思いますが、大きいテーブルの中でサイトを作っているとでもいいますか・・・・ サイト自体の幅が狭いとでもいいますか・・・ どう説明したらいいのかわからないです、すみません^^；　 して、Cow&Scorpionさんのソースを見てみまして この部分を作るタグが下記のようにでてきまして（多分間違っているでしょうが^^；） <base href="http://cowscorpion.com/"> <link rel="stylesheet" type="text/css" href="style.css" /> <div class="banner_top" align="center"><img src="/img/vbar.gif"></div> <table class="tablebody" cellspacing="0" cellpadding="0" border="0" align="center" width="730px" height="100%"> <td valign="top" class="i" colspan="2"> このままじゃ自分のサイトには貼れませんでした。CSSはサッパリなんでどこがどうなっているのか分かりません。 なお、HTMLは大体わかります。 とりあえずこの様にサイトを作るにはどのようにして、HTMLタグに書けばいいのでしょうか？　 お手数ですがお願いします。 乱文、長文すみませんでした。

    • ベストアンサー
    • CSS
  • 横スクロールのWebページを作りたい

    http://tympanus.net/Tutorials/WebsiteScrolling/ こちらのような、横にスライドするWebページを作ろうと思っています。 超横長な１ページを作って、スクロールで見える範囲を設定するという想像は出来ます。 このように、超横長な１ページはどのように作ればいいのでしょうか？ 普通でしたら、Photoshop等でモックアップを作り、スライスしていくのが一般的ですが 仮にこのサイトの大きさが8000pxだとすると、とんでもなくデザインしにくそうです… それと、仮にこのようなページを作る場合、慣れた人ならどのような手順で作っていきますか？ 回答よろしくお願いします。 ※スクロールのアニメーション自体はjQueryでできることは知っているので大丈夫です。

    • ベストアンサー
    • CSS
  • フレームと横スクロールを使ったサイト

    こんにちは。質問お願いします。 今、http://youmos.com/reference/smooth_scroll.htmlのサイト様のような スクロールを使ったサイトを作りたいと思っています。 内容は、上下に分かれたフレームで 上はメニュー、下はコンテンツ、 メニューのボタンを押すと、下のコンテンツが横スクロールして 表示されるというものです。 検索したのですが、いまいちわかりませんでした。 HPについて詳しい方！回答をお待ちしております＞＜

  • Webサイトのデザインは重視しますか？

    Webサイトを見るとき、やはりWebサイトのデザインって気になりますか？ それとも、読みやすく使い勝手が良ければ、Webサイトのデザインは気にならないですか？ 新しいWebサイトを作ろうと考えているのですが、どうもCSSが使いこなせないので、多少デザインが貧相でも、コンテンツとユーザービリティに注力しようと考えています。 やはり、デザインは気になりますか？ ご意見を聞かせてください。よろしくお願いいたします。

  • 【jquery】スクロールで背景画像もついてくる

    よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html　head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html　body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="contents"> 　～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="haikei"> <div id="contents"> 　～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。

  • webデザイン, コーディング

    webサイトのコーディングをしています。下のようなコーディングをしているのですが、div内に指定したbackgroundが<dl>内に反映されません。何故かわかりません。原因が分かる方教えてください！ <div style="background: url(....) repeat;"> <dl> <dt style="float: left">title</dt> <dd style="float: right">contents</dd> </dl> </div>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する