emで指定したフォントの大きさがページごと、ページの場所ごとによって違う現象の対処法を紹介します。
emで指定したフォントのサイズが、あるページでは12px程度で表示されたものが、別のページでは8px程度で表示されることがあります。
また、ページ内の場所によっても1emで指定したフォントの大きさが異なる場合があります。
emの単位は、親要素のフォントサイズに対するフォントの大きさになります。1em を指定すると、親要素のフォントサイズと同じフォントサイズになり、0.5em を指定すると親要素のフォントの高さ("M"の高さを基準)を1とする単位での大きさになります。そのため、親要素の大きさが違うと指定したフォントのサイズも違ってきます。
下記のHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.FrameA {
margin-top: 8px;
font-size: 8px;
width: 600px;
height: 160px;
border: 1px solid #ff6a00;
}
.FrameB {
margin-top:8px;
font-size:24px;
width:600px;
height:160px;
border:1px solid #0067f6;
}
.FrameEm {
font-size: 0.5em;
}
-->
</style>
</head>
<body>
<div class="FrameA">
フレームAです。
<div class="FrameEm">0.5emのフォントサイズです。</div>
</div>
<div class="FrameB">
フレームBです。
<div class="FrameEm">0.5emのフォントサイズです。</div>
</div>
</body>
</html>
FrameA のクラスのdiv枠と FrameB のクラスのdiv枠のそれぞれの内部に 0.5em のフォントサイズのテキストを表示しています。FrameAクラスは8pxのフォントサイズなので、内部の0.5emの文字サイズは4px程度になります。一方、FrameBクラスは24pxのフォントサイズなので、内部の0.5emの文字サイズは、12px程度になります。
上記のHTMLをWebブラウザで表示すると下図のページが表示されます。FrameA と FrameB の内部にある0.5emのテキストの文字の大きさがそれぞれの枠で違うことが確認できます。
ページ内で場所により文字の大きさが変化してしまうことを防ぐ場合には、emではなくrem の単位で指定する方法があります。
以下のHTMLを作成します。先のHTMLと同じコードですが、FrameA FrameB 内部の文字列を 0.5rem で指定しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.FrameA {
margin-top: 8px;
font-size: 8px;
width: 600px;
height: 160px;
border: 1px solid #ff6a00;
}
.FrameB {
margin-top:8px;
font-size:24px;
width:600px;
height:160px;
border:1px solid #0067f6;
}
.FrameRem {
font-size: 0.5rem;
}
-->
</style>
</head>
<body>
<div class="FrameA">
フレームAです。
<div class="FrameRem">0.5remのフォントサイズです。</div>
</div>
<div class="FrameB">
フレームBです。
<div class="FrameRem">0.5emのフォントサイズです。</div>
</div>
</body>
</html>
rem で指定すると、ルートノードのフォントサイズが基準になります。そのため、0.5rem はページ内のどの場所でも同じサイズの文字として表示されます。
WebブラウザでHTMLファイルを表示します。下図の表示結果になります。FrameA, FrameB それぞれの内部の 0.5rem のフォントの大きさは同じであることが確認できます。
