• 締切済み

ホームページ　スマホサイズ

ホームページを作成したのですが、スマホで表示したときに拡大されて表示されてしまします。 レイアウトを変えずにそのまま縮小し、画面サイズに合わせた状態で表示させたいのですが、どうすればいいでしょうか？ （wordpressで作っています。） 教えてください。

  • CSS
  • 回答数1
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

ものさしで計られると分かると思いますが、実際には縮小されて表示されていると思います。 Viewportで、なにも指定していなければ、スマホの解像度は高いので小さくなっているはずです。 　本来は1pxは約0.26mmですから200pxと指定してあれば、パソコンでは52cm幅ですが、スマホでは26cm程度になっているはずですが？？？ 　そのために、幅広固定で小さい文字で作っているとスマホでは読めない。 　スマホもパソコン用も同じデザインでしたら、当然リキッドでデザインされていると思いますから、通常は半分の実サイズで機種のデフォルトのサイズ、980px(PC用490px)とかでしたらそのサイズまでは文字は小さくなりますが表示されるはずです。 　それを避けたければ <meta name="viewport" content="width=device-width; initial-scale=1.0"> とviewportで縮小しない用に設定しておきます。 ★mediaqueryにしろviewportにしろ、あくまでページがリキッドで製作されていることが大前提です。 header,section,footer{width:100%;min-width:630px;margin:0 auto;max-width:980px;} header h1{width:100%;background-image:url();background-size:cover;} と言う風に・・

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

関連するQ&A

  • photoshopCSで、レイアウトの中の一部の画像を指定サイズで縮小

    photoshopCSで、レイアウトの中の一部の画像を指定サイズで縮小したいのですが、どうすればよいでしょうか？ 編集-パスを変形-拡大縮小で、手で動かしながら変形したのですが、 手動なので、なかなかうまくできません。 ・レイアウトの中の一部の画像を指定サイズで縮小するには、どうすればよいのでしょうか？ ・編集-パスを変形-拡大縮小まで行うと、サイズ指定の画面が出てくるのですが、別の作業をすると、すぐに消えてしまいます。これを常に表示しておくにはどうすればよいでしょうか？ ・このサイズ指定画面で、XYはピクセル(だと思う)なのですが、WHが％表示です。このWHをピクセル表示にするには、どうすればよいでしょうか？

  • ホームページ画面の大きさ

    初めまして＾＾ 私は、ｈｔｍｌで今ホームページを作成しているんですが、行き詰っています。 ＩＥでなんですが、画面を最大化していれば普通に表示されるんですが、お気に入りの画面を出したり画面を縮小したりすると、文字や表組みが画面のサイズに伴った表示になって、変なところで改行されてたり表組みがとんでもなく小さくなってしまったりと、めちゃくちゃな表示になってしまいます。 お気に入りを開いたり画面を縮小しても、きちんと表示されるホームページにする方法を教えてください。お願いします。

  • モバイル対応、スマホ対応のホームページはうざい！

    モバイル対応、スマホ対応のホームページって、なんか、うっとおしくないですか？ せっかく頑張って、スマホの画面が大きくなったのに、あんな不快な便利な元々のホームページとは違う、変なデザインもクソもない、スマホ用ページなんて、いつも見慣れているPCのページと２つの別のサイトのコンテンツの位置を覚えなければならず、とても不便です。 PC用のページだと文字が小さくなるから、ということらしいのですが、 ほんとうに、それが悪いか？って思います。だって、画面をダブルタップすれば一瞬で拡大し、もう一度タップすれば元に縮小して、ホームページ全体を見渡しながら好きな部分を拡大するというのが、スマホの醍醐味です。 何を考えて、あんな醜いスマホ用サイトを大量に見させるんでしょうね。メニューがサイドバーにないHPなんて不便で仕方ありませんよ。 ページの長いコンテンツの下まで移動しないと、メニューが出てこないんですよ！不便だったらありません。しかも、昔は、そういうページは、PC表示と切り替えられたのに、今では一切なくなりました。 ほんとうに、スマホの画面は大型化していくのに、うっとおしい話です。ガラケー用だけ、そうしてくれ。って思います。ガラケーからスマホに変えたのはPCと同じHPが見たいからです。 ほんと、そういうユーザの需要を汲み取って欲しくありませんか？

  • 自作ホームページをスマホで見るには？

    ホームページビルダー12を使って、ホームページを作成しました。 初心者のため、HTMLは一切いじらず、ページ編集画面でレイアウトしました。 パソコンだと、ページどうしがリンクしているのですが、 スマホで見てみると、リンクに設定したボタンをタッチしても反応しません。 唯一、リンクページに跳ぶのは、「コチラ」という文字をリンク設定したところだけでした。 原因と改善方法をお願いします。

  • 画面のサイズを標準に戻したい

    windows XPを使っていますが、画面の右上のアイコン（拡大、縮小、閉じる）が 表示されなくて、画面の文字が大きく表示されています。 画面のサイズが標準サイズに戻すためにはどうしたらいいでしょうか？

  • ホームページのレイアウトが崩れないようにするには？

    今、ホームページを手打ちで作ってます。 マニュアルを見て作っているのですが、初心者なので ちょっと困ったことがありました。 現在、800×600の画面サイズで作成中なのですが、 ブラウザを大きくしたときや、文字のサイズを大きくしたときに レイアウトが崩れないようにするためには、どんなタグを 追加したらいいのでしょうか？ 現在の状態は、画面の線が途切れたりしています。 どなたかご存知でしたら教えて下さい。 よろしくお願いいたします。

  • ワードプレス　パソコンとスマホでの画像表示サイズ

    現在、ワードプレスでホームページを作成しています。 画像化したデータでランディングページのようなものを作成したいのですが、パソコンでの表示とスマホでの表示がイメージどおりにできず困っております。 【現状】 パソコン→全画面表示となっており表示サイズが大きすぎてみずらい スマホ→なぜか画像右側に余白ができ、全画面表示とならない 【理想】 パソコン→画像両サイドに若干の余白をもたせ、見やすくしたい スマホ→全画面表示とすることで見やすくしたい 色々と調べながら""width="100%;" height="auto;"とすることで表示サイズを大きくすることまではできましたが、まだまだ理想の状況からは遠い状態です。 下記は作成中のページです。http://uchikuru.jp/%E3%83%A9%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%9A%E3%83%BC%E3%82%B8 どうすれば理想の状態に近くなるのかどなたか教えていただけないでしょうか？？

    • 締切済み
    • CSS
  • ホームページの作成について

    ホームページ作成初級者です。 現在、htmlとcssを使い簡単なホームページは作れるようになりましたが、 今後のステップとして、もう少し複雑なレイアウトの物を作ろうと考えています。 現在、作ったホームページはPCとスマホでレイアウトが同じ仕様になっています。 次に作るサイトは、レイアウトをそれぞれ変えて作ろうと思いますが、 作成手順としてはPCのレイアウトを100%完成させてから、 CSS等を変更してスマホ用のレイアウトを作成するといった手順がいいのか、 二つを同時進行で作っていった方がいいのかどちらがいいですか？ そもそもCSSを変更してレイアウトを変更するので合ってますか？ また、よく見かけるサイトでPCとスマホでURLを PC→ http://サイト名/ スマホ→http://サイト名/sp みたいにスマートフォンの階層？を一つ深くしてるのを見かけます。 そこでもう一つの質問なんですが、 グーグル等の検索サイトで検索し、 あるサイトをPCから開くとPC用のサイトが表示され、 スマホから開くとスマホ用のサイトが表示されますが、 それはサイト側で自動で判断して表示してくれるんでしょうか？ 初歩的な質問で申し訳ありませんが、よろしくお願いします。

  • ホームページビルダー作成にて画面サイズでつまづいています

    ホームページビルダー１３でホームページを作成しているのですが、ビルダー上では画面サイズを９４０×１２００で作成していているまして、横に長い画像を使用できる画面いっぱいまで伸ばしているのですが、webブラウザーで確認すると右にかなりの余白ができてしまう状態になります。私の理想としては見る側がどんなサイズの画面でもきちんと中央を基本にしたいと思っています。 文章だと伝えづらいので、目標イメージのサイトを書きに載せました。 そのサイトを参考にいうと、トップページの家が写ってる画像が私の場合左に寄っていて、右側に四分の一程空白ができてしまうのです。 作成ページ右いっぱいに画像を広げても空いてしまいます。 どういう処理をしたら下記サイトのようにキレイにレイアウトできるのでしょうか？どなたかわかるかたいらっしゃいましたら教えてもらえると助かります。よろしくお願いします。

  • ホームページビルダーに大きいサイズの画像を取り込むとレイアウトが壊れる

    ホームページビルダー（バージョン１０）にインターネットで得た画像を取り込みたい。問題点は下記の通りです。尚、ホームページビルダーは標準スタイルで編集しています。Windows XPを使用しています。 (1)画像サイズがばかでかいと、ホームページビルダー　の表枠がそれにつれ拡大する。画像サイズを自分の　希望するサイズに適正に縮小しても、表枠サイズは　それにつれて元のサイズにきっちりと“自動的”に　戻らない。自動的に戻るものなのか、戻らないもの　なのか。 　　イ）自動的に戻るとしたらそのやり方 　　ロ）自動的に戻らないとしたら元に戻すやり方 　　　　表枠の縮小をすれば簡単に縮小できないとお　　　　かしいというイメージを持っていますが・・ 　●現状ではあれやこれややっていると“偶然”元に　　戻ることもあるような状態で、非効率この上あり　　ません。ご教示いただければものすごく幸せにな　　ります。 　●ホームページビルダーは本年8月から使っている程　　度の全くの初心者です。その点よろしく、わかり　　やすく、猿でもわかるようにお願いします。 (2)画像サイズが事前にわかる方法はないのか 以上よろしく教えて下さい。お願いします！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する