• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:iPhoneでWebページに左余白を入れるには?)

iPhoneでWebページ表示を改善する方法

このQ&Aのポイント
  • iPhoneでWebページを閲覧する際に、文字が画面の左端に隠れてしまい読みづらい場合があります。
  • margin-leftを指定してもiPhoneの表示では効果がなく、文の左に空白を作ることができません。
  • blockquoteを使用することで左に余白を作ることができますが、余白が大きすぎて無駄が多いです。数ピクセルの空白を作る方法はありませんか?

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5069/13244)
回答No.2

> viewport の設定の問題ではないようです。iPhone は body tag のマージン設定を無視するように思えます。 私の手元の環境でテスとすると問題無くマージンが反映されますね。 iPhoneは5sでiOS8.3です。 ========== <!DOCTYPE html> <html lang='ja'> <head> <meta charset='UTF-8'> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>サンプル</title> <style type="text/css"> body { margin-left: 20px; } </style> </head> <body> あいうえお </body> </html> ========== 何か他のスタイル設定が邪魔してるんじゃないでしょうか? 開発者ツール等で、適用されているスタイルを細かく調べてみるといいと思います。

yamaoyapi
質問者

お礼

ご教示ありがとうございます。スタイルシートをチェックしたところBodyのマージ設定が矛盾しているところがありました。 スタイルシートでBodyのマージンをゼロとして、個別ページのBodyタグでマージンを(たとえば)10pxと設定していると、IEでは 個別ページのBodyタグでのマージン設定が有効(CSSの設定を上書き)で、iPhone では CSS のBodyのマージン設定が有効(個別ページのBodyタグを上書き)になるようです。 個別ページでの設定のほうが有効だろうという先入観からチェックを漏らしていました。 CSSでのBodyマージン設定を10pxとして、個別ページのBodyタグのマージンを指定しないことで、iPhone でも IE でもマージンが正しく表示できました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • t_ohta
  • ベストアンサー率38% (5069/13244)
回答No.1

viewport を正しく設定していないからマージンが無かった事にされているんじゃないでしょうか。

yamaoyapi
質問者

補足

viewport は <meta name="viewport" content="width=device-width, initial-scale=1.0"> と設定しています。 viewport の設定の問題ではないようです。iPhone は body tag のマージン設定を無視するように思えます。 blockquote のマージンの幅が設定できることが判りましたので、 blockquote { margin-left: 5px; } をスタイルシートに設定して、blockquote で対応することにしました。 ただ、blockquote をこのようにマージンの設定にだけ使うことはお勧めではないようです。代替手段が見つかるまでは、これで対応しようと思います。 回答ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 左余白を設ける

    HTMLにおいて、GIF画像ではなく、通常のテキストを書くと、 左端から字が書かれてるのですが、 少し左に余白を設けたい(2文字分空白など)のですが、 どうすればいいのでしょうか?

  • webページの上余白をなくす方法

    お世話になります。 webページ作成について困っております。 htmlで、ページ内の表中に画像を配置しています。表中の画像がそのページの一番上にくっついた状態(上部マージンなし)にしたくて、下記のようなタグをつけてみたのですが、わずかにまだ上に余白が残ってしまいます。 この余白を消して、ページの一番上から画像を表示させる方法を教えてください。 1.<body topmargin="0" marginheight="0"> この方法と、 2.スタイルシートで <style type="text/css"> <!-- body { margin: 0px; } --> </style> この2つを試してみましたが、わずかに上部に余白がのこってしまいました。 よろしくご回答お願いいたします。

  • ページ下部に大きな余白が…

    恐れ入ります。 ぜひ教えて下さい…m(_ _)m ホームページビルダー7を使っています。 ページ編集画面では問題ないのですが、 プレビューすると、いちばん下に大きな余白ができてしまいます。 解消する方法があれば、どなたかご教授いただけます でしょうか? 横に2分割した表(大)の中にすべての表、文字や イメージを入れて作っています。 左側にはさらに表を一つ入れてその中に文章、 右側には縦に表を3つほど入れて、そのいちばん下の ものの中に文章(小さい文字サイズで)をたくさん 打ち込んでいます。 その文字サイズと改行などのせいか表(大)の左側の 文章がかなり上の方で終わって、かなり空白ができる 状態でやっと、プレビュー画面で見て右側と左側の バランスがちょうど良くなります。 問題の、ホームページ自体の一番下にできる大きな 余白は、そのページ編集画面での左右のアンバランス さと、似たような高さのような気もするのですが、 属性変更の“セル”や“表”の高さの数値を変えて も、マウスでドラッグしてそれぞれの表のサイズを変えようとしても、大きな余白は消えません。 それどころか、あんまりいじると、今度は大きな余白が消えて、表(大)の中に大きな余白ができてしまいます。 どなたか解決方法をご存知の方、何卒アドバイスの程、よろしくお願い致します。

  • Webページの不要な余白の削除要領について

    Windows7を使用しています。最近のことですが、Webページが変だなと感じて、注視すると、ページ画面が下へ3センチほどずり落ちています。メニューバーと本文の間に目障りな空白スペースがあって、記事の範囲が狭くなっているのです。 スクロールバーを下げれば何も困ることではないのですが、画面を表示する度に嫌な気分なので、最初から余白なしのスッキリした画面で見れるようにしたいのです。「Webページ余白の削除」で検索をかけてみたものの、分かりません。 初心者を対象として対処要領を教えて下さい。

  • IEの余白とマージン

    IE限定で、あるページのみページ設定の余白以下にマージンを指定することは可能でしょうか。 雰囲気としては <style type="text/css"><!-- body { margin-top: -20px;} --></style> のように余白よりマイナスにする感じなのですが。 #やりたいのはTOPマージン。

    • ベストアンサー
    • CSS
  • Dreamweaver MX でリストを作成すると左に余白がでてしまう。

    DreamWeaver MX でCSSで画面左の位置にサイドメニューを作っています。 メニューは縦並びです。 メニューの項目を<ul><li>○○○</li></ul>のような形で記述し、CSSでulとliの左マージン・左パディングをそれぞれ0pxに指定しています。 ブラウザではメニュー項目の左に余白もなく問題なく表示されているのですが、DreamWeaver上の編集画面ではメニューの項目の左に余白がでてしまい、その分右にずれてレイアウトが崩れてしまいます。 編集画面でも左に余白がでないようにするには どうすれば良いでしょうか? お手数ですがご解答頂けますと幸いです。

  • ネットスケープで上に余白があいてしまいます

    お忙しいところすみません。どうしたら良いのか分からないので、教えていただけると大変うれしいです。 IEだと上の余白がなくちゃんと表示されるのですが、ネスケで見ると上にかなりの余白があいています。マージンを2パターンで指定しているのですが、なぜなのでしょうか? body { margin-left: 0px; margin-top: 0px; margin-height: 0px; margin-right: 0px; margin-bottom: 0px; } 何かタグが足りないのでしょうか? どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • texの余白設定が上手くできません

    texの余白設定が上手く出来なくて困っています。 以下のことを設定したいです。 ●上余白20mm、下余白20mm、 ●奇数ページ左余白30mm、右余白20mm ●偶数ページ左余白20mm、右余白30mm ●ページ下端からページ番号までの間隔15mm(下余白に含む) 現在下記をプリアンブルに書いています。 % 横余白 A4(210mm) \setlength{\textwidth}{160truemm} %本文の長さ(横) 210 -(30+20) = 160 \setlength{\fullwidth}{\textwidth} \setlength{\oddsidemargin}{30truemm}  % 奇数ページ 左マージン 10mm \addtolength{\oddsidemargin}{-1truein} % 奇数ページ 標準のマージン(1inch)を引く \setlength{\evensidemargin}{20truemm} % 偶数ページ 左マージン 20mm \addtolength{\evensidemargin}{-1truein}  % 偶数ページ 標準のマージン(1inch)を引く % 縦余白 A4(297mm) \setlength{\textheight}{257truemm} %本文の長さ(縦) 297 -(20+20) = 257 \setlength{\headheight}{0truemm} \setlength{\topskip}{0truemm} \setlength{\headsep}{20truemm} % 上余白20mm \setlength{\footskip}{15truemm} % ページ番号位置指定 \addtolength{\topmargin}{-1truein} 実行すると「Missing \begin{document}」というエラーが出ますが、pdfは生成でき、反映されているようです。 ちなみに\begin{document}の後に書くとエラーは出なくなります。 質問(1)この記述はプリアンブルに書くのではないのですか? 質問(2)実行してみると全ページとも左余白30mm、右余白20mmになってしまいます。上記で述べたように偶数ページと奇数ページで余白を変えたいです。どうしたら良いですか? ネットで調べているのですが、余白設定や図の挿入(図の上部分に空白ができるなど)が上手くいかず、大変困っています。 ご回答よろしくお願いします。

  • ページ下の余白をなくせない・・・

    GoLive csというソフトでホームページを作りはじめました。 下のようなホームページ↓ http://www.uchida-hp.com/ のように、上と下の余白を無くしたページを作りたいのですがどうしても下の部分の余白だけ無くすことができません。背景の色が表示されてしまいます。 ソフトのページのプロパティ設定で左右・高さのマージン設定を「0」にしていますがダメです。上の余白は無くなります。 レイアウトするテーブルやグリッドの設定を何か行なうのでしょうか? どなたか教えて下さい。 お願いします。

    • 締切済み
    • CSS
  • wordでの左インデントを一定にしたい

    wordで文章作成時左インデントが勝手に変わります 左余白を3文字とった場合、次に改行すると 勝手に余白が出来て左端からの文字が挿入できません いちいち書式設定の左インデントを0に戻しています どうすれば余白を取って、次の行に改行した場合インデント0で左から文字が打てますか?

このQ&Aのポイント
  • 質問者は【MFC-J737DN】の電話回線でのトラブルについて相談しています。電話がかかってきて、ダイヤルボタンでの数字の入力を求められますが、入力できない状況です。お使いの環境や接続方法、関連するソフト・アプリについても詳細にお知らせください。
  • 【MFC-J737DN】の電話回線でのトラブルについて質問があります。電話の着信時にダイヤルボタンで数字の入力を求められますが、入力ができない状況です。お使いの環境や接続されている方法、関連するソフト・アプリについて教えてください。
  • 【MFC-J737DN】の電話回線でのトラブルについての質問です。電話がかかってきて、数字の入力が必要ですが、ダイヤルボタンでの入力ができない状況です。お使いの環境や接続方法、関連するソフト・アプリについても詳細に教えてください。
回答を見る

専門家に質問してみよう