Q&A
「微妙にずれてしまいます」とはどこがどのようにどれくらいずれるのでしょうか。
レスポンシブのサイトを作成しているのですが、
PCで見るとdl定義リスト内ddにpタグで箇条書きリストを下記のように作り
2日目以降は2016年等の表記はしないので1日(月)の下にそろえるようにしています。
空白をマージンでとってずれていないのですが、いざサーバーにアップしてiphoneでみてみると微妙に
ずれてしまいます。
###ソースコード
HTML
1<dl> 2 <dt>日程</dt> 3 <dd class="days"> 4 <p>2016年 11月 1日(月) 日程1</p> 5 <p class="day">2日(火) 日程2</p> 6 <p class="day">3日(水) 日程3</p> 7 <p class="day">4日(木) 日程4</p> 8 <p class="day">5日(金) 日程5</p> 9 <p class="day">6日(土) 日程6</p> 10 <p class="day">7日(日) 日程7</p> 11 </dd> 12</dl>
css
1dt{ 2 position: relative; 3 width:6rem; 4 float:left; 5 letter-spacing:0.5em; 6 7} 8 p{ 9 display:block; 10 font-size: 13px; 11 letter-spacing:0.4em; 12 margin-bottom:60px; 13 padding-left:0.3em; 14} 15 16 17 18dd{ 19 margin-left: 8rem; 20 width:605px; 21 padding-bottom:1.5rem; 22} 23 24 25dd.days p.day{ 26 margin:0 0 0 7.1em; 27 padding:0; 28}
クロムのディベロッパーツールでは文字がずれずにそろっていましたが
サファリと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を設定して調節してるのですがこのようになってしまいます。
よろしくお願いします。
回答4件
0
1行目の途中までの記述をspanタグで挟んでそのspanにopacity:0で非表示にしたら綺麗にそろいました。結局本当の意味ではうまくいってないんですがとりあえず策です。
HTML
投稿2016/04/04 12:36
総合スコア8
0
試しにpaddingで空白を取ってみて、それでも同じ状況であれば文字サイズに起因する問題かなと思います。
CSS
1dd.days p.day { 2 margin-bottom: 0; 3 padding-left: 7.1em; 4}
文字サイズ( em )を基準にレイアウトを決めると、そういったずれが起こる事があります。OSや環境によって使用されているフォントが違う上にブラウザごとでも解釈が微妙に違いが出ることもあります。
投稿2016/04/04 06:32
総合スコア69407
ご回答ありがとうございます。
kei344さんのコードでやってみたのですが、デベロッパーツールでみるのではなく実機で確認するアイフォンだけは結果変わらずでした。ブラウザ毎に見え方が違うのでemをremに統一してみたのですがだめでした。ご回答ありがとうございます。
「em」ではなく、「px」にしても同じ現象が起きますでしょうか。
再度のご回答ありがとうございます。
pxにしても同じ現象が起きてしまいました。自分のアイフォンだけみたいなのでまた別の実機で検証できたらやってみます。ありがとうございました。
0
ベストアンサー
今手元に実機がないので憶測でしかありませんが、
①cssに
css
1body{ 2 -webkit-text-size-adjust: none; 3}
を指定してみてください。
僕もこのようなフォントサイズ系で躓いた時にこれで解決したことがあります。
text-size-adjustはOS側でフォントサイズを自動的に調整するプロパティです。
あともう一つ気になったのがpaddingやfont-size等の単位でremとemが混ざっているのはなぜでしょうか。
emに関しては、自分の親要素を基準に考えてしまうので子要素の子要素の子要素と指定していくとどんどんフォントサイズが変更していきます。
仮に全て0.5emを指定した場合、0.50.50.5という風に。。。
なのですべてremで指定したほうがいいかもしれないなぁと思います！
root要素のフォントサイズを基準に考えてくれるのがrem（root + em）ですので！
解答になっていないかもしれませんが、ちょっと試してみてくださいーい！
投稿2016/04/04 06:21
総合スコア1869
ご回答ありがとうございます。
-webkit-text-size-adjust: none;と
remとemが混合してたところをremに統一したのですが結果変わらずでした、
なぜかiphoneの実機以外はしっかり理想の形にそろってるのですが...
フォントの問題とかなんでしょうかわからずです。
ご回答ありがとうございました。
あ、すいません間違えましした
body{-webkit-text-size-adjust: 100%;}
でした！！！
これで僕の実機だと同じようになりましたよ！
再度のご回答ありがとうございます。
body{-webkit-text-size-adjust: 100%;}してみたのですがやっぱりうまくきいてないみたいだったので1行目の途中までの記述をspanタグで挟んでそのspanにopacity:0で非表示にしたら綺麗にそろいました。結局本当の意味ではうまくいってないんですがとりあえずのです。
あなたの回答
tips
プレビュー
