font-size/フォントサイズ

説明

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

構文

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

font-size: サイズ;

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

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

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

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

利用例

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

span {
font-size: 200%;
}

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

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

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

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

入れ子

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

.test {
font-size: 150%;
}

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

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

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

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

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

.test {
font-size: large;
}

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

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

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

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

補足

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

関連ページ

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

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

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

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

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

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