フォントサイズにはremがおすすめ(px, %, em, rem)

フォントサイズはpx, %, em, remといった単位で指定できます。この中で「rem」を利用するメリットについて解説します。

4つの単位

まずは、CSSでよく利用される4つの単位について確認します。

プロパティ 概要
px ピクセル単位の指定
% 親要素を基準にした相対指定
em 親要素を基準にした相対指定
rem root要素(html要素)を基準にした相対指定

emとremの違い

下記HTMLを例に説明します。

<body>
  <ul>
    <li>北海道</li>
    <li>
      <ul>
        <li>札幌</li>
      </ul>
    </li>
  </ul>
</body>

emの場合

html { 
  font-size: 10px;
}
 
li{
  font-size: 1.5em;
}

「北海道」のfont-sizeは、15px(10px × 1.5)になります。
「札幌」のfont-sizeは、22.5px(10px × 1.5 × 1.5)になります。

remの場合

html { 
  font-size: 10px;
}
 
li{
  font-size: 1.5rem;
}

「北海道」のfont-sizeは、15px(10px × 1.5)になります。
「札幌」のfont-sizeは、15px(10px × 1.5)になります。

emは、直近の親要素を基準とした相対指定なので、HTML要素の階層が深まるにつれて扱いづらくなります。

それに対して、remは、常にroot要素(html要素)を基準としているので扱いやすいです。

remのサポート状況

remの各ブラウザでのサポート状況は http://caniuse.com/#feat=rem で確認できます。

remはIE8でサポートされていません。なので今までremを利用しなかった人も多いかと思います。ですが、マイクロソフトのIE8のサポートは終了しました。なので、今後は頻繁に利用されていくのかと思います。

フォントサイズにはremがおすすめ

PCやスマホなど、デバイスごとに適切なフォントサイズは異なります。

pxemで指定するとデバイスごとのフォントサイズ調整が面倒ですが、remを使用するとベースフォントだけ変更すればよいのでおすすめです。

フォントサイズの目安

文章のフォントサイズの目安ですが、パソコンだと16pxぐらいは最低必要かと思います。スマホだと手に持って近くで見るため14pxぐらいあればいいのかなと思います。

ちなみに「bootstrap-4.0.0-alpha」の _variables.scss 内では下記のように設定されていました。

$font-size-root:             16px !default;
 
$font-size-base:             1rem !default;
$font-size-lg:               1.25rem !default;    // 20px
$font-size-sm:               .875rem !default;    // 14px
$font-size-xs:               .75rem !default;     // 12px
 
$font-size-h1:               2.5rem !default;     // 40px
$font-size-h2:               2rem !default;       // 32px
$font-size-h3:               1.75rem !default;    // 28px
$font-size-h4:               1.5rem !default;     // 24px
$font-size-h5:               1.25rem !default;    // 20px
$font-size-h6:               1rem !default;
 
$line-height:                1.5 !default;
$line-height-lg:         (4 / 3) !default;
$line-height-sm:         1.5 !default;

ベースフォントを10pxにするとremの計算が楽

デフォルトのベースフォントサイズは16pxです。そのため、pxのサイズを考えながらremを指定するのが面倒です。

そこで、ベースフォーントサイズを62.5%にします。

html { font-size: 62.5%; }

するとベースフォントが10pxになるので、下記のようにpxとの対応関係が分かりやすくなります。

1.5remであれば、15px
2remであれば、20px

ベースフォントを変更できない場合

「bootstrap-4.0.0-alpha」だとベースフォントサイズが16pxです。16pxをもとにremが設定されているため、ベースフォントサイズの変更は避けたいところです。

このように、デフォルトの16pxのままremを利用したい場合には、sassのmixinを利用すると良いかと思います。

@mixin fontsize($size) {
    font-size: ($size / 16) * 1rem;
}

20pxの大きさになるようにremを指定したい場合、上記mixinを利用して、fontsize(20)とすれば、1.25remが設定されます。ベースが16pxなので「16px × 1.25」で20pxになります。

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。