このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

font-size:フォントサイズ

記事Aug. 17th,2020
フォントサイズ、文字の大きさを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 font-size: medium;
適用対象 すべての要素
継承
パーセント値 親要素のフォントサイズを参照
仕様書 CSS Fonts Module

font-size”はフォントサイズ、文字の大きさを指定するプロパティです。

サンプルコード

span { font-size: large;}

説明
<absolute-size>”値
medium ブラウザのデフォルトの大きさ
small ブラウザのデフォルトの大きさより小さい(“medium”の8/9倍)
x-small small”より小さい(“medium”の3/4倍)
xx-small x-small”よりさらに小さい(“medium”の3/5倍)
large ブラウザのデフォルトの大きさより大きい(“medium”の6/5倍)
x-large large”より大きい(“medium”の3/2倍)
xx-large x-large”よりさらに大きい(“medium”の2/1倍)
<relative-size>”値
smaller 親要素のフォントサイズより小さい
larger 親要素のフォントサイズより大きい
他のデータ型
inherit 親要素のプロパティ値を継承する
<length> em”、“ex”などでフォントサイズを指定
<percentage> 親要素のフォントサイズを“100%”としてフォントサイズを指定

使用例

キーワードでフォントサイズを指定する

<absolute-size>”値で指定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルの文書</title>
<style>
.font-3s {
font-size: xx-small;
}

.font-2s {
font-size: x-small;
}

.font-s {
font-size: small;
}

.font-m {
font-size: medium;
}

.font-l {
font-size: large;
}

.font-2l {
font-size: x-large;
}

.font-3l {
font-size: xx-large;
}
</style>
</head>
<body>

文字の大きさを10pxに指定したボックス
<div class="box-font10px">

<p>このボックスの文字の大きさは10pxです。</p>
<p><span class="font-3s">大きさ“xx-small”のテキスト</span></p>
<p><span class="font-2s">大きさ“x-small”のテキスト</span></p>
<p><span class="font-s">大きさ“small”のテキスト</span></p>
<p><span class="font-m">大きさ“medium”のテキスト</span></p>
<p><span class="font-l">大きさ“large”のテキスト</span></p>
<p><span class="font-2l">大きさ“x-large”のテキスト</span></p>
<p><span class="font-3l">大きさ“xx-large”のテキスト</span></p>

</div>

文字の大きさを16pxに指定したボックス
<div class="box-font16px">

<p>このボックスの文字の大きさは16pxです。</p>
<p><span class="font-3s">大きさ“xx-small”のテキスト</span></p>
<p><span class="font-2s">大きさ“x-small”のテキスト</span></p>
<p><span class="font-s">大きさ“small”のテキスト</span></p>
<p><span class="font-m">大きさ“medium”のテキスト</span></p>
<p><span class="font-l">大きさ“large”のテキスト</span></p>
<p><span class="font-2l">大きさ“x-large”のテキスト</span></p>
<p><span class="font-3l">大きさ“xx-large”のテキスト</span></p>

</div>
...
文字の大きさを10pxに指定したボックス

このボックスの文字の大きさは10pxです。

大きさ“xx-small”のテキスト

大きさ“x-small”のテキスト

大きさ“small”のテキスト

大きさ“medium”のテキスト

大きさ“large”のテキスト

大きさ“x-large”のテキスト

大きさ“xx-large”のテキスト

文字の大きさを16pxに指定したボックス

このボックスの文字の大きさは16pxです。

大きさ“xx-small”のテキスト

大きさ“x-small”のテキスト

大きさ“small”のテキスト

大きさ“medium”のテキスト

大きさ“large”のテキスト

大きさ“x-large”のテキスト

大きさ“xx-large”のテキスト

<absolute-size>”値で指定されたフォントサイズは親要素のフォントサイズの影響を受けません。

<relative-size>”値で指定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルの文書</title>
<style>
.font-small {
font-size: smaller;
}
.font-large {
font-size: larger;
}
</style>
</head>
<body>

文字の大きさを10pxに指定したボックス
<div class="box-font10px">

<p>このボックスの文字の大きさは10pxです。</p>
<p><span class="font-small">大きさ“smaller”のテキスト</span></p>
<p><span class="font-large">大きさ“larger”のテキスト</span></p>

</div>

文字の大きさを16pxに指定したボックス
<div class="box-font16px">

<p>このボックスの文字の大きさは16pxです。</p>
<p><span class="font-small">大きさ“smaller”のテキスト</span></p>
<p><span class="font-large">大きさ“larger”のテキスト</span></p>

</div>
...
文字の大きさを10pxに指定したボックス

このボックスの文字の大きさは10pxです。

大きさ“smaller”のテキスト

大きさ“larger”のテキスト

文字の大きさを16pxに指定したボックス

このボックスの文字の大きさは16pxです。

大きさ“smaller”のテキスト

大きさ“larger”のテキスト

<relative-size>”値で指定されたフォントサイズは“<absolute-size>”値で指定されたフォントサイズと違い、親要素のフォントサイズの影響を受けます。

emなどのフォント相対長の単位でも親要素のフォントサイズを基準とした相対的なフォントサイズを指定できます。

長さの単位でフォントサイズを指定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルの文書</title>
<style>
.font-20px {
font-size: 20px;
}
.font-2cm {
font-size: 2cm;
}
.font-2em {
font-size: 2em;
}
.font-2rem {
font-size: 2rem;
}
</style>
</head>
<body>

文字の大きさを10pxに指定したボックス
<div class="box-font10px">

<p>このボックスの文字の大きさは10pxです。</p>
<p><span class="font-20px">大きさ“20px”のテキスト</span></p>
<p><span class="font-2cm">大きさ“2cm”のテキスト</span></p>
<p><span class="font-2em">大きさ“2em”のテキスト</span></p>
<p><span class="font-2rem">大きさ“2rem”のテキスト</span></p>

</div>

文字の大きさを16pxに指定したボックス
<div class="box-font16px">

<p>このボックスの文字の大きさは16pxです。</p>
<p><span class="font-20px">大きさ“20px”のテキスト</span></p>
<p><span class="font-2cm">大きさ“2cm”のテキスト</span></p>
<p><span class="font-2em">大きさ“2em”のテキスト</span></p>
<p><span class="font-2rem">大きさ“2rem”のテキスト</span></p>

</div>
...
文字の大きさを10pxに指定したボックス

このボックスの文字の大きさは10pxです。

大きさ“20px”のテキスト

大きさ“2cm”のテキスト

大きさ“2em”のテキスト

大きさ“2rem”のテキスト

文字の大きさを16pxに指定したボックス

このボックスの文字の大きさは16pxです。

大きさ“20px”のテキスト

大きさ“2cm”のテキスト

大きさ“2em”のテキスト

大きさ“2rem”のテキスト

pxなどの絶対長の長さでフォントサイズを指定した場合、どのような環境でも同じようにウェブページを表示できます。しかし、例えば弱視のユーザーが大きな文字で閲覧したい場合など、ユーザーが大きさを変更できないためアクセシビリティの点からはよくないとされます。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク