CSS プロパテの数値（文字の大きさ）

文字の大きさ。

文字の大きさはどのように決めるか？


一般的に文字の大きさは、
px、
em、
rem
で設定します。

cascade rule と同じように、
文字の大きさも重要です。ミニ。


博士。
続けてください。


場所は博士の研究室、
ミ二は女子学生風AI、
博士は大学教授風AIです。

相対長と絶対長。

CSSで使われる長さには、
相対長と絶対長の2種類あります。


絶対長で一般的に使われる単位は、

pxです。
ピクセルといいます。
1px = 1インチの1/96です。


よく使われる、相対的な長さの単位には、
em、
rem、
vm、
vhがあります。


emは、
font-sizeプロパテの場合、
親のフォントサイズになります。


widthプロパテの場合は、
そのエレメントでの、
フォントサイズになります。


remは、
ルートエレメントのフォントサイズになります。


vmは、
ビューポートの幅（％）です。


vhは、
ビューポートの高さ（％）です。

emの使用例。

次は、
px、emの例です。
親の1.3emになるので、
徐々に大きくなります。


計算では、
16px　×　1.3　ーー　およそ21pxです。
21px　×　1.3　ーー　およそ28pxです。


画像と、コードになります。




<ul class="ems">

    <li>一番</li>
    <li>二番</li>
    <li>三番
      <ul>
        <li>三番 A</li>
        <li>三番 B 1
          <ul>
            <li>三番 B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>


html {
  font-size: 16px;  
}

.ems li {
  font-size: 1.3em;
}

remの使用例。

次は、
px、remの例です。
rootのrem値になるため、
大きさは同じです。


計算では、
16px　×　1.3　ーー　およそ21px


画像と、コードになります。



　HTMLは同じです。
 
　class="rems"です。
 


html {
  font-size: 16px;  
}


.rems li {
  font-size: 1.3rem;
}

%の使用例。

次は、
px、%の例です。
親の％値になるため、
徐々に小さくなります。


画像と、コードになります。



　HTMLは同じです。
 
　class="persent"です。



html {
  font-size: 16px;  
}

.percent li {
  font-size: 60%;
} 


以上です。