ホーム＞コース別ガイド一覧＞文字の大きさを指定しよう！
文字の大きさを指定しよう！（font-size プロパティ） |
   |
使用プロパティ セレクタ { font-size: 文字のサイズ; }
CSS一覧プロパティ辞典 … font-size プロパティ
font-size プロパティを使うと文字のサイズ（フォントサイズ）を指定できます。長さ、パーセンテージ、絶対値や相対値を表すキーワードを指定できます。長さについては「単位と長さ」を参考にしてください。
font-sizeプロパティのキーワードについて！
キーワードによる指定は「small」、「large」、「larger」などを値に記述しますが、現段階ではブラウザごとに表示が異なる場合がありますので、長さやパーセンテージで指定したほうがいいでしょう！
使用例
では、実際に p 要素の文字のサイズを変更してみましょう！ここでは、文字サイズが変わったかわかりやすくするため、値を「1.5em」にしてあります。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
p { font-size: 1.5em;}
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
</body>
</html> |
|
使用例の表示
[font-sizeプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方 |
|
|
[font-sizeプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方 |
|
前項の「使用例」のように、セレクタに p 要素、プロパティに font-size プロパティを指定し、値にはの1.5emを入力した場合のブラウザでの表示です。
セレクタで指定している p 要素は「使用例」のHTML文書には２つあり、これらに「font-size: 1.5em;」が適応されされるので、２つのフォントサイズが大きくなりました。
