フォントサイズ

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 19/76。

CSSでは、font-sizeプロパティは、HTML要素内のテキストのサイズを制御するために使用されます。

フォントサイズの指定に使用される一般的な単位は以下の通りです：

ピクセル (px): ピクセル単位でフォントサイズを指定する絶対単位です。これは、フォントサイズを設定するための最も単純で一般的に使用される単位です。

Ems (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を32pxに設定します。
<p>要素をターゲットにするCSSルールを記述してください。font-sizeを1.2emに設定します。
<div>要素をターゲットにするCSSルールを記述してください。font-sizeを120%に設定します。

チートシート

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

フォントサイズの一般的な単位：

ピクセル (px): フォントサイズをピクセル単位で指定する絶対単位
Em (em): 親要素のフォントサイズに基づいた相対単位
Rem (rem): ルート要素のフォントサイズに基づいた相対単位
パーセンテージ (%): 親要素のフォントサイズに基づいた相対単位

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

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

自分で試してみよう

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