メイリオとＭＳ Ｐゴシックの違い
windows VISTA以降でデフォルトで搭載されるフォント「メイリオ」とVISATA以前のフォント「ＭＳ Ｐゴシック」の違いがあります。
Webサイト構築する際、違いに注意しないとレイアウトが壊れる可能性があります。
下記の検証するタグに、border:1px solid red;をつけています。
ボーダーの中の枠のサイズを計測しています。
Pタグでの検証
メイリオの場合
Internet Explorer7：27px FireFox3：24px
ＭＳ Ｐゴシックの場合
Internet Explorer7：18px FireFox3：19px
H1タグでの検証
メイリオの場合
Internet Explorer7：54px FireFox3：48px
ＭＳ Ｐゴシックの場合
Internet Explorer7：37px FireFox3：33px
H1タグのフォントサイズを80%にして検証
メイリオの場合
Internet Explorer7：22px FireFox3：20px
ＭＳ Ｐゴシックの場合
Internet Explorer7：14px FireFox3：15px
検証結果
メイリオは、ＭＳ Ｐゴシックより上下の空きを大きくとってしまいます。
高さを固定した環境じゃないとレイアウトが壊れる場合、注意した方がいいです。
この記事に関連している、
ブログランキングに参加しています。記事がよかったと思ったらクリックお願いします。
（他のいいブログも探すこともできます。）
トラックバック(0)
このブログ記事を参照しているブログ一覧: メイリオとＭＳ Ｐゴシックの違い
このブログ記事に対するトラックバックURL: http://www.zoezoe.net/manager/mt-tb.cgi/736
コメントする
- SEOに有効なディレクトリ登録・検索エンジン登録サービス
- PHPで扱えるファイルマネージャー（FM-V / File Manager - Valet）
- メイリオとＭＳ Ｐゴシックの違い
- CSSハックまとめ
- Movable Typeで携帯電話での投稿（モブログ）：ubicast Mail Blogger
- Movable Typeで記事の「記事の続き」を表示する（MTEntryMore）
- Movable Typeで記事の「本文」を表示する（MTEntryBody）
- Movable Typeで記事の「タイトル」を表示する（MTEntryTitle）
- HTML・CSSタグの変換用辞書ファイル
- クリックで画像を切り替えるjavascript
- MTEntriesに関するタグの使い方（Movable Type）
- 画像メニューをCSSで作る（CSSでマウスオーバー）
- 文字サイズを小さく、文字サイズを大きくするjavascript
- メニューを画像のように使う（CSSでマウスオーバー）
- 複数のチェックボックスにチェックする入力支援javascript
- JavascriptのみでRSSを表示するGoogle AJAX Feed API
- .htpasswdファイルの管理・編集するCGI
- Firefoxでmixiにログインできなくなった場合
- ClickHeatでクリック位置のヒートマップ：ホームページのどこをクリックしているかの統計
- 見出しのサンプル集
- PPC忍者：マーケティングに重要なPPCを調べるソフト
- CSSで写真を綺麗に・アルバムのように見せる表現
- アフィリエイトの登録について
- 検索キーワードチェックツール SEO対策
- ぞえ式web制作学(ホームページ制作学)：制作に必要なソフト
- カウンターを置く理由を考える
- やさしいブラウザ webサイトのバリアフリーチェック
- W3CのHTMLの妥当性検証「The W3C Markup Validation Service」
- グーグルサイトマップ(Google Sitemap)用のXMLを作成する方法
- webサイトのコンテンツツリー、フォルダとファイル構造を取得する方法
- さくらインターネットでMovable Type4の拡張子をPHPでする方法
- 観光 [8]
- 東京都文京区 [62]
- 東京都新宿区 [2]
- 東京都渋谷区 [1]
- 東京都中央区 [9]
- 東京都港区 [3]
- 東京都目黒区 [1]
- 東京都品川区 [1]
- 東京都千代田区 [11]
- 東京都豊島区 [3]
- 東京都台東区 [7]
- 東京都日野市 [1]
- 東京都板橋区 [2]
- 東京都立川市 [1]
- 東京都八王子市 [1]
- 兵庫県高砂市 [142]
- 兵庫県姫路市 [37]
- 兵庫県加古川市 [6]
- 兵庫県小野市 [5]
- 兵庫県加東市 [4]
- 兵庫県赤穂市 [2]
- 兵庫県たつの市 [1]
- 兵庫県神戸市 [6]
- 兵庫県朝来市 [3]
- 兵庫県明石市 [2]
- 兵庫県佐用郡 [8]
- 兵庫県西脇市 [1]
- 兵庫県宍粟市 [2]
- 兵庫県豊岡市 [1]
- 京都府右京区 [5]
- 京都府左京区 [2]
- 京都府中京区 [1]
- 香川県 [3]
- 高知県 [2]
- 鳥取県 [1]
- 千葉県 [1]
- 大阪府 [2]
- 三重県 [5]
- 広島県 [5]
- 山口県 [4]
- 静岡県 [1]
- 奈良県 [1]
- 愛知県 [3]
- 東京都多摩市 [1]
- 商品検証・レビュー [2]
- web・PC
- 動画 [1]
- 日記 [83]
- 夢日記 [1]
- イントルーダークラシック
- ツーリングに便利なグッズ紹介
- バイク・車用ナビ「nav-u NV-U3C」
- うさぎ「ネザーランド ドワーフ」
- MTEntriesに関するタグの使い方（Movable Type）
- 東京都の情報
- 兵庫県高砂市の情報
- 観光：大和ミュージアム（呉市海事歴史科学館）（広島県呉市宝町）
- グルメ：白山ラーメン（東京都文京区）
- イベント：第39回 神楽坂まつり～ゆかたでおいでよ神楽坂～（東京都新宿区）
- イベント：小石川植物園で咲いた世界一大きな花「ショクダイオオコンニャク」（東京都文京区）
- グルメ：天ぷら 天藤（東京都台東区）
- イベント：第25回 文京朝顔・ほおずき市（東京都文京区）
- イベント：神保町ワンピースカーニバル（ONE PIECE）（東京都千代田区）
- 文京区のラクーアから見えるスカイツリー
- グルメ：白山くれーぷ（東京都文京区）
- イベント：駒込大観音 光源寺 四万六千日 ほおずき千成り市（東京都文京区）
- 全てを表示
- 2010年8月 (1)
- 2010年7月 (10)
- 2010年6月 (2)
- 2010年4月 (1)
- 2010年3月 (3)
- 2010年2月 (13)
- 2010年1月 (6)
- 2009年12月 (15)
- 2009年11月 (23)
- 2009年10月 (15)
- 2009年9月 (4)
- 2009年8月 (6)
- 2009年7月 (27)
- 2009年6月 (34)
- 2009年5月 (17)
- 2009年4月 (26)
- 2009年3月 (23)
- 2009年2月 (13)
- 2009年1月 (6)
- 2008年12月 (3)
- 2008年11月 (17)
- 2008年10月 (11)
- 2008年9月 (4)
- 2008年8月 (15)
- 2008年7月 (15)
- 2008年6月 (28)
- 2008年5月 (36)
- 2008年4月 (29)
- 2008年3月 (7)
- 2008年2月 (7)
- 2008年1月 (19)
- 2007年12月 (36)
- 2007年11月 (61)
- 2007年10月 (192)
- 2007年9月 (137)
- 2007年8月 (34)
- 2006年7月 (2)
このブログを購読