著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
CSSを使用してHTMLをスタイリングする場合、選択できるサイズ単位はたくさんあります。 これらの単位は、表示されるテキストの大きさ、コンテナーの幅、または列間のスペースの大きさを判別するのに役立ちます。 さまざまなユニットのそれぞれには、開発者やWebサイトのデザインにとって価値のある機能的な強みがあります。 どのユニットが状況に最も適しているかを知ることは、柔軟でアクセス可能なWebサイトを作成するのに役立ちます。
このチュートリアルでは、ピクセル（px）、パーセント（%）、em、およびrem単位について学習します。 これらのユニットは、font-size、padding、border、margin、width、max-width各ユニットの違いと強みを学びます。
前提条件
- ローカルマシンに
index.htmlとして保存された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>内に含まれています。 <figcaption>要素はコンテンツを終了し、元の文学作品への引用を提供します。 さらに、いくつかの<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ブラウザでファイルを開いてください。 次の画像に示すように、ブラウザがデフォルトで適用するスタイルはすでにいくつかあります。 また、<head>タグに含まれているにもかかわらず、CSSで定義されていないため、GoogleFontsのフォントはまだ表示されていません。
最後に、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は、Web上でよく知られているユニットです。 このチュートリアルで説明する他のユニットとは異なり、pxユニットは物理ベースのユニットであり、そのサイズはデバイスのディスプレイの1ピクセルの物理サイズによって決定されます。
テキストエディタでstyles.cssを開き、.elementを使用して<figure>要素のclassのクラスセレクタを作成します。 このセレクターブロックでは、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;
}
marginは、20pxをコンテナーの上下に適用し、autoは、width値が宣言されると、コンテナーが水平方向に中央に配置されるように設定します。 次に、paddingプロパティは、コンテナの内部の両側に20pxのスペースを提供します。 次に、border: 1px solid black;は、コンテンツの定義された境界として、コンテナー全体の周りに1pxの太い黒い境界線を適用します。 max-widthを使用すると、画面が480pxよりも小さい場合、コンテナーの幅を柔軟にすることができますが、コンテナーの幅が480pxになると成長を停止します。 最後に、box-sizing: border-box;は、コンテナのボックスモデルを変更して、最大幅が480pxになるようにします。
これらの追加をstyles.cssファイルに保存してから、ブラウザにジャンプしてindex.htmlを更新してください。 コンテナの内側の上部に余分なスペースがあります。これは、.title要素のデフォルトに由来します。 次の画像を調べて、ブラウザでこれがどのように表示されるかを確認してください。
次に、エディターでstyles.cssに戻り、classの値がtitleの<h3>要素のクラスセレクターを作成します。 現在、コンテンツには、font-size、font-weight、およびmarginのブラウザーのデフォルト値があります。 まず、font-sizeを20pxに変更します。これは、ブラウザのデフォルトサイズより少し大きいサイズです。 次に、値が0 0 10pxのmarginプロパティを追加します。これにより、上部に0のマージンが適用され、次に右側に0のマージンが適用されます。そして左、そして最後にタイトルの下部に10pxマージン。 CSSで値が0の場合、単位は必要ありません。
styles.css
...
.title {
font-size: 20px;
margin: 0 0 10px;
}
<blockquote>のコンテンツは、ブラウザのデフォルトのmargin値で、左右にインデントされています。 この設計のニーズに応じて、marginを削除できます。 .quoteをターゲットとするクラスセレクターを作成し、marginプロパティに0の値を指定します。 これにより、コンテンツを<figure>コンテナのコンテンツ幅全体に拡張できます。
styles.css
...
.quote {
margin: 0;
}
変更内容をstyles.cssファイルに保存してブラウザに戻り、index.htmlファイルを更新してください。 .titleが少し大きくなり、その上のギャップがはるかに小さくなります。 引用内容もスペースを埋めるために拡張されました。 ブラウザで何が変わるかについて、次の画像を確認してください。
テキストエディタでstyles.cssに戻ります。 blockquoteのコンテンツは<figure>の主な焦点であるため、quote-textをターゲットにして、24pxのfont-sizeを適用して目立たせます。 ]。 次に、marginの短縮形10px 0を使用して、上下のmarginを10pxに設定し、各行の間に狭い区切りを作成します。 これにより、上下が10pxに設定され、左右が0の値に設定されます。
styles.css
...
.quote-text {
font-size: 24px;
margin: 10px 0;
}
次に、抜粋に触発された視覚的強調を適用するには、[X96X]をlargeのclass属性でターゲットにし、32pxのfont-sizeを設定します。 ]：
styles.css
...
.large {
font-size: 32px;
}
.largeテキストを設定した後、.smallをターゲットとするクラスセレクターを作成し、20pxの値を持つfont-sizeプロパティを指定します。
styles.css
...
.small {
font-size: 20px;
}
これらの変更をstyles.cssファイルに保存し、ブラウザでindex.htmlを更新します。 抜粋の内容はサイズが大きくなり、少し近づきます。 さらに、「サイズ」という単語は主要なテキストよりも大きく表示され、「あなたが知っている」というフレーズは少し小さく表示されます。 次の画像は、これがブラウザでどのように表示されるかを示しています。
このセクションの最後のスタイルについては、テキストエディタでstyles.cssファイルに戻ってください。 <figcaption>要素に適用されるcitationクラスを対象とするクラスセレクターを作成します。 このコンテンツは<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ページを更新して、次の画像に示すように変更を表示します。
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デザインに精通している場合、概念の多くはこの組み合わせに基づいています。 80%の値を使用すると、画面サイズの幅に関係なく、コンテナーの左右に間隔を空けることもできます。
パーセント単位を使用したので、それがどのように機能するかを確認するために、より多くの場所に適用してみてください。 .excerptセレクターのmarginおよびpaddingピクセル値をパーセントに交換することから始めます。 これには、このチュートリアルの残りの部分で使用する式 size / context =resultが必要です。
この場合のsizeは、marginおよびpaddingの20px値の20です。 marginおよびpaddingのパーセント単位は幅のパーセンテージであるため、max-width値はおおよそのコンテキストを決定するのに役立ちます。 これにより、必要な式 20/480 が作成され、結果は0.041666667になります。 パーセントを処理する場合、使用する前にresultに常に100を掛けて、最終値 4.1666667％を作成する必要があります。 コードブロックの強調表示されたセクションに示すように、代わりに.excerptセレクターの20px値を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をリロードします。 ブラウザウィンドウの幅のサイズを変更してみて、.excerptコンテナがmax-widthに達した後も、paddingの値がどのように大きくなるかを確認してください。 この効果の実際のデモンストレーションについては、次のアニメーションを参照してください。
これは望ましい効果ではない可能性がありますが、パーセント単位でどのプロパティが最適に機能するかを把握して確認することをお勧めします。
エディタで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プロパティでパーセントを使用すると、同じ式を使用して値が検索されます。 styles.cssドキュメントの.titleセレクターブロックに移動すると、font-sizeは20pxになります。 式size/ context = result から、この20pxはsizeです。 このシナリオのcontextは、ドキュメントのブラウザのデフォルトfont-sizeであり、16pxです。 その場合、式は 20/16 になります。これはパーセントであるため、結果に 100 を掛けて、 125％の最終値を得る必要があります。 。 20pxの代わりに125%の値を追加します。 意図したサイズを説明するコメントをコードに追加すると役立つ場合があります。
styles.css
...
.title {
font-size: 125%; /* target size: 20px */
margin: 0 0 10px;
}
...
次に、この同じ式を.quote-textセレクターには、24pxのfont-sizeがあります。 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であることを意味します。 .largeの現在のfont-sizeは32pxです。これは、16pxの2倍のサイズであるため、通常、font-sizeは200%。 コンテキストが変更されたため、 16 ではなく、24の2倍になります。 したがって、適切な式は 32/24 である必要があり、これは1.333333333になります。
result を取得し、 100 を掛けてから、新しいfont-size値の小数点以下を133.3%に丸めてください。
styles.css
...
.large {
font-size: 133.3%; /* target size: 32px */
}
...
.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ユニットを使用する
このセクションでは、emユニットを使用するようにCSSをリファクタリングします。 パーセント単位と同様に、em単位は相対単位ですが、widthまたはfont-sizeとは異なるパーセントのベースと比較して、より一般的なベースがあります。 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ユニットを追加します。 marginおよびpaddingの20pxの場合、式20/16は1.25emになります。 borderの厚さ1pxの場合、これは 1/16 、つまり0.0625emを意味します。 1pxの値を扱う場合、厚さをスケーリングする必要があるかどうかはあなた次第です。 必要がない場合は、1pxのままにしておいてください。 最後に、480pxのmax-widthは480/16 になり、30emになります。
これらの変更をstyles.cssに保存し、ブラウザにindex.htmlをリロードします。 これらの値はピクセル値と同じであるため、視覚的な変化はありません。
次に、エディターのstyles.cssの.titleセレクターに移動します。 前のセクションから、font-sizeの値は125%です。 emの式は、100を掛ける以外はパーセント単位の場合と同じであるため、代わりに除算して小数点を返すことができます。 これは、font-sizeの値が125%から1.25emに変更されることを意味します。 emの値は、指定された要素のfont-sizeによって定義されるため、emの他のすべてのインスタンスが変更されています。 つまり、1emは1.25emと同等であり、.titleセレクター内でのemの他のすべての使用は、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の半分。 marginプロパティで、10pxを0.5emに交換できます。 ここでの利点は、設計が変更されて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>サイジングクラスに取り入れると、方程式をさらに使用する必要があります。 font-sizeでsize/ context = result の式を使用します。ここで、目的の値は24pxと同等です。 これにより、値は1.5emになります。
styles.css
...
.quote-text {
font-size: 1.5em; /* target size: 24px */
margin: 10px 0;
}
...
font-sizeがem、パーセント、またはピクセルであるかどうかに関係なく、font-sizeは1emのサイズを定義します。 これは、数式のcontextが、.quote-textと.largeのmarginに同じ数式を適用した場合の24pxと等しくなることを意味します。 .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ではないことを意味します。 borderの1pxの厚さは、0.071428571em、または1000分の1に丸めると0.071emになります。 次に、20pxのpaddingおよびmarginの値は、丸め時に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ユニットを使用する
前のセクションでは、emユニットに近いremユニットを使用します。 remの「R」はroot要素を表します。これは、Webページの最上位要素であり、おそらく<html>または<body>です。 emの値がfont-sizeの値に基づいて変更される可能性がある場合、remは、ルート要素のfont-sizeに基づいて一貫したサイズになり、デフォルトでは16px。 これにより、方程式は一定で予測可能な結果を得ると同時に、emのスケーラブルな利点が得られます。
rem値の操作を開始するには、テキストエディタでstyles.cssを開き、.excerptセレクタに移動します。 すべての値は16pxのデフォルトのfont-sizeを使用してemに設定されるため、これらはすべて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;
}
...
次に、styles.cssの.titleセレクターに移動し、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セレクタに移動します。 ここでのfont-sizeは、16pxコンテキストに基づいてすでに設定されているため、ユニットをemからremに変更できます。 ただし、ここでの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;
}
...
.largeおよび.smallセレクターfont-sizeプロパティは、font-sizeと比較して比例したサイズを提供するため、em値のままにすることができます。 X163X]。 デザインは少し変わりますが、これらの値を少しわかりやすいものに変更することは価値があるかもしれません。 .large font-sizeを1.5emに、.smallfont-sizeを0.875emに変更します。 これによりサイズが変更されますが、.largeの場合は150%、.smallの場合は75%のようになります。
styles.css
...
.large {
font-size: 1.5em;
}
.small {
font-size: 0.75em;
}
...
これらの変更をstyles.cssに保存し、ブラウザでindex.htmlを更新します。 これらのセレクターを使用したテキストのサイズは、次の画像のようにレンダリングされます。
次に、すべてのプロパティでemの代わりにremを使用するように、.citationセレクターを調整します。 border-top、margin-top、およびpadding-topはすべて、14pxと同等のfont-sizeに計算されたため、それぞれについて再計算する必要があります。 16pxのルートfont-size。 これにより、1pxborder-topの厚さが1/16、または0.0625remになります。 その場合、margin-topおよびpadding-topの20pxの目的の値は、 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値を使用し、remと一緒にemを使用することが役立つ場所を学習しました。 また、:rootセレクターと、それを使用してデフォルトのfont-sizeをターゲットにする方法についても学びました。
結論
これらの4つの単位、ピクセル（px）、パーセント（%）、em、およびremは、Webで見られる最も一般的な単位の一部です。 。 それぞれに長所があり、それらがどのように機能し、連携するかを理解することは、ニーズに最適な状況を決定するのに役立ちます。 ピクセル単位は、コンピューターで操作できる物理的な画面属性に基づいていることを学びました。 パーセント単位は基本値によって異なりますが、その最大の強みはwidthとして使用した場合です。 em値は、要素のfont-sizeの共通ベースラインでより詳細な制御を提供し、関連するプロパティ間で比例したサイズ設定を可能にします。 最後に、remはemの利点を利用しますが、値をページのルート要素のグローバルfont-sizeに設定します。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
