質問: 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; } 書いています。 全てが違うわけではなく、指定が効いている所と大きくなってしまっている所が混在していて、法則などはなさそうです。 例えば、 2011. 11. 01 ホームページを開設しました というソースでは「ホームページを開設しました」部分が大きくなってしまいます。 スマートフォンの設定を大きく変えているわけではないので、webの作り方に問題があると思うのですが、 PCでの見え方とスマートフォンも見え方を同じにするためになにかアドバイスがあれば、教えていただきたいです。 どうぞ、よろしくお願いします!
回答: スマートフォンは、CSS2.1対応ですから、CSS2.1の書き方で統一したほうが良いでしょう。 .text8{}ではなく *.text8{} font-sizeは継承されるプロパティですから、その下位にあるすべての要素に継承されますが、注意点はfont-sizeを、数値で指定すると、継承されるのはその数値であって、算出値ではないことです。 2011. 11. 01 ホームページを開設しました 余計なspanやdiv、さらにはなんて入れないように・・特にbrは一つの段落内での強制改行で通常のHTMLでは登場する機会はありません。段落を開けたい場合はスタイルシートで指定しましょう。 div.news dt{font-weight:bold;} div.news{padding-bottom:1ex;} 「ホームページを開設しました」部分が大きくなってしまいます。」 どこかで、div要素かdd要素に対してfont-sizeを指定していませんか? firefox+firebugで、該当する要素にどのスタイルが継承されているかチェックしてください。示された情報では一般的な回答しか出来ません。