CODING

[css] font-sizeの種類

投稿日:2019年10月18日 更新日:




どうも、べ〜やんです。

今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。







フォントサイズの種類


フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか?

フォントサイズも種類があり、デザイン上でもユーザービリティ向上のためにも使い分ける必要があります。

ここで基本的なフォントサイズ種類を紹介します。

px

pxは画面を作っている小さな点のことです。この小さな点が集まって画面が作られています。

10pxなら一文字が、小さな点が縦10個*横10個の正方形のサイズになります。

pxは絶対指定と呼ばれ、指定したサイズのまま表示されます。

pxは絶対値なので、ユーザーがブラウザの設定で文字サイズの変更をしても変更できません。

ユーザーが見やすいようにpxは特別な理由がない場合は使わない方がいいでしょう。

em

emは相対指定と呼ばれ指定した場所のフォントサイズを1とする単位です。

親要素に比べてどれくらいの大きさか。

%は相対指定と呼ばれ指定した場所のフォントサイズを100%とする単位です。

親要素の一文字の大きさが100%として、何%のサイズにするか。

rem

remは( root em )の略で、常にroot要素( html要素 )を基準にするemです。

常にroot要素( html要素 )を基準にするので計算が簡単で便利です。




簡単な使い方


では、簡単な使い方を説明します。

まずhtml要素に62.5%を指定します。これでページ全体のフォントサイズが10pxになります。

主要なブラウザのデフォルトサイズは16pxになっているので、16pxの62.5%で10pxになります。

10pxにするのは文字サイズの計算を楽にするためです。

html {
  font-size: 62.5%;
}
/* 全て18pxと同じサイズです。 */
body {
  font-size: 18px;
  font-size: 1.8em;
  font-size: 180%;
  font-size: 1.8rem;
}
/* 親要素がbodyで18pxになっている */
div {
  font-size: 12px;  /* 絶対値なので12px */
  font-size: 1.2em; /* 親要素の18pxの1.2倍で21.6px(約22px) */
  font-size: 120%; /* 親要素の18pxの120%で21.6px(約22px) */
  font-size: 1.2rem; /* root要素の10pxの1.2倍で12px */
}



行の高さ&文字間隔


行の高さや文字間隔を指定する時にも相対値を使えます。

行の高さはline-heightで指定します。文字サイズが変わっても対応するように単位を使わずに数字だけで指定するといろんな文字サイズが混ざっていても均等に行間を保てます。

↓一文字分の1.6倍の相対指定

line-height: 1.6;

文字間隔はletter-spacingで指定します。親要素の文字サイズから相対指定するemを使うと便利です。

↓親要素の文字サイズの0.1文字分

letter-spacing: 0.1em;



おわりに


今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介しました。

私を含め初心者のうちはどうしてもpxばかりを使ってしまう人が多いと思いますが、ユーザーのことを考えれば相対指定を使うようにしたいですね。




-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[超初心者] CSSとは

どうも、べ〜やんです。 HTMLに続き超初心者の方用に、マークアップ言語のCSSとはついて書きます。 CSSとは何か? CSSとは、Cascading Style Sheets(カスケーディング・スタ …

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …