• ベストアンサー
  • 困ってます

web制作 スマホでfont-sizeが崩れる

  • 質問No.7108487
  • 閲覧数961
  • ありがとう数2
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 94% (16/17)

web制作初心者です。
昨夜同じ質問をしたのですが、具体例などを入れて改めて質問します…!

この度、やっとホームページを開設することができました。
と思って喜んでいたのですが、スマートフォン(iPhone4)で見てみるとmacやwinでは見られなかったフォントサイズの崩れが起きています。

font関係はcssで指定していて、
font-familyは以下のように、

body {
font-family : osaka, 'arial', 'Meiryo UI', 'MS Pゴシック', 'MS PGothic','MS ゴシック','MS Gothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Helvetica', 'Arial','Courier', sans-serif ;
}

font-sizeは以下のように

.text8 {
font-size:0.7em;
line-height:2.3;
letter-spacing:normal;
   }

書いています。

全てが違うわけではなく、指定が効いている所と大きくなってしまっている所が混在していて、法則などはなさそうです。

例えば、

<dl class="news">
<dt><span>2011. 11. 01</span></dt>
<dd><div>ホームページを開設しました<br></div></dd>
</dl>

というソースでは「ホームページを開設しました」部分が大きくなってしまいます。

スマートフォンの設定を大きく変えているわけではないので、webの作り方に問題があると思うのですが、
PCでの見え方とスマートフォンも見え方を同じにするためになにかアドバイスがあれば、教えていただきたいです。

どうぞ、よろしくお願いします!

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

  • 回答No.1
  • ベストアンサー

ベストアンサー率 45% (5062/11035)

スマートフォンは、CSS2.1対応ですから、CSS2.1の書き方で統一したほうが良いでしょう。
.text8{}ではなく
*.text8{}
 font-sizeは継承されるプロパティですから、その下位にあるすべての要素に継承されますが、注意点はfont-sizeを、数値で指定すると、継承されるのはその数値であって、算出値ではないことです。

<dl class="news">
<dt>2011. 11. 01</dt>
<dd>ホームページを開設しました</dd>
</dl>
 余計なspanやdiv、さらには<br>なんて入れないように・・特にbrは一つの段落内での強制改行で通常のHTMLでは登場する機会はありません。段落を開けたい場合はスタイルシートで指定しましょう。
div.news dt{font-weight:bold;}
div.news{padding-bottom:1ex;}

「ホームページを開設しました」部分が大きくなってしまいます。」
どこかで、div要素かdd要素に対してfont-sizeを指定していませんか?

 firefox+firebugで、該当する要素にどのスタイルが継承されているかチェックしてください。示された情報では一般的な回答しか出来ません。

 
お礼コメント
szk04

お礼率 94% (16/17)

ありがとうございます。

cssのバージョンなど、基本的な知識や情報がまだまだ追いついていないようなので、勉強し直します。
公開したものをよりブラッシュアップしていく必要がありそうなことが分かり、大変参考になりました。
さっそく、ご教示いただいた事を反映してみようと思います!

本当に、ありがとうございました!
投稿日時:2011/11/02 20:50
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ