CSSでemを使ってフォントサイズを設定する方法
CSSでfont-sizeプロパティを設定する際には、相対単位であるemを使用できます。emは親要素のフォントサイズを基準として計算されるため、テキストの大きさを柔軟に制御したい場合に特に便利です。
デフォルトでは、ブラウザの標準フォントサイズは16pxに設定されているため、以下のように換算されます。
- 1em = 16px
- 2em = 32px
- 0.5em = 8px
emは親要素のフォントサイズに連動して拡大・縮小されるため、レスポンシブデザインやアクセシビリティの観点からも推奨される単位です。
例1：emでフォントサイズを指定する
次の例では、クラス「demo」に対してfont-size: 1.3emを指定し、あわせて上線（overline）とその色も設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
出力結果
例2：div要素にemを適用する
続いて、別の例を見てみましょう。この例では、div要素に対してテキストの均等割り付け（justify）や背景色を設定し、フォントサイズには1.5emを指定しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: gray;
font-size: 1.5em;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>
出力結果
補足：emとremの違い
emは親要素のフォントサイズを基準とするのに対し、remはルート要素（html要素）のフォントサイズを基準とします。要素が入れ子になっている複雑なレイアウトでは、emの倍率が意図せず掛け合わされてしまうことがあります。そのような場合は、remの使用も検討するとよいでしょう。
-
CSSのfont-sizeプロパティをキーワードで設定する方法
CSSのfont-sizeプロパティは、絶対キーワードと相対キーワードを使って設定できます。キーワードを指定することで、テキストのサイズを意図した通りに柔軟に拡大・縮小できます。 構文 CSS font-sizeプロパティの基本構文は以下のとおりです。 セレクター { font-size: /*値*/ } CSSで使用できる標準キーワードの一覧は、次の表をご参照ください。 番号値と説明 1mediumフォントサイズを中程度（標準）に設定します。デフォルト値です 2xx-smallフォントサイズを極小に設定します 3x-smallフォントサイズ
-
CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説
CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si