font-size

フォントの大きさを指定します。

ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

書式

要素[.class名][#id名]{ font-size : 値; }

▲PageTop

指定できる値

値	初期値	意味
数値+単位		サイズを指定します。単位例：px,em,ex,%
smaller		親要素よりも1段階小さくします。
larger		親要素よりも1段階大きくします。
xx-small		<font>要素でsize="1"としたときの大きさに相当します。
x-small		<font>要素でsize="2"としたときの大きさに相当します。
small		<font>要素でsize="3"としたときの大きさに相当します。
medium	○	<font>要素でsize="4"としたときの大きさに相当します。
large		<font>要素でsize="5"としたときの大きさに相当します。
x-large		<font>要素でsize="6"としたときの大きさに相当します。
xx-large		<font>要素でsize="7"としたときの大きさに相当します。
inherit		親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        font-size : 8pt;
      }
      #sample2 {
        font-size : smaller;
      }
      #sample3 {
        font-size : larger;
      }
      #sample4 {
        font-size : xx-small;
      }
      #sample5 {
        font-size : x-small;
      }
      #sample6 {
        font-size : small;
      }
      #sample7 {
        font-size : medium;
      }
      #sample8 {
        font-size : large;
      }
      #sample9 {
        font-size : x-large;
      }
      #sample10 {
        font-size : xx-large;
      }
    </style>
  </head>
  <body>
    <div id="sample1">font-sizeサンプル1</div>
    <div id="sample2">font-sizeサンプル2</div>
    <div id="sample3">font-sizeサンプル3</div>
    <div id="sample4">font-sizeサンプル4</div>
    <div id="sample5">font-sizeサンプル5</div>
    <div id="sample6">font-sizeサンプル6</div>
    <div id="sample7">font-sizeサンプル7</div>
    <div id="sample8">font-sizeサンプル8</div>
    <div id="sample9">font-sizeサンプル9</div>
    <div id="sample10">font-sizeサンプル10</div>
  </body>
</html>

表示結果

font-sizeサンプル1

font-sizeサンプル2

font-sizeサンプル3

font-sizeサンプル4

font-sizeサンプル5

font-sizeサンプル6

font-sizeサンプル7

font-sizeサンプル8

font-sizeサンプル9

font-sizeサンプル10

▲PageTop

font-size

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

HTML

CSS