序章

CSSを使用してHTMLをスタイリングする場合、選択できるサイズ単位はたくさんあります。 これらの単位は、表示されるテキストの大きさ、コンテナーの幅、または列間のスペースの大きさを判別するのに役立ちます。 さまざまなユニットのそれぞれには、開発者やWebサイトのデザインにとって価値のある機能的な強みがあります。 どのユニットが状況に最も適しているかを知ることは、柔軟でアクセス可能なWebサイトを作成するのに役立ちます。

このチュートリアルでは、ピクセルについて学習します（px）、パーセント（%), em、 と rem 単位。 これらのユニットは、次のようないくつかのプロパティと組み合わせて使用します。 font-size, padding, border, margin, width、 と max-width 各ユニットの違いと強みを学ぶために。

前提条件

  • ローカルマシンに次のように保存されたHTMLファイル index.html 選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLでWebサイトを構築する方法シリーズを試してみてください。
  • CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
  • セレクターを使用して、CSSを使用してスタイルを検索してHTML要素に適用した経験。 詳細については、CSSチュートリアルでスタイルを設定するHTML要素を選択する方法を確認してください。
  • CSS チュートリアルでフォント、サイズ、および色を使用してテキスト要素のスタイルを設定する方法を読むことで得られるCSSフォントプロパティの知識。

HTMLとCSSの設定

最初のセクションでは、チュートリアル全体のすべてのスタイル設定の基礎としてHTMLを設定します。 さらに、チュートリアルのスタイルを作成するために使用するCSSファイルを作成します。

開始するには、開きます index.html テキストエディタで、次のHTMLをファイルに追加します。

index.html
<!doctype html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>

次は <head> タグ、追加します meta このHTMLで使用される文字セット、ページのタイトル、 meta モバイルデバイスでのページの処理方法を定義するタグ、およびロードするCSSファイル（ Google Fonts のフォントを含む）、および styles.css 次のセクションで作成するファイル。

への追加 <head> 次のコードブロックでは、タグが強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの指定が見つかります。

index.html
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>CSS Units</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="preconnect" href="https://fonts.gstatic.com" />
		<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
		<link href="styles.css" rel="stylesheet" />
	</head>
	<body>
	</body>
</html>

今では <head> 情報が揃ったら、次のステップは、スタイルを設定するコンテンツを追加することです。 <body> 鬼ごっこ。 このコンテンツは、ルイス・キャロルの不思議の国のアリスからの抜粋です。ここでは、アリスがキャタピラーとサイズについて話し合っています。 コンテンツはに含まれています <figure> 見出しと <blockquote> 抜粋が含まれています。 A <figcaption> elementはコンテンツを終了し、元の文学作品への引用を提供します。 さらに、いくつか <span> タグはダイアログ内にあり、強調と効果のためにスタイルを設定します。

次のコードから強調表示されたセクションを index.html ファイル：

index.html
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>CSS Units</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="preconnect" href="https://fonts.gstatic.com" />
		<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
		<link href="styles.css" rel="stylesheet" />
	</head>
	<body>
		<figure>
			<h3>Advice from a Caterpillar</h3>
			<blockquote>
				<p>The Caterpillar was the first to speak.</p>
				<p>“What <span>size</span> do you want to be?” it asked.</p>
				<p>“Oh, I’m not particular as to <span>size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span>you know</span>.”</p>
			</blockquote>
			<figcaption>Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
		</figure>
	</body>
</html>

スタイリング用にHTMLを準備する最後のステップは、適用することです class ページコンテンツのHTML要素の属性と値。 CSSでクラスセレクターを使用して、スタイルをターゲットにして適用します。 使用されるクラス名は、各要素のタスクと意図を説明するものです。

index.html
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>CSS Units</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="preconnect" href="https://fonts.gstatic.com" />
		<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
		<link href="styles.css" rel="stylesheet" />
	</head>
	<body>
		<figure class="excerpt">
			<h3 class="title">Advice from a Caterpillar</h3>
			<blockquote class="quote">
				<p class="quote-text">The Caterpillar was the first to speak.</p>
				<p class="quote-text">“What <span class="large">size</span> do you want to be?” it asked.</p>
				<p class="quote-text">“Oh, I’m not particular as to <span class="large">size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span class="small">you know</span>.”</p>
			</blockquote>
			<figcaption class="citation">Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
		</figure>
	</body>
</html>

これらの変更を必ず保存してください index.html ファイルを開き、Webブラウザでファイルを開きます。 次の画像に示すように、ブラウザがデフォルトで適用するスタイルはすでにいくつかあります。 また、Google Fontsのフォントは、CSSに含まれているにもかかわらず、CSSで定義されていないため、まだ表示されていません。 <head> 鬼ごっこ。

最後に、 styles.css ファイルを作成し、エディターで開きます。 これは、チュートリアルの残りの部分で使用するファイルになります。 にフォントを設定します body セレクター font-family: 'Averia Serif Libre', serif;. これにより、ページ上のすべての要素にフォントが適用されます。

styles.css
body {
	font-family: 'Averia Serif Libre', serif;
}

変更をに保存します styles.css その後、リロードします index.html ブラウザで。 次の画像に示すように、コンテンツは古い印刷された本のようなフォントを使用するようになります。

このセクションでは、CSSでユニットを操作するために必要なすべてのコンテンツとマークアップを使用してHTMLを設定します。 あなたはまたあなたを作成しました styles.css ファイルに追加され、すべてのコンテンツで使用される新しいフォントで追加されます。 次のセクションでは、 px コンテンツへのスタイルの適用を開始するユニット。

ピクセルユニットの使用 px

このセクションでは、ピクセルを使用した初期スタイルのコーディングに焦点を当てます（px） 単位。 px はウェブ上でよく知られているユニットです。 このチュートリアルで説明されている他のユニットとは異なり、 px ユニットは物理ベースのユニットです。そのサイズは、デバイスのディスプレイの1つのピクセルの物理サイズによって決定されるためです。

開ける styles.css テキストエディタで、のクラスセレクタを作成します <figure> 要素の class と .element. このセレクターブロックでは、レイアウトと美的スタイルを次のように定義します。 margin プロパティをに設定 20px auto, padding に設定 20px、 border に設定 1px solid black、 max-width の 480px、そして最後に box-sizing プロパティをに設定 border-box:

styles.css
body {
	font-family: 'Averia Serif Libre', serif;
}

.excerpt {
	margin: 20px auto;
	padding: 20px;
	border: 1px solid black;
	max-width: 480px;
	box-sizing: border-box;
}

The margin 適用されます 20px コンテナの上下と auto コンテナを水平方向に1回中央に配置するように設定します width 値が宣言されます。 次に、 padding プロパティが提供します 20px コンテナの内部の両側のスペースの。 そうして border: 1px solid black; 適用します 1px コンテンツの定義された境界として、コンテナ全体の周りに太い黒の境界線。 The max-width 画面が小さい場合にコンテナの幅を柔軟にすることができます 480px、しかし、コンテナが 480px 幅。 最後に、 box-sizing: border-box; コンテナのボックスモデルを変更して、最大幅が 480px.

これらの追加をあなたに保存します styles.css ファイルを作成し、ブラウザにジャンプして更新します index.html. コンテナの内側の上部に余分なスペースがあります。これは、デフォルトの .title エレメント。 次の画像を調べて、ブラウザでこれがどのように表示されるかを確認してください。

次に、に戻ります styles.css エディターで、クラスセレクターを作成します <h3> 要素と class の値 title. 現在、コンテンツにはブラウザのデフォルト値があります font-size, font-weight、 と margin. まず、 font-size に 20px、ブラウザのデフォルトサイズより少し大きいです。 次に、 margin の値を持つプロパティ 0 0 10px、のマージンを適用します 0 上に、次にマージン 0 左右に、そして最後に 10px タイトルの下部にマージン。 値が 0 CSSの場合：

styles.css
...
.title {
	font-size: 20px;
	margin: 0 0 10px;
}

The <blockquote> コンテンツはブラウザのデフォルトで左右にインデントされます margin 価値。 この設計のニーズのために、 margin 削除することができます。 ターゲティングするクラスセレクターを作成する .quote そしてそれに与える margin の値を持つプロパティ 0. これにより、コンテンツをコンテンツの幅全体に拡張できます。 <figure> 容器：

styles.css
...
.quote {
	margin: 0;
}

変更をに保存します styles.css ファイルを作成してブラウザに戻り、 index.html ファイル。 The .title これで少し大きくなり、その上のギャップははるかに小さくなります。 引用内容もスペースを埋めるために拡張されました。 ブラウザで何が変わるかについて、次の画像を確認してください。

戻る styles.css テキストエディタで。 以来 blockquote コンテンツはの主な焦点です <figure>、ターゲットを絞って目立たせる quote-text とを適用します font-size の 24px. 次に、上下を設定して、各線の間に狭い休憩を入れます margin に 10px、を使用して margin 速記 10px 0. これにより、上部と下部がに設定されます 10px 右と左の値は 0:

styles.css
...
.quote-text {
	font-size: 24px;
	margin: 10px 0;
}

次に、抜粋に触発された視覚的な強調を適用するには、 <span> とともに class の属性 large を設定します font-size の 32px:

styles.css
...
.large {
	font-size: 32px;
}

設定後 .large テキスト、ターゲットとするクラスセレクターを作成します .small そしてそれに与える font-size の値を持つプロパティ 20px:

styles.css
...
.small {
	font-size: 20px;
}

これらの変更をあなたに保存します styles.css ファイルと更新 index.html ブラウザで。 抜粋の内容はサイズが大きくなり、少し近づきます。 さらに、「サイズ」という単語は主要なテキストよりも大きく表示され、「あなたが知っている」というフレーズは少し小さく表示されます。 次の画像は、これがブラウザでどのように表示されるかを示しています。

このセクションの最後のスタイリングについては、 styles.css テキストエディタでファイルします。 を対象とするクラスセレクターを作成します citation に適用されるクラス <figcaption> エレメント。 このコンテンツは、 <figure>、したがって、視覚的にはそれほど目立たないようにする必要があり、引用から明確に分離する必要があります。

追加する border-top の値で 1px solid #ccc 明るい灰色の境界線を付けます。 次に、 margin-top: 20px; と padding-top: 20px; 引用の最後の行と引用の最初の行から等距離に境界線を設定します。 これにより、必要な視覚的な分離が提供されます。 最後に、引用の内容を強調しないようにするには、 color の値を持つプロパティ #555 と font-size の 14px. これにより、他の黒いテキストとは対照的にコンテンツが明るい灰色になり、コンテンツが目立たなくなります。

styles.css
...
.citation {
	border-top: 1px solid #ccc;
	margin-top: 20px;
	padding-top: 20px;
	color: #555;
	font-size: 14px;
}

この追加をあなたに保存します styles.css エディター内のファイル。 次に、ブラウザに戻り、 index.html 次の画像に示すように、変更を表示するページ：

The px コンピュータ画面の物理的なピクセルによって定義された単位として始まりました。 これは、 10px 広くて 10px ハイボックスは、表示されたコンピューター画面で100ピクセルを使用しました。 高解像度ディスプレイでは、ピクセルがはるかに小さいため、ピクセル値が2倍になることがよくあります。つまり、 1px 画面上で4ピクセルを占めます。 これは、ピクセルサイズのソフトウェア操作です。 ピクセルの倍増は、非ネイティブの画面解像度を模倣した標準解像度のディスプレイで発生する可能性があります。つまり、解像度は画面上の物理的なピクセル数よりも高いか低いかを意味します。

デバイスのピクセルダブリングとユーザー設定により、 px 理想的な測定単位ではありません。 物理的な単位であることが意図されていますが、コンピューターで操作でき、要素が小さすぎたりぼやけたりする可能性があります。 サブピクセルレンダリングは、コンピューターが小数点を含むピクセル計算に遭遇し、ピクセル間で色をブレンドして以下の値を適用する場合の用語です。 1px、ぼやけたエッジを引き起こします。

このセクションでは、 px プロパティの値をページのコンテンツに設定する単位。 あなたはそれを学びました px 単位は物理単位ですが、コンピューターはその値を操作できます。 次のセクションでは、可能な場合はパーセント値を使用してコードをリファクタリングします。

パーセント単位の使用 %

このセクションでは、パーセント単位を使用します（%）HTMLページの要素にディメンション値を適用します。 とは異なり px 単位、パーセント単位は相対単位であり、画面の物理属性に依存しません。 代わりに、パーセント単位は、ピクセル値を生成するために計算する必要のある値の関係をブラウザーに提供します。 パーセント単位は、他の相対単位と同様に、ユーザーの個人用ブラウザー設定を含む多くの要因に基づいてスケーリングできるピクセル単位よりも優れています。 これにより、相対ユニットがアクセシビリティに有利になり、ユーザーがコンテンツを操作して使用するための最良のオプションが提供されます。

パーセント単位の最も有用なアプリケーションの1つは、 width プロパティ値。 あなたの styles.css テキストエディタでファイルを作成し、 width: 80%、および組織的な目的で、その行をあなたのすぐ上に追加します max-width 財産：

styles.css
...
.excerpt {
	margin: 20px auto;
	padding: 20px;
	border: 1px solid black;
	width: 80%;
	max-width: 480px;
	box-sizing: border-box;
}
...

コンテナは、480pxの幅に達するまで、親の幅の80 % o fになるため、これは強力な組み合わせです。この時点で、コンテナは成長を停止します。 レスポンシブWebデザインに精通している場合、概念の多くはこの組み合わせに基づいています。 The 80% 値を使用すると、画面サイズの幅に関係なく、コンテナの左右に間隔を空けることもできます。

パーセント単位を使用したので、それがどのように機能するかを確認するために、より多くの場所に適用してみてください。 交換することから始めます .excerpt セレクターの margin と padding パーセントのピクセル値。 これには、このチュートリアルの残りの部分で使用する式 size / context =resultが必要です。

この場合のサイズは 20 のために 20px の値 margin と padding. パーセント単位以降 margin と padding 幅のパーセンテージであり、 max-width 値は、おおよそのコンテキストを決定するのに役立ちます。 これにより、必要な式 20/480 が作成され、結果は0.041666667になります。 パーセントを処理する場合、使用する前にresultに常に100を掛けて、最終値 4.1666667％を作成する必要があります。 変更 20px の値 .excerpt セレクター 4.1666667% 代わりに、コードブロックの強調表示されたセクションに示されているように：

styles.css
...
.excerpt {
	margin: 4.1666667% auto;
	padding: 4.1666667%;
	border: 1px solid black;
	width: 80%;
	max-width: 480px;
	box-sizing: border-box;
}
...

変更をに保存します styles.css とリロード index.html ブラウザで。 ブラウザウィンドウの幅のサイズを変更してみて、 padding 価値はその後も成長し続けます .excerpt コンテナがヒットしました max-width. この効果の実際のデモンストレーションについては、次のアニメーションを参照してください。

これは望ましい効果ではない可能性がありますが、パーセント単位でどのプロパティが最適に機能するかを把握して確認することをお勧めします。

あなたに戻る styles.css エディターでファイルを作成し、 4.1666667% 戻る 20px:

styles.css
...
.excerpt {
	margin: 20px auto;
	padding: 20px;
	border: 1px solid black;
	width: 80%;
	max-width: 480px;
	box-sizing: border-box;
}
...

パーセント単位が非常に役立つ可能性がある次の領域は、 font-size 価値。 でパーセントを使用する font-size プロパティは、同じ式を使用して値を検索します。 に移動します .title あなたのセレクターブロック styles.css ドキュメントと font-size は 20px. 式size/ context = result から、これは 20px サイズです。 このシナリオのコンテキストはブラウザのデフォルトです font-size ドキュメントの場合、 16px. その場合、式は 20/16 になります。これはパーセントであるため、結果に 100 を掛けて、 125％の最終値を得る必要があります。 。 追加します 125% の代わりに値 20px. 意図したサイズを説明するコメントをコードに追加すると役立つ場合があります。

styles.css
...
.title {
	font-size: 125%; /* target size: 20px */
	margin: 0 0 10px;
}
...

次に、これと同じ式をに適用します .quote-text セレクター、 font-size の 24px. 24は16よりも150％大きいため、この値の結果は 150％です。 これをあなたに追加してください styles.css エディター内のファイル：

styles.css
...
.quote-text {
	font-size: 150%; /* target size: 24px */
	margin: 10px 0;
}
...

次に、パーセント値をに適用するには .large と .small セレクターには、 context 値は数式で変更できます。 ブラウザのデフォルト font-size は 16px、しかし両方 .large と .small 要素の内部でのみ発生します quote-text クラス。 これは、彼らの文脈がもはやないことを意味します 16px、 代わりに 24px. 現在 font-size 為に .large は 32px、の2倍のサイズです 16px 通常、 font-size だろう 200%. コンテキストが変更されたため、 16 ではなく、24の2倍になります。 したがって、適切な式は 32/24 である必要があり、これは1.333333333になります。

result を取得し、 100 を掛けてから、小数点以下を四捨五入してください。 133.3% 新しいために font-size 価値：

styles.css
...
.large {
	font-size: 133.3%; /* target size: 32px */
}
...

The .small セレクターは、 .large もはや16の係数ではなく、24の係数です。 この場合、式は 20/24 であり、次に100を掛けます。 結果は83.3％です。

styles.css
...
.small {
	font-size: 83.3%; /* target size: 20px */
}
...

最後に、同じ式をに適用します .citation セレクターの font-size. このコンテナはデフォルトに戻るので font-size 16 の方程式は、14/16になります。 resultに100を掛けると、最終的な値は 87.5％になります。

styles.css
...
.citation {
	border-top: 1px solid #ccc;
	margin-top: 20px;
	padding-top: 20px;
	color: #555;
	font-size: 87.5%; /* target size: 14px */
}

変更をに保存します styles.css テキストエディタで、リロードします index.html ブラウザで。 のピクセルバージョンの間に違いはありません font-size 値とパーセントバージョン。 ただし、オペレーティングシステムとブラウザはユーザーがデフォルトを変更するためのツールを提供するため、アクセシビリティの観点からは、これははるかに用途が広いです。 font-size. パーセントのような相対単位を使用すると、 font-size ユーザーの好みに比例してスケーリングします。

このセクションでは、パーセント単位を使用して作成しました padding, margin, font-size、 と width 相対的なプロパティ。 あなたは方法を学びました font-size 親要素に相対的です font-size そして、望ましい比率を計算するための式。 また、境界線の幅の値など、パーセント値が常に最良の選択であるとは限らないことも学びました。 次のセクションでは、パーセント単位で学んだことを取り入れて、より用途の広いものに適用します。 em 単位。

を使用して em 単位

このセクションでは、CSSをリファクタリングして、 em 単位。 パーセント単位と同様に、em単位は相対単位ですが、パーセントのベースがとは異なる場合に比べて、より一般的なベースがあります。 width また font-size. The em 完全に相対的です font-size、または継承 font-size 要素の。 たとえば、デフォルト font-size ブラウザでは 16px、作る 1em に相当 16px. パーセント単位から 1em に似ています font-size: 100%;; ただし、 width に設定されています 1em、次に計算された width だろう 16px 利用可能な全幅の代わりに。

注：emユニットが少し混乱する可能性があるいくつかの方法があります。 1つ目は、emユニットもある印刷タイポグラフィに関するものです。 これは、フォントの小文字の「m」文字のサイズに基づいています。 Web emユニットは、 font-size 代わりに値。 注意すべき2番目の領域は、 <em> HTML要素。 この要素はem単位とは関係ありませんが、テキストをイタリック体にして強調するために使用されるため、「強調」の略です。

使用を開始するには em ユニット、オープン styles.css テキストエディタで。

以来 em のみに関連しています font-size、パーセント単位よりも確実に多くのプロパティで使用できます。 に移動します .excerpt セレクターブロックを使用して、式 size / context = result を使用します。ここで、contextは16です。 これを上の値に適用します margin, padding, border、 と max-width プロパティ：

styles.css
...
.excerpt {
	margin: 1.25em auto;
	padding: 1.25em;
	border: 0.0625em solid black;
	width: 80%;
	max-width: 30em;
	box-sizing: border-box;
}
...

パーセント式とは異なり、 result 100を掛ける必要はありません。 代わりに、結果を取得して追加します em 最後にユニット。 のために 20px に margin と padding、方程式20/16は次のようになります。 1.25em. のために border の厚さ 1px、つまり 1/16 、つまり 0.0625em. の値を扱う場合 1px 厚みを調整する必要があるかどうかはあなた次第です。 必要がない場合は、そのままにしておいてください。 1px. 最後に、 max-width の 480px 480/16 になり、結果として 30em.

これらの変更をに保存します styles.css とリロード index.html ブラウザで。 これらの値はピクセル値と同じであるため、視覚的な変化はありません。

次に、 .title セレクター styles.css エディターで。 前のセクションから、 font-size 値は 125%. 式は同じなので em を掛けることを除いて、パーセント単位の場合と同じです 100、代わりに除算して小数点を返すことができます。 これは、 font-size 値はから変更されます 125% に 1.25em. 以来 em 値はによって定義されます font-size 与えられた要素の、他のすべてのインスタンス em 変更されました。 これの意味は 1em 今はと同等です 1.25em および他のすべての用途 em の内側 .title セレクターは font-size:

styles.css
...
.title {
	font-size: 1.25em; /* target size: 20px */
	margin: 0 0 10px;
}
...

これを実際に見るには、 em の値 margin. ここでは、下マージンがあります 10px. 以来 10px の半分のサイズです 20px、 と 1em 何にでも等しい font-size 値は、 0.5em 常に半分になります font-size. 交換できます 10px 為に 0.5em の中に margin 財産。 ここでの利点は、設計が変更された場合、 font-size 増加する必要があり、比率は維持され、下マージンは常に半分になります font-size 価値：

styles.css
...
.title {
	font-size: 1.25em; /* target size: 20px */
	margin: 0 0 0.5em; /* target size: 10px */
}
...

の概念を取る em に .quote-text そしてその <span> クラスのサイズを設定するには、方程式をさらに使用する必要があります。 size / context =resultの式を font-size、ここで、意図された値はと同等です 24px. これにより、次の値が得られます。 1.5em:

styles.css
...
.quote-text {
	font-size: 1.5em; /* target size: 24px */
	margin: 10px 0;
}
...

かどうかに関係なく font-size だった em、パーセント、またはピクセル、 font-size のサイズを定義します 1em. これは、 context 数式は次のようになります 24px 同じ式をに適用するため margin の .quote-text そしてその .large と .small クラスは、内部で使用されるため、 .quote-text エレメント：

styles.css
...
.quote-text {
	font-size: 1.5em; /* target size: 24px */
	margin: 0.41667em 0; /* target size: 24px */
}

.large {
	font-size: 1.333em; /* target size: 32px */
}

.small {
	font-size: 0.8333em; /* target size: 20px */
}
...

これらの方程式を実行するときは、お好みの小数点に自由に丸めてください。

最後に、 em の値 .citation セレクタ。 設定することから始めます font-size に 0.875em、サイズを維持します 14px. にもかかわらず font-size プロパティはセレクターブロックの下部にありますが、それでも 1em セレクターブロックの他のすべてのプロパティ。 これは、他のすべてのプロパティのコンテキストが 14 であり、16ではないことを意味します。 The 1px の厚さ border になります 0.071428571em、 また 0.071em 1000分の1に丸めると。 次に、 padding と margin の値 20px となります 1.428571429em、 また 1.43em 丸める場合：

styles.css
...
.citation {
	border-top: 0.071em solid #ccc;  /* target size: 1px */
	margin-top: 1.43em; /* target size: 20px */
	padding-top: 1.43em; /* target size: 20px */
	color: #555;
	font-size: 0.875em; /* target size: 14px */
}

変更をに保存してください styles.css 最後のセクションに進む前に。

このセクションでは、emユニットと、それがどのように基づいているかについて学びました。 font-size 要素の。 パーセント単位とは異なり、 em より多くのプロパティに予測どおりに適用でき、プロパティが互いに比例して変化する方法を提供します。 最後のセクションでは、 em 単位： rem.

を使用して rem 単位

最後のセクションでは、 rem ユニット、これは em 単位。 remの「R」はroot要素を表します。これは、Webページの最上位要素である可能性が最も高いです。 <html> また <body>. どこ em 値はに基づいて変更できます font-size 値、 rem ルート要素に基づいて一貫したサイズを持っています font-size、これはデフォルトです 16px. これにより、方程式の結果は一定で予測可能になりますが、 em.

での作業を開始するには rem 値、開く styles.css テキストエディタで、 .excerpt セレクタ。 すべての値がに設定されているため em デフォルトを使用 font-size の 16px、これらはすべてから変更できます em に rem 影響はありません。 ここでの利点も、 font-size このセレクターまたは font-size 親コンテナの値が変更されても、これらの値はルートに基づいているため変更されません font-size:

styles.css
...
.excerpt {
	margin: 1.25rem auto;
	padding: 1.25rem;
	border: 0.0625rem solid black;
	width: 80%;
	max-width: 30rem;
	box-sizing: border-box;
}
...

次に、に移動します .title セレクター styles.css を変更します font-size になる rem. 以来 em このセレクターでは、デフォルトを使用してすでに計算されています font-size、他の変更は必要ありません。 の場合 margin、これをそのままにしておくことができます em 値とそれは比例してそれ自体のサイズを継続します font-size:

styles.css
...
.title {
	font-size: 1.25rem; /* target size: 20px */
	margin: 0 0 0.5em; /* target size: 10px */
}
...

変更をに保存してください styles.css. この時点では、方法を変更する視覚的な変更は行われていません。 index.html ブラウザに表示されますが、定期的に確認することをお勧めします。 先に進み、ブラウザに戻って更新します index.html 視覚的に何も変化していないことを確認します。

戻る styles.css テキストエディタで、 .quote-text セレクタ。 The font-size ここはすでにに基づいて設定されています 16px コンテキストなので、単位をから変更できます em に rem それ以上の調整はありません。 The margin ただし、ここでは、 .quote-text font-size、むしろルート font-size. これは計算することを意味します 10 / 16 ルートとの一定の関係を取得するには font-size、作る margin 価値 0.625rem:

styles.css
...
.quote-text {
	font-size: 1.5rem;
	margin: 0.625rem 0;
}
...

The .large と .small セレクタ font-size プロパティはそのままにすることができます em 値は、 font-size の .quote-text. デザインは少し変わりますが、これらの値を少しわかりやすいものに変更することは価値があるかもしれません。 変更 .large font-size に 1.5em そしてその .small font-size に 0.875em. これによりサイズが変更されますが、次のようになります。 150% のために .large と 75% のために .small:

styles.css
...
.large {
	font-size: 1.5em;
}

.small {
	font-size: 0.75em;
}
...

これらの変更をに保存します styles.css 更新します index.html ブラウザで。 これらのセレクターを使用したテキストのサイズは、次の画像のようにレンダリングされます。

次に、調整します .citation 使用するセレクター rem それ以外の em すべてのプロパティで。 以来 border-top, margin-top、 と padding-top すべてが計算されました font-size に相当 14px、ルートごとにそれぞれを再計算する必要があります font-size の 16px. これにより、 1px border-top 厚さ1/16、または 0.0625rem. そうして 20px の望ましい値 margin-top と padding-top 20/16 になり、結果は 1.25rem. 最後に、 font-size すでにデフォルトに基づいていた 16px 値、 em に変更することができます rem:

styles.css
...
.citation {
	border-top: 0.0625rem solid #ccc;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	color: #555;
	font-size: 0.875rem;
}

変更をに保存します styles.css 視覚的な変化がないことを確認します index.html ブラウザでページを更新します。

最後に、ルート font-size を使用して変更できます :root セレクターと変更 font-size 価値。 これにより、の定義が変更されます 1rem あなたが試したいどんな価値にも。

あなたの styles.css ファイルと上部に追加します :root セレクター、次に設定します font-size に 20px:

styles.css
:root{
	font-size: 20px;
}

body {
	font-family: 'Averia Serif Libre', serif;
}
...

この変更をに保存します styles.css、次にブラウザに戻って更新します index.html. 次の画像は、これがブラウザでどのように表示されるかを示しています。

みなさんのスタイルは少し大きくなります。 これは、アクセシビリティツールを提供したり、Webサイトを大幅に調整したりする場合に非常に役立ちます。 デフォルトを維持することをお勧めします 16px サイズはより一般的ですが、サイズを変更する場合は、小さいよりも大きくする方が適切です。 これは font-size これは要素によって使用され、小さいコンテンツまたは定義されたサイズのないコンテンツは、大きいコンテンツよりもアクセスしにくくなります。

このセクションでは、 rem いくつかのシナリオでの価値と、 em と一緒に rem. あなたはまたについて学びました :root セレクターとそれを使用してデフォルトをターゲットにする方法 font-size.

結論

これらの4つの単位、ピクセル（px）、パーセント（%), em、 と rem、はWeb上で最も一般的な単位の一部です。 それぞれに長所があり、それらがどのように機能し、連携するかを理解することは、ニーズに最適な状況を決定するのに役立ちます。 ピクセル単位は、コンピューターで操作できる物理的な画面属性に基づいていることを学びました。 パーセント単位は基本値によって異なりますが、その最大の強みは次のように使用した場合です。 width. The em 値は、共通のベースラインでより多くの制御を提供します font-size 要素の、関連するプロパティ間の比例サイジングを可能にします。 最後に、 rem の利点を利用します em、ただし、値をグローバルに設定します font-size ページのルート要素の。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。