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

font-size:文字の大きさ

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

プロパティについて

概要

初期値 font-size: medium;
適用対象 すべての要素
継承 する
パーセント値 親要素のフォントサイズに依存

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 親要素のフォントサイズより大きい
他のデータ型
<length> emexなどでフォントサイズを指定
<percentage> 親要素のフォントサイズを“100%”としてフォントサイズを指定

使用例

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

.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;}
文字の大きさを10pxに指定したボックス

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

font-size: xx-small;

font-size: x-small;

font-size: small;

font-size: medium;

font-size: large;

font-size: x-large;

font-size: xx-large;

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

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

font-size: xx-small;

font-size: x-small;

font-size: small;

font-size: medium;

font-size: large;

font-size: x-large;

font-size: xx-large;

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

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

.font-small { font-size: smaller;}
.font-large { font-size: larger;}
文字の大きさを10pxに指定したボックス

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

font-size: smaller;

font-size: larger;

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

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

font-size: smaller;

font-size: larger;

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

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

<length>”値で指定する

.font-20px { font-size: 20px;}
.font-2cm { font-size: 2cm;}
.font-2em { font-size: 2em;}
.font-2rem { font-size: 2rem;}
文字の大きさを10pxに指定したボックス

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

font-size: 20px;

font-size: 2cm;

font-size: 2em;

font-size: 2rem;

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

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

font-size: 20px;

font-size: 2cm;

font-size: 2em;

font-size: 2rem;

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

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