MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】

游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】

公開日:2019年03月30日
最終更新日:2022年01月17日
オンスタ運営
マークアップ
デザイン
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > 游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
このエントリーをはてなブックマークに追加
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

フォントはデザインの印象を大きく左右するとっても大切な要素なのですが、WEBサイトで表示させる際は使用ブラウザや所持しているフォントなどなど、閲覧環境に左右されるので特に注意する必要があります。 游書体が出る前はWindowsとMacでWEBサイトのfont-familyを使い分ける必要があり、製作者側のMacパソコンではヒラギノでびしっと決まってるのに、Windowsで確認するとメイリオで「なんか違う・・まあ仕方ないか・・」となっていましたね・・。 そしてWindows8.1、OS X Mavericks以降のmacOSに標準搭載されるようになり、やっとfont-familyを統一することができるように! しかし、游ゴシックをWindowsで表示させるにはいろいろな問題が・・・ 問題というよりは、同じ游ゴシックを使っているつもりでも実はWindowsとMacでは仕様が若干違うので表示に違いが生まれてしまうのです。 例えば、Macで見た游ゴシックと、Windowsで見た游ゴシックではフォントのweightが若干違うと感じることがありませんか? これは、WindowsとMacでインストールされている游ゴシックのweight(太さ)が違うのが原因です。
Windowsの游ゴシックにはLight(細字)、Reguiar(標準)、Medium(中字)、Bold(太字)と4種類のweightがあるのですが、MacにはMedium(中字)とBold(太字)しかありません。
游ゴシックを開発した「字游工房」様のサイトでOS別に搭載されている游書体の一覧を見ることができます。
この違いによってMacの標準サイズ「Medium」で表示させている游ゴシックが、Windowsの標準である「Regular」で表示されてしまうので、一回り細いフォントとなってしまうのです。 (こちらについても対策することができるのですが、今回は割愛させていただきます!) このようにまだまだWEBでの使用に問題がある游ゴシック。 その問題の中から、意外とMacユーザーには知られていない游ゴシックのテキストをIEで表示すると謎の余白ができるという問題について【検証と解決策】を書いていこうと思います。

WEBサイトで游ゴシックを使うときの問題点

今回の問題 - - - - - - - - - IEで表示させる際テキストの下に余白ができてしまう(上にずれてしまう)

ざきやまが最初にこのバグに気づいたのは游ゴシックを指定して制作したWEBサイトのブラウザチェックをしている時でした。 IEで表示した際にボタンの表示が崩れている・・! その時のスクショはないのでこちらは別のものですが、こんなかんじにずれていました。 明らかにIEで表示した方(右側のボタン)がおかしなことになっているのがわかりますね。 Macでは綺麗にpaddingを揃えたはずなのになぜ!!!!!!
よくよく見るとボタンだけではなく游ゴシックのテキストが全体的に、2pxほど上寄りになっている・・。 通常の段落テキストであればそんなに気にならないのですが、borderで囲われているボタンや見出しなどはどうしても気になってしまう・・。 しかもfont-sizeに比例して余白も大きくなってしまうようです。

▼ どのくらい余白ができるのか検証してみました

▼ さらにfont-sizeを大きくして検証 borderで囲んだデザインは1,2pxの差で美しさをそこなってしまうので、結構な困り者。

原因

原因は・・・不明。のようです。 IEのバグか、游ゴシックのバグかも特定されておらず、当然原因不明なので解決策もなく、製作者側で一手間加えて対策するしかないようです。

対策

(1) CSSハックでIEのみfont-familyをメイリオにする 結局メイリオかよwというかんじですが、安定を求めるならIEのみメイリオを指定しましょう。 下記のようにCSSハックで調整するとIEのみメイリオの指定になります。

  (2) ボタンや枠付きの見出しなど目立つパーツは、CSSハックでIEのみpaddingを調節する。

(1)のように全体をメイリオに変えてしまうとデザインの印象は大きく変わってしまいます。それがいやだ!という場合は、ややめんどくさい作業ではありますが、明らかにズレが目立つ小さめサイズのボタンや、backgroundを指定した見出しなどは IEのみpaddingを上に多めにとるなどの調整をします。 ざきやまもなるべく心がけるようにしています。 一般のユーザーの方はIEやEdgeで閲覧する人が多いでしょうからね・・。 Windows、Macどちらも同じフォントで表示させることができ、とっても見やすい游ゴシックなのに、IEがまたまた足をひっぱっていますね(怒) Windows7のサポートが切れる2020年までは、IEでも綺麗に表示させることを心がける必要があるので、あと2、3年は一手間加えて対応していきましょう!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webデザイナー、DTPデザイナーが取れる資格まとめ
デザイン
公開日: 2019年03月30日
最終更新日: 2022年01月17日
Webデザイナー、DTPデザイナーが取れる資格まとめ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressの導入費用はいくら?相場を解説
WordPress
デザイン
公開日: 2018年11月23日
最終更新日: 2018年11月23日
WordPressの導入費用はいくら?相場を解説
  • # WordPress
  • # 導入
  • # 費用
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイン制作で、色を選ぶのに困っていませんか?
デザイナー
デザイン
公開日: 2018年04月13日
最終更新日: 2018年04月13日
デザイン制作で、色を選ぶのに困っていませんか?
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
Webデザイン
テクノロジー
ホームぺージ更新
マークアップ
設計
公開日: 2018年02月16日
最終更新日: 2018年02月16日
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
デザイン
公開日: 2018年03月30日
最終更新日: 2018年03月30日
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webデザイナーになるための必要になる技術スキル7選について学ぶ方法!【基礎知識】
デザイナー
デザイン
公開日: 2020年06月15日
最終更新日: 2020年06月15日
Webデザイナーになるための必要になる技術スキル7選について学ぶ方法!【基礎知識】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
デザイン
公開日: 2020年10月12日
最終更新日: 2020年10月12日
初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
h.yamaguchi

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
パンフレット・リーフレットの違いと活用方法
デザイン
パンフレット
公開日: 2018年09月06日
最終更新日: 2022年01月17日
パンフレット・リーフレットの違いと活用方法
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
制作現場で使えるバナー制作のワークフロー
デザイン
公開日: 2017年02月16日
最終更新日: 2022年01月17日
制作現場で使えるバナー制作のワークフロー
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webサイトで取り入れたい!効果的な「写真」の使い方
Webデザイン
デザイン
公開日: 2017年12月15日
最終更新日: 2017年12月15日
Webサイトで取り入れたい!効果的な「写真」の使い方
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。