游ゴシックがIEで上にずれる時のCSSでの対応方法

2019年1月21日2020年5月5日
この記事は最終更新から4年以上経過しています。内容が古くなっている可能性があります。

游ゴシックって綺麗ですよね。このブログでも使用しています。 ですが、游明朝も含む、游なんちゃら系のフォントをインターネットエクスプローラーで使用すると、上にずれてしまってカッコ悪い。。。

さすがIEですね。やってくれます。もうすぐ対応しなくてよくなると思うと気が楽ですが、最終バージョンのIE11などはまだまだシェアが高く無視できない状況です(執筆時においては)。そこで今回は、CSSのフォント指定で游ゴシックを使用した時にIEだけ上にずれてしまう時の対処方法を書いてみたいと思います。

主な対応方法は2つ

CSSだけで対応するとすると、考えられる方法は2つ。

  1. IEだけフォントを変える
  2. IEだけ高さを調整する

高さがずれて気になるのは、主に見出しなどの背景色やボーダーを付けた部分だと思います。大した手間でなければ、2の方法で1カ所ずつ高さを調整してやるとよいでしょう。また、修正箇所が多かったりして「そんなの無理!」とか「面倒くさい!」という場合は、IEだけフォントを変えてしまえばよいでしょう。

どちらの方法も、IEだけにCSSを適用させればいいわけですよね。ま、当たり前っちゃ当たり前ですが、これをどうやるのよ?って話ですよね。私も毎回忘れて調べてしまいます。

IEだけにCSS指定する記述法

CSSハックってやつですが、下のように書くとIEだけにCSSを適用させられます。IEのバージョンごとに指定したりもできますが、今回は游ゴシックのズレ対策なので、IE8~11まで対応の書き方です。

STARTの行とENDの行の間に、IE向けのCSSを記述しましょう。

これでフォントを替えるなり、高さズレの気になる箇所の padding-topを増やしてやるなりすれば、游ゴシックがIEでも綺麗になります。

最後に

この記事を書いている途中で気づいたのですが、このブログはこの記事でご紹介したような対応をしていませんでした。。。きっとIEで見たら、緑色の見出し部分はズレてカッコ悪くなっていた事でしょう。。。

ついつい仕事じゃないと手を抜いてしまいますね。この記事がみなさんに読まれる頃までには、修正してIEでも綺麗にしておこうと思います。

関連のある記事

HTMLのrubyがイマイチと感じた時にCSSでフリガナを付ける方法

HTMLのrubyがイマイチと感じた時にCSSでフリガナを付ける方法

記事を読む

【CSS初心者向け】均等割付を使ってテキストを両端揃えにして綺麗にみせるサンプルコード

和文におすすめのtext-align : justifyを使った両端揃えにして綺麗にみせるサンプルコード

記事を読む

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

記事を読む

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

記事を読む

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

目次へ