フォントサイズ

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 19/76。

CSSでは、font-sizeプロパティを使って、HTML要素内のテキストのサイズを調整します。

フォントサイズの指定によく使われる単位をいくつか紹介します。

ピクセル（px）：フォントサイズをピクセル単位で指定する絶対単位です。フォントサイズの設定に最も分かりやすく、一般的に使われる単位です。

エム（em）：親要素のフォントサイズを基準とする相対単位です。たとえば、親要素のフォントサイズが 16px の場合、1em は 16px、2em は 32px などに相当します。

Rem（rem）：ルート要素（<html>）のフォントサイズを基準とする相対単位です。親要素のフォントサイズの影響を受けないため、この単位を使うと文書全体で一貫性を保ちやすくなります。

パーセンテージ（%）: 親要素のフォントサイズを基準とする相対単位で、emと似ています。たとえば、親要素のフォントサイズが16pxの場合、100%は16px、150%は24pxに相当し、以下同様です。

例：

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

この例では、すべての<p>（段落）要素のフォントサイズは16pxに設定され、すべての<h1>見出しは2.5em（親要素のフォントサイズを基準とします）に設定され、ドキュメントの基本フォントサイズは1.4remに設定され、クラスsmall-textを持つすべての要素のフォントサイズは80%（親要素のフォントサイズを基準とします）に設定されます。

チャレンジ

簡単

見出し（<h1>）、段落（<p>）、および区分（<div>）を含むHTML文書が与えられています。font-sizeプロパティを使って、これらの要素にスタイルを設定してください。以下の手順に従います。

<h1>要素を対象とするCSSルールを記述します。font-sizeを40pxに設定します。
<p>要素を対象とするCSSルールを記述します。font-sizeを1.2emに設定します。
<div>要素を対象とするCSSルールを記述します。font-sizeを120%に設定します。

自分で試してみよう

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>