質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

PCではずれていないのにiphoneだと余白がずれる

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 8,405

score 8

レスポンシブのサイトを作成しているのですが、
PCで見るとdl定義リスト内ddにpタグで箇条書きリストを下記のように作り
2日目以降は2016年等の表記はしないので1日(月)の下にそろえるようにしています。
空白をマージンでとってずれていないのですが、いざサーバーにアップしてiphoneでみてみると微妙に
ずれてしまいます。

ソースコード

<dl>
     <dt>日程</dt>
        <dd class="days">
        <p>2016年 11月 1日(月) 日程1</p>
          <p class="day">2日(火) 日程2</p>
          <p class="day">3日(水) 日程3</p>
          <p class="day">4日(木) 日程4</p>
          <p class="day">5日(金) 日程5</p>
          <p class="day">6日(土) 日程6</p>
          <p class="day">7日(日) 日程7</p>
        </dd>
</dl>
dt{
  position: relative;
  width:6rem;
  float:left;
  letter-spacing:0.5em;

}
 p{
  display:block;
  font-size: 13px;
  letter-spacing:0.4em;
  margin-bottom:60px;
  padding-left:0.3em;   
}



dd{
  margin-left: 8rem;
  width:605px;
  padding-bottom:1.5rem;
}


dd.days p.day{
  margin:0 0 0 7.1em;
  padding:0;
}

クロムのディベロッパーツールでは文字がずれずにそろっていましたが
サファリとFirefoxは少しずれてしまいます。
何卒よろしくお願いいたします。

追記

どこがどのようにずれるとのことですが、
class="day"がついている pタグをこのようにしたいのですが

理想
2016年 11月 1日(月) 日程1
            2日(火) 日程2
            3日(水) 日程3
            4日(木) 日程4
            5日(金) 日程5
            6日(土) 日程6
            7日(日) 日程7

スマホ(iphone5)でみると
2016年 11月 1日(月) 日程1
       2日(火) 日程2
       3日(水) 日程3
       4日(木) 日程4
       5日(金) 日程5
       6日(土) 日程6
       7日(日) 日程7

margin-leftを設定して調節してるのですがこのようになってしまいます。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/04/04 12:54

    「微妙にずれてしまいます」とはどこがどのようにどれくらいずれるのでしょうか。

    キャンセル

  • 141h

    2016/04/04 14:50

    追記しました。よろしくお願いいたします。

    キャンセル

回答 4

checkベストアンサー

0

今手元に実機がないので憶測でしかありませんが、
①cssに

body{
  -webkit-text-size-adjust: none;
}


を指定してみてください。
僕もこのようなフォントサイズ系で躓いた時にこれで解決したことがあります。

text-size-adjustはOS側でフォントサイズを自動的に調整するプロパティです。

あともう一つ気になったのがpaddingやfont-size等の単位でremとemが混ざっているのはなぜでしょうか。
emに関しては、自分の親要素を基準に考えてしまうので子要素の子要素の子要素と指定していくとどんどんフォントサイズが変更していきます。
仮に全て0.5emを指定した場合、0.5*0.5*0.5という風に。。。

なのですべてremで指定したほうがいいかもしれないなぁと思います!
root要素のフォントサイズを基準に考えてくれるのがrem(root + em)ですので!

解答になっていないかもしれませんが、ちょっと試してみてくださいーい!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/04 16:03

    ご回答ありがとうございます。
    -webkit-text-size-adjust: none;と
    remとemが混合してたところをremに統一したのですが結果変わらずでした、
    なぜかiphoneの実機以外はしっかり理想の形にそろってるのですが...
    フォントの問題とかなんでしょうかわからずです。
    ご回答ありがとうございました。

    キャンセル

  • 2016/04/04 16:48

    あ、すいません間違えましした
    body{-webkit-text-size-adjust: 100%;}
    でした!!!
    これで僕の実機だと同じようになりましたよ!

    キャンセル

  • 2016/04/04 21:32

    再度のご回答ありがとうございます。
    body{-webkit-text-size-adjust: 100%;}してみたのですがやっぱりうまくきいてないみたいだったので1行目の途中までの記述をspanタグで挟んでそのspanにopacity:0で非表示にしたら綺麗にそろいました。結局本当の意味ではうまくいってないんですがとりあえずのです。

    キャンセル

0

試しにpaddingで空白を取ってみて、それでも同じ状況であれば文字サイズに起因する問題かなと思います。

dd.days p.day {
    margin-bottom: 0;
    padding-left: 7.1em;
}

文字サイズ( em )を基準にレイアウトを決めると、そういったずれが起こる事があります。OSや環境によって使用されているフォントが違う上にブラウザごとでも解釈が微妙に違いが出ることもあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/04 16:05

    ご回答ありがとうございます。
    kei344さんのコードでやってみたのですが、デベロッパーツールでみるのではなく実機で確認するアイフォンだけは結果変わらずでした。ブラウザ毎に見え方が違うのでemをremに統一してみたのですがだめでした。ご回答ありがとうございます。

    キャンセル

  • 2016/04/04 16:11

    「em」ではなく、「px」にしても同じ現象が起きますでしょうか。

    キャンセル

  • 2016/04/04 21:33

    再度のご回答ありがとうございます。
    pxにしても同じ現象が起きてしまいました。自分のアイフォンだけみたいなのでまた別の実機で検証できたらやってみます。ありがとうございました。

    キャンセル

0

パット見は rem で指定しているので文字サイズによる影響に思えます。
もし指定しているならデバイスごとのfont-size を確認してみるといかがでしょうか。
それでなければ px 指定などに切り替えればずれなくなりそうです(☝ ՞ਊ ՞)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/04 21:37

    ご回答ありがとうございます。その方法で色々とやってみたのですがだめでした。
    実機の問題もあるかもなので別の実機で検証できたらしてみたいと思います。
    ありがとうございました。

    キャンセル

0

1行目の途中までの記述をspanタグで挟んでそのspanにopacity:0で非表示にしたら綺麗にそろいました。結局本当の意味ではうまくいってないんですがとりあえず策です。
HTML
<dl>
     <dt>日程</dt>
        <dd class="days">
        <p>2016年 11月 1日(月) 日程1</p>
          <p><span class="day">2016年 11月</span> 2日(火) 日程2</p>
          <p><span class="day">2016年 11月</span> 3日(水) 日程3</p>
          <p><span class="day">2016年 11月</span> 4日(木) 日程4</p>
          <p><span class="day">2016年 11月</span> 5日(金) 日程5</p>
          <p><span class="day">2016年 11月</span> 6日(土) 日程6</p>
          <p><span class="day">2016年 11月</span> 7日(日) 日程7</p>
        </dd>
</dl>
CSS 
 span.day{
opacity:0}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る