• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:ブログとブラウザについて)

ブログとブラウザのレイアウトにズレが生じる問題の原因と解決方法

SpiceGirlの回答

  • ベストアンサー
  • SpiceGirl
  • ベストアンサー率69% (493/713)
回答No.1

font-size:9; これに大きさを示す単位が抜けております。 font-size: xx-large; font-size: x-large; font-size: medium; font-size: small; font-size: x-small; font-size: xx-small; 上記指定をピクセル指定すると font-size: 30px; font-size: 24px; font-size: 16px; font-size: 12px; font-size: 10px; font-size: 8px; となります。単位の確認をしてみてはどうでしょうか。

noname#12896
質問者

お礼

回答ありがとうございます。 ピクセルで合わせてみると、レイアウトがほぼ一致しました。 これでレイアウトの崩れが無くなりそうです。 ありがとうございました。

関連するQ&A

  • CSSでブラウザ毎のフォントサイズを統一するには

    IEとFireFoxなど、ブラウザによりフォントの初期サイズが違います。 IEのMideumがFireFoxではSmallに該当するようです。 pxなどの絶対サイズを利用せず、相対サイズで初期サイズをMidiumに統一対応したいと考えています。 何か良いcssハック方法はありませんでしょうか。

    • ベストアンサー
    • HTML
  • cssで指定した文字の大きさがIE6とIE7で違う

    cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました(微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています)。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか? ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。

  • ブラウザによって異なるフォントサイズについて

    ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。 具体的には、フォントのサイズが IE8<Safari<Firefox3 になっています。 価格.comなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。 スタイルシートに body { font:13px; *font-size:small; *font:x-small; } を書き加えてみましたがあまり変化はありませんでした。 どのようにすればいいのでしょうか?

    • ベストアンサー
    • HTML
  • ブログのレイアウトについて

    シンプルなブログを借り、日付やコメント欄を消して 1枚サイトのように見えるものを作っています。 画像を見ると質問内容が一目で分かるようになっているのでご照覧の上、 どこに何を書き加えれば希望レイアウトになるのか教えてください。 cssは初心者なので可能な限り丁寧にお願いします。 ※600px画像は縮小しない 現在css編集を開くと以下のようになっています。 FC2ブログの共有テンプレートのひとつです。 <STYLE TYPE="text/css"> <!-- body{ color: #4F0000; font-family: 'Verdana','MS Pゴシック'; font-size: 11px; line-height: 140%; margin:20px; } a{ color: #4F0000; text-decoration: underline; } A:hover{ color: #4F0000; text-decoration: none; } td{ color: #4F0000; font-family: 'Verdana','MS Pゴシック'; font-size: 10px; line-height: 140%; letter-spacing: 0; } .box{ color: #4F0000; font-family: 'Verdana','MS Pゴシック'; font-size: 11px; letter-spacing: 0; line-height: 120%; } .msg img{ border:0px; margin:0px 0px 0px 0px; display:inline; float:none; } .title{ font-family: 'Verdana','MS Pゴシック'; letter-spacing: 10px; font-size: 10px; line-height: 180%; } .small{ font-size: 8px; font-family: 'Verdana','MS Pゴシック'; } .r{ font-size: 10px; } --> body { background-image : url("背景画像.jpg"); background-repeat : repeat; background-position : 50% 50%; background-attachment : fixed; } img { vertical-align: baseline; } </STYLE> どう調べても希望通りにならないので何卒お願い致します!

    • 締切済み
    • CSS
  • IEと他ブラウザでの行間について

    CSSにてレイアウトを行っていますが、IEで表示したとき行間が詰まってしまいます。 全体的に狭くなってしまうのはもちろんなのですが、 たとえば文章と文章の間を<br><br>で一行開けた場合も、Firefoxなどでは -------------- 一行目 二行目 -------------- となってくれるのですが、IEだと -------------- 一行目 二行目 -------------- につまってしまいます。 作成環境はMacOSX、DreamweaverCS3 確認はmacでFirefox3、Safari3、Opera9.5、Netscape7.1です winでIE6、Firefox3です。 ブラウザ間の表示誤差をできるだけ少なくするにはどのような指定方法がよいのでしょうか? CSSのフォント関係の指定の部分のみ抜粋します。 html {font-family:'Verdana', sans-serif; color:#444444; font-size:66%; line-height:2.0; letter-spacing :0.2em; } これは小さなことなのですが、他にもIEでの表示でつまづくことが多いので困っています。

    • ベストアンサー
    • HTML
  • IE8ブラウザ側で文字サイズ変更できない

    Yahoo!開発チームが検証したフォントサイズ統一のCSSとして下記を記述しています。 body { font: 13px 'MS Pゴシック', 'MS-PGothic'; *font-size: small; *font: x-small; } 何故かIE8ブラウザ側の機能で文字サイズを変更しようとすると反応しません。 何かIE8用に記述が必要でしょうか?

    • ベストアンサー
    • HTML
  • ブラウザによってブログの文字フォントの大きさが変化する?

    ウェブリブログでブログをやっております。最近、自分のブログ を見て、発見したのですが、使用するブラウザによって、ブログ 本文のフォントサイズがまちまちで、見づらい・・・ 基本ブラウザはIE8です。これで本文を作成しておりますが Fire Foxで閲覧すると、フォントが若干大きくなって、変な ところで改行して、文章が見づらくなってしまいます。 基本ブラウザで作成した本文が他のブラウザで閲覧したときも 同じフォントサイズで見れるようにするにはどうした良いで しょうか???

  • seesaaブログ 横幅を最大に CSS編集

    seesaaブログのレイアウトの横幅を最大にしたいのですが、レイアウトが崩れてしまいます。 利用している、テンプレートは、シンプルオレンジ(右サイドバー)です。 次の部分を変更するだけでは、ダメなのでしょうか?アドバイスをお願いいたします。 以下のようなレイアウトを目指したいです。http://digitalkoukisin.seesaa.net/article/244271746.html #container{ text-align:center; margin: 0px auto 0px auto; padding:0px; background-position:right; width:800px;  ←ここ color:#856F51; font-size:12px; } 省略 #content { float:left; width:467px; text-align:center; } 省略 #links-left { } #links { font-weight:normal; width:253px; ←ここ float:left; margin-left:30px;

  • gooブログのフォントサイズについてなんですが・・・

    gooブログはCSSの編集ができるのでテンプレートのCSSを変えてフォントサイズを小さくしているのですが、英数字が極端に小さくなってしまうので悩んでいます。 HTMLでいう<font size=1>のサイズにしたいのですが、そうすると英数字が読めないほど小さくなってしまって・・・ CSSは↓です。 /* エントリー本文 */ .etBody { font-size: 8px; line-height:160%; word-break:break-all; text-align: left; } テンプレートはクリアホワイト左です。 10px、9pxだと大きすぎ、(どちらにしても英数字は小さくなってしまいます)8pxだと読めないほどになってしまい・・・ 他のブログではそんなことは無いので似たようにしたいのですが、できません。困ってます。 なにかアドバイスお願いします。

  • ブログ HTML

    グーグルでブログをしています。 公式のテンプレートを使用しているのですが、 記事の内容を自動的に真ん中にしたいのですがどうしたらいいでしょうか? body { background:$bgcolor; margin:0; color:$textcolor; font:x-small "Trebuchet MS", Trebuchet, Verdana, Sans-Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } この部分になにかいれるのでしょうか? 全くんの初心者です。 宜しくお願い致します。