フォントサイズ

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

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

font のサイズを指定するために使用される一般的な単位をいくつか紹介します。

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

Ems (em)：親要素の font size に基づく相対単位です。たとえば、親要素の font size が 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>（paragraph）要素の Font サイズが 16px に設定され、すべての <h1> heading が 2.5em（親要素の Font サイズを基準とする）に設定され、ドキュメントの基本 Font サイズが 1.4rem に設定され、class small-text を持つすべての要素の Font サイズが 80%（親要素の Font サイズを基準とする）に設定されています。

チャレンジ

簡単

heading（<h1>）、paragraph（<p>）、division（<div>）を含む HTML ドキュメントが与えられています。これらの要素をスタイル設定するには、font-size プロパティを使用します。以下の手順に従ってください：

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

REQUIRED OUTPUT FORMAT: [翻訳したコンテンツ]

自分で試してみよう

<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>