CSSフォントサイズチュートリアル–HTMLでテキストサイズを変更する方法

CSSfont-sizeプロパティを使用して、テキストのサイズを決定します。

.container { font-size: 33px; } 

このプロパティは、いくつかのタイプの値を取ります。

  • キーワード(絶対サイズおよび相対サイズのキーワード)、
  • 長さ(ピクセル(px)やem単位など)、および
  • パーセンテージ。
.container { font-size: xx-large; } 

問題は、どのタイプの値を選択する必要があるのか​​、そしてその理由は何かということです。

それがこの記事が取り組む問題です。font-sizeプロパティの使用方法と、その多くの値の違いを示します。したがって、次にテキストのフォントサイズを変更する必要があるときは、どの値に到達するかがわかります。

キーワード値

:キーワードフォントサイズで使用できる値の2種類がありますabsolute-sizeし、relative-sizeキーワードが。絶対から始めましょう。

絶対サイズのキーワード

以下のコードでは、absolute-sizeキーワードsmallを使用してHTMLテキストのサイズを設定しています。

.childElement { font-size: small; } 

選択できる絶対サイズのキーワードオプションは他にもあります。

  • xx-小さい
  • x-small
  • 小さい
  • ×ラージ
  • xx-大
  • xxx-大

絶対サイズのキーワードの値は、ブラウザのデフォルトのフォントサイズによって決まります。通常、そのサイズは中程度です。

相対サイズのキーワード

相対サイズのキーワードは、考慮すべきもう1つのキーワードオプションです。あなたの中から選択するには、2つがありますsmallerlarger

.parentElement { font-size: smaller; } 

相対サイズのキーワードを持つ要素のフォントサイズは、親のフォントサイズに対して相対的(大きいまたは小さい)です。

言い換えると、以下に示すように、親要素のフォントサイズが子要素のフォントサイズに影響します。

この例では、relative-sizeキーワードsmallerが子要素に適用され、absolute-size値largeが親要素に適用されます。

長さの値

font-sizeいくつかの異なる長さの値を受け入れます。そのうちの3つ、ピクセル(px)とemおよびrem単位について説明します。選択に関係なく、使用する長さの値は正でなければなりません。

.parentElement { font-size: 60px; } 

ピクセル

ピクセルは絶対長の単位です。つまり、親要素やウィンドウサイズなど、他の要素の影響を受けません

その結果、ピクセルは正確になります。要素に必要なピクセルの正確な数を定義すると、通常はそれが得られます。ただし、ブラウザによって若干の違いがある場合があります。

pixels上記のコードサンプルでは、子要素が同じフォントサイズを使用していることに注意してください。

EM

ピクセルは固定と考えることができますが、em値は変数と考えることができます。

これは、em値が相対的な長さの単位であるためです。em値を使用する要素のフォントサイズは、その親のフォントサイズを基準にしています。  

ただし、親要素のフォントサイズを設定していないとします。また、DOMの上位に設定したこともありません。この場合、em値は、ブラウザのデフォルト(多くの場合16px)を使用して計算されます。

この考えを具体的にしましょう。

親要素が30pxに設定され、子要素が2emに設定されているとします。次に、子要素のレンダリングされたフォントサイズは60px(2 x 30px = 60px)です。このシナリオは、以下のコードで確認できます。

em値は、次の例に示すように、複利効果のために問題になる可能性があります。

相互にネストされたem値を使用する複数の要素がある場合、フォントサイズ値は複雑になります。それらはますます大きくなります。これが実際の複利効果です。

REM

emsの複利問題に対処するために作成されたrem値を入力します。

em値は親要素に関連していることを思い出してください。対照的に、rem値は、ルート(html)要素のフォントサイズを基準にしています。  

つまり、要素にrem値を適用でき、親のフォントサイズの影響を受けません。これにより、上記で経験した複合効果が回避されます。

この例では、font-sizerem値を持つプロパティを使用しています。

上記の例の要点は次のとおりです。親要素のフォントサイズは、子要素のフォントサイズには影響しません。

パーセンテージ

パーセンテージは、親要素のフォントサイズを基準にしてフォントサイズを設定するもう1つの方法を提供します。

パーセンテージの付いた要素は、その親要素を参照してフォントサイズを決定します。パーセンテージ値は正でなければなりません。

これが例です。

ご覧のとおり、フォントサイズに関しては、ニーズに合わせてさまざまなオプションがあります。

私は、プログラミングの学習と、それを実現するための最良の方法について、amymhaddad.comに書いています。私はまた:プログラミング、学習、および生産性についてつぶやく@amymhaddad。