font-size: ★

CSS 38p 82p

フォントの大きさを決めるタグ
※必ず★には単位名を入れる。
例 10px 1em 100%
相対値、親要素に対して自信を何％で表示するかという単位。
指定方法は下の通りです。

  • 絶対サイズ
    フォントサイズを7段階の絶対サイズで指定します。
    xx-small x-small small medium
    large x-large xx-large
    「xx-small」が一番小さいサイズでCSSでは階級が
    1つ上がるたびに1.2倍ずつ」大きくなります。
    基準値はmediumです。
  • 相対サイズ
    親要素フォントサイズに対する相対サイズの指定。
    larger smaller
    「larger」で1段階大きくして、「smaller」で1段階小さい
    サイズを指定します。
    たとえば親要素が「medium」で指定した場合「larger」を指定すると
    フォントサイズは「large」と解釈されます。
    medium+larger=large
  • 相対単位
    px
    ディスプレイ上の1ピクセルを1とする単位。
    実際に表示される大きさはディスプレイによって変わってくる。
    em
    フォントサイズを1とする単位。
    ex
    小文字のxの高さを1とする単位。
  • 絶対単位
    in
    インチ（1in=2.54cm）
    cm
    センチメートル
    mm
    ミリメートル pt
    ポイント（1pt=1/72in）
    pc
    パイカ（1pc=12pt）
  • パーセント値
    標準にフォントサイズに対して何％であらわすか。

数字だけではよくわからないと思いますので実際に書いていきます。

 例  CSS
p.sample1 {
font-size: xx-small;
}

p.sample2 {
font-size: x-small;
}

sample3 {
font-size: small;
}

sample4 {
font-size: medium;
}

sample5 {
font-size: large;
}

sample6 {
font-size: x-large;
}

sample7 {
font-size: xx-large;
}

sample8 {
font-size: smaller;
}

sample9 {
font-size: larger;
}

sample10 {
font-size: 10px;
}

sample11 {
font-size: 2em;
}

sample12 {
font-size: 10ex;
}

sample13 {
font-size: 80%;
}

sample14 {
font-size: 150%;
}
 XHTML
<body>
<p>
初期設定のフォントサイズはこの大きさです。
<⁄p>
<p class="sample1">
おはようございます。
<⁄p>
<⁄p>
<p class="sample2">
おはようございます。
<⁄p>
<⁄p>
<p class="sample3">
おはようございます。
<⁄p>
<⁄p>
<p class="sample4">
おはようございます。
<⁄p>
<⁄p>
<p class="sample5">
おはようございます。
<⁄p>
<⁄p>
<p class="sample6">
おはようございます。
<⁄p>
<⁄p>
<p class="sample7">
おはようございます。
<⁄p>
<⁄p>
<p class="sample8">
おはようございます。
<⁄p>
<⁄p>
<p class="sample9">
おはようございます。
<⁄p>
<⁄p>
<p class="sample10">
おはようございます。
<⁄p>
<⁄p>
<p class="sample11">
おはようございます。
<⁄p>
<⁄p>
<p class="sample12">
おはようございます。
<⁄p>
<⁄p>
<p class="sample13">
おはようございます。
<⁄p>
<⁄p>
<p class="sample14">
おはようございます。
<⁄p>

すこし長くなりましたが、CSSとXHTMLで実際に書くとこうなります。
ここをクリック！

トップに戻る