【CSS】font-sizeプロパティで文字の大きさを変更する

プログラミング

表示文字サイズをfont-sizeで変更

font-sizeはCSS(スタイルシート)のプロパティのひとつで、表示するフォントの大きさを変更することが可能です。
値は、「small」「large」などの絶対的なサイズや、「px」「em」、「」などで指定することができます。

font-sizeプロパティの書き方

.text {
    font-size: ;
}

値の種類

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

mediumが基準の大きさとなり、xが付くほど大小幅が大きくなります。

font-size: 10px;
font-size: 2em;
font-size: 200%;

pxは画面幅やデバイスに関係なく大きさ関係なく、モニターの画素(ピクセル)を1とする単位です。
その性質上、レスポンシブデザインのウェブサイトには合いません。
emは親要素のフォントのサイズの何文字分の大きさかを指定する単位です。
2emであれば「親要素の2文字分の大きさ」となります。
%は親要素のフォントサイズからの相対値となります。
200%であれが「親要素の2倍の大きさ」となります。

font-sizeの記述例

<body>
    <p class="text1">フォントのサイズを変更</p>
    <p class="text2">フォントのサイズを変更</p>
    <p class="text3">フォントのサイズを変更</p>
    <p class="text4">フォントのサイズを変更</p>
    <p class="text5">フォントのサイズを変更</p>
</body>
.text1 {
    font-size: large;
}

.text2 {
    font-size: small;
}

.text3 {
    font-size: 20px;
}

.text4 {
    font-size: 2em;
}

.text5 {
    font-size: 150%;
}

タイトルとURLをコピーしました