【26-2】font-sizeプロパティでフォントのサイズを指定しよう

最終更新日:2018年03月31日  (初回投稿日:2018年03月13日)

前回は、要素のフォントファミリーを指定する font-familyプロパティを使いました。
そのフォントのサイズを指定するには font-sizeプロパティを使います。

本日のINDEX
  1. font-sizeプロパティの値
    1. xx-small, x-small, small, medium, large, x-large, xx-large
    2. larger, smaller
    3. 単位付き数値での指定1「相対的な単位」
    4. 単位付き数値での指定2「絶対的な単位」
    5. パーセンテージでの指定

フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント(書体)を指定しよう
【26-2】font-sizeプロパティでフォントのサイズを指定しよう ←今日はココ
【26-3】font-weightでフォントのウェイト(太さ)を指定しよう
【26-4】font-stretch で condensed などの文字幅を選択しよう
【26-5】font-styleプロパティでフォントを斜体に指定しよう
【26-6】line-heightプロパティで 行間(行の高さ)を指定しよう
【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考:
CSS Fonts Module Level 3 | W3C Candidate Recommendation
font - CSS | MDN

font-sizeプロパティの値

font-sizeプロパティは、数値を単位付きで指定してもイイし、いろいろなキーワードも用意されています。

font-sizeプロパティの値
<absolute-size>
絶対的サイズ
絶対的サイズをキーワードで指定。
xx-small, x-small, small, medium, large, x-large, xx-large
mediumがデフォルト値
<relative-size>
相対的サイズ
親要素のフォントサイズに対する相対的サイズをキーワードで指定。
larger, smaller
<length> 正の数値に単位(px, em, ex, rem など)を付けて指定(マイナスの値不可)
親要素のフォントサイズに左右されない
<percentage> 親要素のフォントサイズに対するパーセンテージ(%)で指定
グローバル値 font-size: inherit; 親のfont-sizeの値を継承(コレ書かなくても継承するけど)
font-size: initial; 継承した親の font-sizeの値を解消しデフォルト値に戻す
font-size: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

xx-small, x-small, small, medium, large, x-large, xx-large

絶対的サイズのキーワードは、「medium」がブラウザデフォルト値です。
ブラウザのデフォルトフォントサイズは16px なので、font-size: medium は 16px になります。

キーワード 倍率 px 同サイズの
ヘディング要素
xx-small 3/5(60%相当) 9.6px ---
x-small 3/4(75%相当) 12px <h6>
small 8/9(88.8%相当) 14.2px <h5>
medium
デフォルト
1(100%) 16px <h4>
large 6/5(120%相当) 19.2px <h3>
x-large 3/2(150%相当) 24px <h2>
xx-large 2(200%相当) 32px <h1>

実際に指定してみました。

font-size: xx-small での指定 font-size: x-small での指定 font-size: small での指定 font-size: medium での指定(16px) font-size: large での指定 font-size: x-large での指定 font-size: xx-large での指定

ソースコードはこちら。

<div class="mihon">
  <span style="font-size:xx-small">font-size: xx-small での指定</span>
  <span style="font-size:x-small">font-size: x-small での指定</span>
  <span style="font-size:small">font-size: small での指定</span>
  <span style="font-size:medium">font-size: medium での指定(16px)</span>
  <span style="font-size:large">font-size: large での指定</span>
  <span style="font-size:x-large">font-size: x-large での指定</span>
  <span style="font-size:xx-large">font-size: xx-large での指定</span>
</div>
<style>
.mihon {
    font-size:1rem;
    border:solid 1px #ccc;
    padding:.5em .7em
    }
.mihon span {
    display:block;
    margin:.5em 0
    }
</style>

larger, smaller

相対的サイズのキーワード「font-size: larger」を使うと、親要素のフォントサイズに対して1段階ずつ拡大、「font-size: smaller」だと1段階ずつ縮小します。

拡大・縮小率は、先ほどの「絶対的サイズのキーワード」の比率にほぼ従うそうです。(が、若干「絶対的サイズのキーワード」より比率が小さい気がします。ブラウザによるかもだけど)

実際に試してみます。

font-size: smaller での指定4 font-size: smaller での指定3 font-size: smaller での指定2 font-size: smaller での指定1 font-size: medium での指定(16px) font-size: larger での指定1 font-size: larger での指定2 font-size: larger での指定3 font-size: larger での指定4

ソースコードはこちら。
最初に <span style="font-size: medium"> で文字サイズを指定し、その<span>の中に次々入れ子にして smaller, larger を指定しています。
相対値なので、親から継承したフォントサイズをどんどん縮小・拡大していきます。

<div style="font-size:initial" class="mihon">
  <span style="font-size:medium">
    <span style="font-size:smaller">
      <span style="font-size:smaller">
        <span style="font-size:smaller">
          <span style="font-size:smaller">
          font-size: smaller での指定4
          </span>
        font-size: smaller での指定3
        </span>
      font-size: smaller での指定2
      </span>
    font-size: smaller での指定1
    </span>
  font-size: medium での指定(16px)
    <span style="font-size:larger">
    font-size: larger での指定1
      <span style="font-size:larger">
      font-size: larger での指定2
        <span style="font-size:larger">
        font-size: larger での指定3
          <span style="font-size:larger">
          font-size: larger での指定4
          </span>
        </span>
      </span>
    </span>
  </span>
</div>

単位付き数値での指定1「相対的な単位」

フォントサイズを指定する単位には、「相対的な単位」と「絶対的な単位」があります。

「相対的な単位」を使うと、親要素のフォントサイズに対して相対的な値を指定できます。
例えば、「font-size: 1.5em」と指定すれば、親要素のフォントサイズの1.5倍のサイズにできます。

「相対的な単位」には、ざっと次のものがあります。

相対的な単位
em 親のフォントサイズの高さを1とする
ex 小文字「x」のフォントサイズの高さを1とする(実際は、1ex = 0.5em)
rem ルート(<html>要素)のフォントサイズの高さを1とする(デフォルト値 1rem=16px)

「em」と「ex」の違いは文字の高さ。
em はフォントサイズの高さを 1 とし、exは「emの2分の1」です。
emとexの関係

emは、元々は大文字の「M」の高さを1とすると言われ、「M」の読み方が「em(エム)」なので、この単位名になったとか。exは小文字「x」の高さを1とすると言われていたのでこの単位名です。

remはルート要素(root = <htm>l要素)のフォントサイズを1とします。 直近の親要素のフォントサイズからは何の影響も受けません。
ブラウザのデフォルトのフォントサイズは「16px」なので、「1rem = 16px」です。

ちょっと実験してみます。
<span>要素を入れ子にして、親要素に対して1.5emのサイズを指定。中の<span>の1つだけクラス名を付けて、フォントサイズを「1rem(ルートのフォントサイズの1倍)」にしてみます。

<div class="test-rem" style="font-size:initial">
  <span>外側のspan要素<br>
    <span>内側のspan要素1</span><br>
    <span class="rem">内側のspan要素2(remで指定)</span>
  </span>
</div>

<style>
.test-rem span {
	font-size:1.5em /*span要素に「em」で指定*/
	}
.test-rem span.rem {
	font-size:1rem /*クラス名を付けた span要素のみ「1rem」に*/
	}
</style>

結果はコレ↓

外側のspan要素
内側のspan要素1
内側のspan要素2(remで指定)

「1.5em」で指定した <span>は、入れ子になると1.5倍の1.5倍(=2.25倍)になっていますが、「1rem」を指定した <span>は 16pxで表示されます。

単位付き数値での指定2「絶対的な単位」

「絶対的な単位」を使うと、親要素のフォントサイズに関係なくサイズ指定できます。
例えば「font-size: 20px」と指定すれば、親要素のフォントサイズに関係なく「20px」のフォントサイズにします。

「絶対的な単位」には、次のものがあります。(pxを使うのが一般的かな)

絶対的な単位
px ディスプレイ上の1ピクセルを最小単位にした値。1px = 1インチの96分の1
pt ポイント。元々DTPで使われる単位。1ポイント = 72分の1インチ = 約1.33px
pc パイカ。これも元々DTPでの単位。1パイカ = 6分の1インチ = 12pt = 16px
in 1インチ = 約2.54cm = 96px = 72pt = 6pc
mm メートル法のミリメートル。
cm センチ。1cm = 1mm

パーセンテージでの指定

親のフォントサイズに対して、相対的に%で指定します。

パーセンテージは「em」で指定するのと同じです。
例えば「font-size: 120%」は「font-size: 1.2em」と同じ。

次回予告

次回は、フォントのウェイト(太さ)を指定する font-weightプロパティを使います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2018/04 | 05
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.