CSSで共通ユニットを使用する方法
序章
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をファイルに追加します。
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
次は <head>
タグ、追加します meta
このHTMLで使用される文字セット、ページのタイトル、 meta
モバイルデバイスでのページの処理方法を定義するタグ、およびロードするCSSファイル( Google Fonts のフォントを含む)、および styles.css
次のセクションで作成するファイル。
への追加 <head>
次のコードブロックでは、タグが強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの指定が見つかります。
<!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
ファイル:
<!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でクラスセレクターを使用して、スタイルをターゲットにして適用します。 使用されるクラス名は、各要素のタスクと意図を説明するものです。
<!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;
. これにより、ページ上のすべての要素にフォントが適用されます。
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
:
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の場合:
...
.title {
font-size: 20px;
margin: 0 0 10px;
}
The <blockquote>
コンテンツはブラウザのデフォルトで左右にインデントされます margin
価値。 この設計のニーズのために、 margin
削除することができます。 ターゲティングするクラスセレクターを作成する .quote
そしてそれに与える margin
の値を持つプロパティ 0
. これにより、コンテンツをコンテンツの幅全体に拡張できます。 <figure>
容器:
...
.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
:
...
.quote-text {
font-size: 24px;
margin: 10px 0;
}
次に、抜粋に触発された視覚的な強調を適用するには、 <span>
とともに class
の属性 large
を設定します font-size
の 32px
:
...
.large {
font-size: 32px;
}
設定後 .large
テキスト、ターゲットとするクラスセレクターを作成します .small
そしてそれに与える font-size
の値を持つプロパティ 20px
:
...
.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
. これにより、他の黒いテキストとは対照的にコンテンツが明るい灰色になり、コンテンツが目立たなくなります。
...
.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
財産:
...
.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%
代わりに、コードブロックの強調表示されたセクションに示されているように:
...
.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
:
...
.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
. 意図したサイズを説明するコメントをコードに追加すると役立つ場合があります。
...
.title {
font-size: 125%; /* target size: 20px */
margin: 0 0 10px;
}
...
次に、これと同じ式をに適用します .quote-text
セレクター、 font-size
の 24px
. 24は16よりも150%大きいため、この値の結果は 150%です。 これをあなたに追加してください 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
価値:
...
.large {
font-size: 133.3%; /* target size: 32px */
}
...
The .small
セレクターは、 .large
もはや16の係数ではなく、24の係数です。 この場合、式は 20/24 であり、次に100を掛けます。 結果は83.3%です。
...
.small {
font-size: 83.3%; /* target size: 20px */
}
...
最後に、同じ式をに適用します .citation
セレクターの font-size
. このコンテナはデフォルトに戻るので font-size
16 の方程式は、14/16になります。 resultに100を掛けると、最終的な値は 87.5%になります。
...
.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
プロパティ:
...
.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
:
...
.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
価値:
...
.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
:
...
.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
エレメント:
...
.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
丸める場合:
...
.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
:
...
.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
:
...
.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
:
...
.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
:
...
.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
:
...
.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
:
: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のスタイルを設定する方法の他のチュートリアルを試してください。