ホーム >>> HTML整理ノート

フォントサイズ　font-sizeスタイル

フォントの大きさを指定するスタイル。

■単位による絶対指定･･･ポイント(pt)、ミリ(mm)、センチ(cm)、インチ(in) ピクセル(px)などで指定。

■相対サイズ指定･･･親要素のフォントサイズによる相対サイズ。
　　（親要素にサイズ指定が無い場合，<BODY>タグのデフォルトサイズによる）
　％指定･･･親要素の文字サイズに対する割合。150%で1.5倍に
　em指定･･･親要素のフォントの文字の高さを1emとする相対値
　　　（1.5emは親要素のフォントサイズの1.5倍の大きさに）
　ex指定･･･親要素のフォントの小文字"x"の高さを1exとする相対値

■キーワードによる相対指定
　　・xx-small　･･･mediumより3段階小さい。
　　・x-small　･･･mediumより2段階小さい。
　　・small　･･･mediumより1段階小さい。
　　・medium　･･･標準サイズ（初期値）
　　・large　･･･mediumより1段階大きい。
　　・x-large　･･･mediumより2段階大きい。
　　・xx-large　･･･mediumより3段階大きい。
　　・smaller　1段階い小さくする
　　・larger　1段階大きくする

Sample
  • この文字は　font-size:10px
  • この文字は　font-size:14px
  • この文字は　font-size:10pt
  • この文字は　font-size:14pt
  • この文字は　font-size:5mm
  • この文字は　font-size:0.8cm
  • この文字は　font-size:0.3in

親要素にはfont-size:20pxが設定されている。

  • この文字は　font-size:80%
  • この文字は　font-size:120%
  • この文字は　font-size:0.8em
  • この文字は　font-size:1.2em
  • この文字は　font-size:1.2ex
  • この文字は　font-size:medium
  • この文字は　font-size:x-small
  • この文字は　font-size:x-large
  • この文字は　font-size:smaller
  • この文字は　font-size:larger
Script プロパティ･･･＜fontSize＞

CSS Style

　　　 　

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var fsize = 0;  //ﾌｫﾝﾄｻｲｽﾞの初期値
var df = 1;
var timerID;
function FontChange(){
        hh.style.fontSize = fsize;
        fsize += df;
        if(fsize < 1 ||fsize > 40)      df = -df;
        timerID = setTimeout("FontChange();",100);
}
//--></script>
</head>
<body>

<ul style="font-family: "ＭＳ 明朝"; ">
  <li style="font-size:10px">この文字は　font-size:10px
  <li style="font-size:14px">この文字は　font-size:14px
  <li style="font-size:10pt">この文字は　font-size:10pt
  <li style="font-size:14pt">この文字は　font-size:14pt
  <li style="font-size:5mm">この文字は　font-size:5mm
  <li style="font-size:0.8cm">この文字は　font-size:0.8cm
  <li style="font-size:0.3in">この文字は　font-size:0.3in
</ul>
<div style="font-size:20px;border:thin solid navy;">
<p>親要素にはfont-size:20pxが設定されている。</p>
<ul style="font-family: "ＭＳ 明朝"; ">
  <li style="font-size:80%">この文字は　font-size:80%
  <li style="font-size:120%">この文字は　font-size:120%
  <li style="font-size:0.8em">この文字は　font-size:0.8em
  <li style="font-size:1.2em">この文字は　font-size:1.2em
  <li style="font-size:1.2ex">この文字は　font-size:1.2ex
  <li style="font-size:medium">この文字は　font-size:medium
  <li style="font-size:x-small">この文字は　font-size:x-small
  <li style="font-size:x-large">この文字は　font-size:x-large
  <li style="font-size:smaller">この文字は　font-size:smaller
  <li style="font-size:larger">この文字は　font-size:larger
 </ul>
</div>

<h2 id="hh" style="height:60;color:green;font-family:'Arial Black';"
　　　　　　　　 align="center">CSS Style</h2>
<p><button onclick="FontChange();">動け！</button>
　　　<button onclick="clearTimeout(timerID);">停止</button>　
</p>