【CSS】文字の装飾!文字サイズを指定する方法(px、em、rem)

文字サイズを指定するCSSの属性はfont-sizeです。
このfont-sizeに文字の大きさを値として指定すれば、文字サイズを変更することができます。

この値の指定方法にはいくつかの方法があります
どの方法を選択するかは、個人の好みやプロジェクト内のルールによりますが、それぞれの違いについては理解しておきましょう。

また、どの単位を使用するかについてしばしば議論されることがあります。
どちらの意見も参考になるので興味があれば調べてみてください。

ピクセル(px)を使用する

ピクセル(px)は画素のことで、デジタル画像を構成する要素の最小単位です。

古くからある単位で、多くのサービスで使用されています。
デザイナーが使用するPhotoShop(フォトショップ)などではピクセル単位が使用されることが多いため、デザインからコードへ変換することが容易にもなります。

ここでは、span要素にピクセルを使用して文字サイズを設定してみましょう。


span {
    font-size: 24px;
}
        
こんにちは

また、親要素に文字サイズの指定があった場合、子要素は親要素の文字サイズを継承します。


div {
    font-size: 24px;
}
        

<div>
    こんにちは
    <p>こんにちはは日本の挨拶です</p>
</div>
    
こんにちは

こんにちはは日本の挨拶です

エム(em)を使用する

エム(em)は親要素からの相対的なサイズを指定する場合に使用します。

親要素が16pxであれば、子要素の1em16px * 1em = 16pxとなります。
子要素が0.5emであれば、16px * 0.5em = 8pxとなります。

この様に、親要素のサイズによって子要素のサイズを指定する方法になります。


h2 {
    font-size: 32px;
}

h2 > div {
    font-size: 0.4em;
}
    

<h2>
    こんにちは
    <div>こんにちはは日本の挨拶です</div>
</h2>
    
こんにちは
こんにちはは日本の挨拶です

これは「こんにちは」に対してサブタイトルの文字サイズを指定している例です。

サイズを相対的に指定しているため、文字の大きさを変更する場合でも親要素であるh2要素のサイズを変更するだけになります。


h2 {
    font-size: 48px;
}

h2 > div {
    font-size: 0.4em;
}
    
こんにちは
こんにちはは日本の挨拶です

レム(rem)を使用する

レム(rem: root em)はルート要素であるhtml要素の文字サイズから相対的なサイズを指定する方法です。

ルート要素の文字サイズはブラウザごとに設定されておりデフォルトでは16pxが設定されています。
この16pxからの相対的なサイズとなるので、1rem16pxとなります。
仮に14pxを指定したい場合であれば、14px / 16px = 0.876remとなります。

emと異なり、remはルート要素の相対サイズとなるので他の要素の文字サイズに影響を受けません。

また、ブラウザの設定で文字サイズを変更した場合は、このルート要素の文字サイズが変更されます。
そのためpxの固定値と異なり、環境ごとに文字サイズが自動的に反映されるといった特徴があります。


p {
    font-size: 2rem;
}
    

<p>こんにちは</p>
    

こんにちは

2remを指定しているので、デフォルト値の2倍の大きさの文字サイズとなっています。


html {
    font-size: 12px;
}

p {
    font-size: 2rem;
}
    

こんにちは

ルート要素の文字サイズを12pxに設定しているので、p要素は24pxと同等のサイズが設定されています。

理解度チェック

  • ピクセル(px)を使用して文字サイズを設定してみましょう!
  • エム(em)を使用して文字サイズを設定してみましょう!
  • レム(rem)を使用して文字サイズを設定してみましょう!
  • それぞれの違いについて説明してください。

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。