はじめに

プログラミング初学者の者です。オンラインでプログラミングを学習させて頂いてるのですが、さらに理解を深めていきたいと思い、学習したことを備忘録として、残して理解を深めていきたいと思います。
また、間違った点など、ありましたら、ご指摘いただけると幸いです。よろしくお願いします。

CSS単位の種類

CSSでHTMLのサイズを指定する際にpxはよく使っていて、emについて調べていると４種類存在することを知ったので、備忘録としてまとめておくことにしました。

・px（ピクセル）
・em(エム)
・rem(レム)
・%(パーセント)

この中でpxは絶対値に該当し、それ以外は相対値に該当します。

絶対値は名前の通り絶対に変化しない値であり、文字サイズや要素の幅をpxで指定すると、親要素や画面サイズなどほかの要因に変化があっても影響されません。

相対値とは、CSS単位で指定した数値が親要素や表示画面の変化に合わせて相対的に変わる値のことになります。
em・rem・%が該当します。

.container{ ＊親要素
        width: 500px;
      }
      .box{　　＊子要素
        height:300px;
        width: 80%;
        background-color: gray;
      }

上記を例に親要素のwidthが500pxだとすると、子要素のwidthを８０％と指定すると500pxの80%の400pxが適用されるようになります。

em単位とは

CSSのemは、HTMLの大きさを指定する単位で、デフォルトの値は、1em=16pxとなります。

emで指定した数値は、親要素に指定したサイズが基準となります。

たとえば、親要素に「font-size:20px;」を指定して、子要素に「font-size:1em;」を指定すると、親要素と同じ20pxが子要素に反映されます。

また、親要素にサイズを指定していない場合は、HTMLのデフォルトフォントサイズである16pxと1emが同じサイズになるのもポイントです。

emを使ったHTML要素の文字サイズを変更する方法

HTMLの文字サイズは、CSSプロパティであるfont-sizeの値にemを指定して変更します。

emで指定した文字サイズは、親要素にfont-sizeが指定されているときはその値と同じサイズになり、指定されていないときはデフォルトの16pxになります。

<body>
  <p>em単位は<span>このように</span>利用します。</p>
</body>

 p {
  font-size: 1em;
 }
 span {
  font-size: 1.5em;
 }

pタグは親要素にサイズ指定されていないので、1emを指定すると16pxと同じ文字サイズで表示されています。

pタグ内のspanタグには1.5emが指定されています。親要素であるpタグのサイズが16pxなので、その1.5倍である24pxと同じ文字サイズで表示されます。

remの特徴と使い方

rem(レム)は「root em」の略称で、root要素であるhtmlタグに指定されたサイズを基準にしてサイズが変わる単位です。

例えば、htmlタグの文字サイズは16pxなので、デフォルトだと1rem=16pxになります。

remを使うとhtmlタグのサイズを変えるだけでほかのrem単位全てを相対的に変えることができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="css/test.css">
    <title>Webページのタイトル</title>
    <style>
      html{
        font-size: 62.5%;
      }
      p{
        font-size: 2rem;
      }
      h2{
        font-size: 2.5rem;
      }
    </style>
  </head>
<body>
  <div class="container">
    <p>テスト</p>
  </div>
  <h2>タイトル</h2>
  <p>内容</p>
</html>

htmlタグの文字サイズに62.5%を指定すると、デフォルトサイズである16pxの62.5%のサイズになるので10pxと同じサイズになります。

上記のように設定することで、rem指定した値のサイズが分かりやすくなるので便利です。

たとえば、pタグの「font-size: 2rem;」は、10pxの2倍なので20pxと同じ値です。h2タグも同じく2.5remは25pxになります。

htmlタグのサイズを変えるだけで、rem指定している全ての要素サイズを変更できるので、レスポンシブ対応にも最適な方法です。

emとremの違い

emとremは同じ相対値ですが、emは親要素のサイズによって相対的に変わるのに対して、remはroot要素のサイズによって相対的に変わります。

相対的に文字サイズを変えたい場所が部分的である場合はemの使用が適しており、html要素を起点として全体的にサイズを変えたいときはremの利用がおすすめです。

%の特徴、使い方

％単位はem単位と同じく、親要素のサイズに対して相対的に変化する単位です。要素のサイズを百分率で指定します。

%単位はブラウザの表示画面に合わせて変化するので、レスポンシブ対応するときに利用されることが多いのも特徴です。

また、％単位は文字よりもボックスやレイアウトのようなコンテンツに指定することが多いのも特徴です。

%とemの違い

emと％は、相対値で親要素を指定する点は一緒ですが、変化する幅の指定方法が違います。

emは親要素を基準として倍率で指定し、％は親要素を基準として百分率で表します。

emで指定すると細かい数値で理解しやすく、％で指定するとおおよそのサイズで直感的に認識しやすいのが特徴です。

em・px・rem・%の使い分け

・文字の指定にはremを使う
remを使って文字サイズを設定することで、レスポンシブ対応しやすくなります。

remを指定した要素のサイズはhtmlタグのサイズに合わせて相対的に変わるので、htmlタグのサイズを変えるだけでWebページ上の文字サイズを一度に変更できます。

emや％で指定すると、文字サイズが親要素に依存するので部分的に変える手間が生じてきます。また、pxは絶対値なので、レスポンシブ対応するときは全ての文字サイズを変えなければなりません。

上記の理由から、レスポンシブ対応が必須とも言えるWeb制作で文字サイズを指定するのはrem単位が最もおすすめの指定方法です。

・特定要素の文字サイズはemを使う
emを指定した要素は、親要素に指定されたサイズによって変化するので部分的に文字サイズを変えるときにぴったりです。

例えば、文中で強調させたい文字をem単位で指定すると、親要素のフォントサイズに合わせてサイズを微調整できます。

特定の要素内だけフォントサイズを変えたいとき最適です。

レイアウトのサイズ指定は％を使う

％単位は、headerやmainタグのような、Webページのレイアウトの担う要素に指定するのがおすすめです。

%単位は表示画面を100%とするので、レイアウトに指定することで画面サイズが変わっても要素が見切れたりスクロール表示になりません。