font-size/フォントサイズ

font-sizeプロパティを使うと文字の大きさを変更出来ます。

説明

 font-sizeプロパティを使うとフォントを文字として表示する時のサイズを大きくしたり、小さくしたり設定出来ます。

font-size説明

構文

 font-sizeプロパティの構文は以下の通りです。

font-size: サイズ;

 サイズは相対的な大きさで指定する時は以下が使えます。

【文字サイズ】
指定 説明
% 現在の大きさに対する割合
em 現在のフォントサイズの何倍か
larger 一段階大きく
smaller 一段階小さく

 これは今の文字の大きさに対する指定のため、今の文字が大きいと更に大きくなったりします。

 絶対値ではpxと指定するとピクセルで指定出来、以下のように7段階で指定も出来ます。

【7段階指定】
指定 説明 px表示例
xx-small 一番小さい 9px
x-small 二番目に小さい 10px
small 小さい 13px
medium 標準 16px
large 少し大きく 18px
x-large もっと大きく 24px
xx-large 一番大きい 32px

 px表示例の欄はブラウザのデフォルトサイズが16pxだった場合に表示されるサイズの目安です。

利用例

 font-sizeの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

span {
font-size: 200%;
}

文章の途中で<span>200%表示</span>

 上記を表示すると以下になります。

文章の途中で200%表示

 以下に0.7em、9px、larger、smallerそれぞれを指定した時の表示を示します。

文章の途中で0.7em表示
文章の途中で9px表示
文章の途中でlarger表示
文章の途中でsmaller表示

 7段階指定では小さい順に並べて表示します。

文章の途中でxx-small表示
文章の途中でx-small表示
文章の途中でsmall表示
文章の途中でmedium表示
文章の途中でlarge表示
文章の途中でx-large表示
文章の途中でxx-large表示

入れ子

 以下のように入れ子にした場合です。

.test {
font-size: 150%;
}

文章の途中で<span class="test">150%<span class="test">更に150%</span></span>

 上記を表示すると以下になります。

文章の途中で150%更に150%

 重複して有効になります。

 これはem、larger、smallerで指定しても同様です。

 次に7段階で指定した場合です。

.test {
font-size: large;
}

文章の途中で<span class="test">large<span class="test">更にlarge</span></span>

 上記を表示すると以下になります。

文章の途中でlarge更にlarge

 7段階指定は決まった大きさのため、重複しません。このため、大きなサイズで表示される<h1>タグに指定しても標準サイズで表示される<p>タグに指定しても同じ大きさになります。

 又、body等でページ全体のサイズを変更していてもmediumで標準サイズに戻す事が出来ます。

補足

 通常はbodyでページ全体のフォントサイズを指定し、変更したい箇所だけクラス等で定義するか、<span style="font-size: 90%;">等で直接指定します。

関連ページ

・ホームページ作成「フォントの変更

 フォントサイズだけでなく、種類や色、太字等フォント全般の変更方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)