文字の大きさを指定する
上部
先ほどのスタイルシートで使う単位の所でもちょっと説明したけどスタイルシートで文字の大きさを指定する方法を説明するよ。
文字の大きさを指定するには「font-size」を使うんだよ。
学
そうでしたね。覚えてますよ。
上部
文字の大きさを指定する場合は、「%」と「px」を使って指定する場合が多いよ。
%で文字の大きさを指定する
%を使うと何も指定しない場合に対する割合で文字の大きさを指定する事が出来るよ。 例えば、段落の文字の大きさを９０％にしたい場合は、スタイルシートに次のように書こう。
p{font-size:90%;}
ここで一つ便利な方法を紹介するよ。ページ全てに対して文字の大きさを９０％にしたい場合は、スタイルシートに次のように書こう。
*{font-size:90%;}
学
ほー、この「*」を使えば全体にスタイルが適用されるんですね。これは便利ですね。
上部
ちなみに、%で文字の大きさを指定した場合、ブラウザ側で文字の大きさを変えると文字の大きさが変化するよ。
pxで文字の大きさを指定する
pxを使うと具体的に文字の大きさを指定する事が出来るよ。 例えば、段落の文字の大きさを12pxにしたい場合は、スタイルシートに次のように書こう。p{font-size:12px;}
pxで文字の大きさを指定した場合、ブラウザで文字の大きさを変えても文字の大きさが変化しないという特徴があるよ。
学
では、僕の自己紹介のスタイルシートに文字の大きさの指定を追加してみます。
h1{
text-align:center;
font-size:20px;
}
h2{font-size:15px;}
h3{font-size:13px;}
p{font-size:12px;}
ul{font-size:12px;}
table{font-size:12px;}
全体的に文字の大きさを小さくしてみました！
学の自己紹介を新しいウィンドウで開く
ちゃんと文字の大きさが小さくなりましたよ！
文字の大きさを指定する際の注意
上部
スタイルシートで文字の大きさを指定するとき、文字を小さくしすぎると見難くなるので注意しよう。
