文字の大きさを設定する。

2015年6月16日

文字の大きさを設定するにはプロパティ「font-size」を使います。
サンプルコードのように指定できます。

    #container{
        background-color: greenyellow;
    }

    p.font16px{font-size:16px;}
    p.font14px{font-size:14px;}
    p.font12px{font-size:12px;}

    p.font100percent{font-size:100%}
    p.font75percent{font-size:75%}
    p.font50percent{font-size:50%}

    p.font1_50em{font-size:1.5em}
    p.font1_25em{font-size:1.25em}
    p.font1_00em{font-size:1em}

#container{

background-color: greenyellow;

}

p.font16px{font-size:16px;}

p.font14px{font-size:14px;}

p.font12px{font-size:12px;}

p.font100percent{font-size:100%}

p.font75percent{font-size:75%}

p.font50percent{font-size:50%}

p.font1_50em{font-size:1.5em}

p.font1_25em{font-size:1.25em}

p.font1_00em{font-size:1em}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">
    <p class="font16px">フォントサイズテスト</p>
    <p class="font14px">フォントサイズテスト</p>
    <p class="font12px">フォントサイズテスト</p>

    <p class="font100percent">フォントサイズテスト</p>
    <p class="font75percent">フォントサイズテスト</p>
    <p class="font50percent">フォントサイズテスト</p>

    <p class="font1_50em">フォントサイズテスト</p>
    <p class="font1_25em">フォントサイズテスト</p>
    <p class="font1_00em">フォントサイズテスト</p>
    
</div>
    
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

フォントサイズテスト

フォントサイズテスト

フォントサイズテスト

フォントサイズテスト

フォントサイズテスト

フォントサイズテスト

フォントサイズテスト

フォントサイズテスト

フォントサイズテスト

</div>

</body>

</html>

上記は「px」「%」「em」で指定していますが、「medium」と
いった方法で「font-size」を指定することができます。

emは現在使用しているフォントサイズを基準とした単位です。
何もしていないと16pxだったと思います。