環境によって文字背景色の高さが変わる問題の解決法

デザインで時々文字に背景色を付けるデザインがありますが、これは素直にコーディングしてしまうと環境によって背景色の高さが全然変わってしまいます。

今回はそんな環境によって変わる文字背景色の高さを統一する方法をご紹介したいと思います。

結論

background-sizeを使用します。

具体的には

<p class="txt">それは十月無論この尊重帰りにおいてののためを進まだな。<span class="u-bgTxt">もちろん結果が相談者ははなはだこの発展んありまでに偽らてみだがは盲従受けなですので</span>、まだにはするたたなた。</p>

このようなマークアップに対して（.u-bgTxtを指定している箇所が背景色を付ける箇所）

.u-bgTxt {
  background: url('../images/bg_u_bgtxt.png') left center repeat-x;
  background-size: auto 1.2em;
  padding: 0.5em 0;
}

のような指定をします。

詳細

例えば、先ほどのマークアップに対して素直に

.u-bgTxt {
  background: #f1c40f;
}

のようなスタイルを当てたとします。

するとMac（フォントはヒラギノ角ゴ）では

このように表示されますが、Windows（メイリオ）では

このように表示されてしまいます。背景色の高さが全然違いますね。

「.u-bgTxt」に上下paddingを与えることで背景色を高くする方向には調整することが出来るのですが、背景色の高さはOSのみでなくブラウザ毎にも異なっていたので根本的に違う方法じゃないとダメでした。

そこで、冒頭に書いたように

.u-bgTxt {
  background: url('../images/bg_u_bgtxt.png') left center repeat-x;
  background-size: auto 1.2em;
  padding: 0.5em 0;
}

このように指定することで解決します。

「bg_u_bgtxt.png」は10px四方程度の付けたい色で埋めた画像です。これをbackground-sizeで高さを指定することでどの環境でも高さが同じになるようにしています。フォントサイズが変わってもちゃんと表示されるようにemで高さを指定しています。

paddingの指定は環境によってはbackground-sizeの高さ指定より低く表示されてしまうのを調整するための指定です。

こうするとMacでは

Windowsでは

となり、背景色が同じ高さで表示されるようになりました。

これで文字背景色も問題ありませんね！

以上、たにっぱでした〜