[CSS] スタイルシートによる文字の大きさの変更 - フォントサイズの変更

このページのタグ:[CSS] [HTML]
スタイルシートを用いてフォントのサイズを変更する方法を紹介します。

CSSでフォントサイズを指定する場合は"font-size"プロパティを用います。

書式

font-size:(フォントサイズ)
フォントサイズは"数値+単位"または"(文字サイズを示すキーワード)"で指定します。

書式例


font-size:2em;

font-size:x-small;

使える単位の一覧

説明
ptポイントfont-size:12pt
pcパイカ(1pc=12pt)font-size:2pc
pxピクセルfont-size:20px
em"M"の高さを基準とした大きさfont-size:2em
ex"x"の高さを基準とした大きさfont-size:3ex
mmミリメートルfont-size:10mm
cmセンチメートルfont-size:2cm
inインチfont-size:4in
%パーセントfont-size:75%

利用可能なキーワード

説明
xx-smallfont-size:xx-small
x-smallfont-size:x-small
smallfont-size:small
mediumfont-size:medium
largefont-size:large
x-largefont-size:x-large
xx-largefont-size:xx-large

補足

親要素の値を継承する場合は下記を指定します。
説明
inherit親要素の値を強制的に継承するfont-size:inherit

コード

以下のコードを記述します。

CssFontSize.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleFontSize.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<span class="TextStyle20pt">Penguin : ペンギンは鳥だが泳げる。</span>
<br />
<span class="TextStyle10pt">Penguin : ペンギンは鳥だが泳げる。</span>
<br />
<span class="TextStyle5pt">Penguin : ペンギンは鳥だが泳げる。</span>
</body>
</html>

StyleFontSize.css


.TextStyle20pt
{
  font-size:20pt;
}

.TextStyle10pt
{
  font-size:10pt;
}

.TextStyle5pt
{
  font-size:5pt;
}

解説

CSSの宣言ブロック内で"font-size"を記述するとフォントサイズを変更できます。
上記のコードではpt(ポイント数)でフォントサイズを指定していますが、px(ピクセル),em,での指定もできます。xx-small, x-small, small, medium, large, x-large, xx-largeのキーワードでも指定できます。

表示結果

HTMLファイルをWebブラウザで表示すると下図の表示となります。

登録日 :2012-08-10    最終更新日 :2015-07-27
このページのタグ:[CSS] [HTML]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)