フォント(文字)の大きさを変えるには、プロパティにfont-sizeを指定します。
font-size:値と単位の指定;
}
文字の大きさを指定するにはいくつか方法があり、px、%、キーワード(smallやlarge)などを使うことができます。
ピクセル指定[px]
文字の大きさを表す単位です。pxで指定するには、14pxや32pxなどのように、数値と単位で文字の大きさを指定します。
文字サイズを14pxにしたい場合、font-size:14px;とします。
一般的にはこのpx指定がよく利用されています。
パーセント指定[%]
現在の文字サイズを100%として、変更後の文字サイズを%で指定します。
例えば、現在の文字サイズよりも50%大きいサイズに変更したい場合は、font-size:150%;と指定します。
キーワードによる指定
文字を小さくしたい場合は「small」、大きくしたい場合は「large」など、文字のサイズをキーワードで指定する方法です。
キーワード指定の種類はxx-smallからxx-largeまであります。
記述例
例として、文字の大きさを18pxに指定してみます。18pxに指定するには、font-size:を18pxとします。
[CSSの記述例]font-size:18px;
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>文字の大きさを変える</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p>通常の文字サイズ</p>
<p class="moji">18pxの文字サイズ</p>
</body>
</html>
なお、<h1>や<h2>など、はじめから文字サイズの大きなタグも、font-sizeを指定することによりサイズの調整が可能です。
覚えておきたいポイント
サイズに気をつけよう
極端に大きくしたり、小さくしたりすると読みにくいだけでなく、検索エンジンから迷惑行為と見なされる場合もあります。
文字サイズを見えないくらいまで小さくして、キーワードを羅列するような行為は絶対に行わないようにしましょう。