4-13-1a 文字の大きさを設定
文字の大きさを設定する方法です。font-sizeプロパティを利用致します。(下記の見本では「body」部を全て一括で指定しております)。
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
font-size: medium; /* 文字の大きさ */
}
-->
</style>
- フォントサイズを設定しなかった場合、デフォルトの大きさ(medium)が表示されます。(いわゆる<font size="3">の大きさの事です)
- サイズを指定する方法は
数値+単位、%(パーセント)、キーワードで指定の3方法あります。
(例:10pt、120%、small等) - 数値+単位を利用する場合
単位は出来るだけ相対単位をご利用下さい - キーワードで指定する場合
xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があります。
「body」部分は他のタグ(見出しに使用する「h1」 や 強調の「strong」等)に置き換える事も出来ます。 class属性 を利用すればかなり幅広く設定出来ます(下記の見本参照)。
[ 関連事項 : HP-TIPS > CSS > CSSにおける長さの単位 ]
[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
4-13-1b 具体的な見本
大きさの見本をclass属性 を利用して表示しております。
CSS
<head> ~ </head> 内に記述して下さい。<!--
/* 数値+単位で指定 */
.sample-1a { font-size: 8pt ; } /* ptで指定 */
.sample-2a { font-size: 9pt ; }
.sample-3a { font-size: 10pt ; }
.sample-4a { font-size: 11pt ; }
.sample-5a { font-size: 12pt ; }
.sample-6a { font-size: 8px ; } /* pxで指定 */
.sample-7a { font-size: 9px ; }
.sample-8a { font-size: 10px ; }
.sample-9a { font-size: 11px ; }
.sample-10a { font-size: 12px ; }
.sample-11a { font-size: 1em ; } /* emで指定 */
.sample-12a { font-size: 2em ; }
.sample-13a { font-size: 3em ; }
/* %で指定 */
.sample-1b { font-size: 100% ; }
.sample-2b { font-size: 110% ; }
.sample-3b { font-size: 150% ; }
.sample-4b { font-size: 200% ; }
/* キーワードで指定 */
.sample-1c { font-size: xx-small ; }
.sample-2c { font-size: x-small ; }
.sample-3c { font-size: small ; }
.sample-4c { font-size: medium ; }
.sample-5c { font-size: large ; }
.sample-6c { font-size: x-large ; }
.sample-7c { font-size: xx-large ; }
.sample-1c { font-size: xx-small ; }
</style>
HTML
<body> ~ </body> 内に記述して下さい。
<span class="sample-1a">この文字は「8pt」の見本です</span>
<span class="sample-2a">この文字は「9pt」の見本です</span>
<span class="sample-3a">この文字は「10pt」の見本です</span>
<span class="sample-4a">この文字は「11pt」の見本です</span>
<span class="sample-5a">この文字は「12pt」の見本です</span>
<span class="sample-6a">この文字は「8px」の見本です</span>
<span class="sample-7a">この文字は「9px」の見本です</span>
<span class="sample-8a">この文字は「10px」の見本です</span>
<span class="sample-9a">この文字は「11px」の見本です</span>
<span class="sample-10a">この文字は「12px」の見本です</span>
<p class="sample-11a">この文字は「1em」の見本です</p>
<p class="sample-12a">この文字は「2em」の見本です</p>
<p class="sample-13a">この文字は「3em」の見本です</p>
<p class="sample-1b">この文字は「100%」の見本です</p>
<p class="sample-2b">この文字は「110%」の見本です</p>
<p class="sample-3b">この文字は「150%」の見本です</p>
<p class="sample-4b">この文字は「200%」の見本です</p>
<p class="sample-1c">この文字は「xx-small」の見本です</p>
<p class="sample-2c">この文字は「x-small」の見本です</p>
<p class="sample-3c">この文字は「small」の見本です</p>
<p class="sample-4c">この文字は「medium」の見本です</p>
<p class="sample-5c">この文字は「large」の見本です</p>
<p class="sample-6c">この文字は「x-large」の見本です</p>
<p class="sample-7c">この文字は「xx-large」の見本です</p>
表示結果
【 数値+単位指定の見本 】
/* ptで指定 */
この文字は「8pt」の見本です
この文字は「9pt」の見本です
この文字は「10pt」の見本です
この文字は「11pt」の見本です
この文字は「12pt」の見本です
/* pxで指定 */
この文字は「8px」の見本です
この文字は「9px」の見本です
この文字は「10px」の見本です
この文字は「11px」の見本です
この文字は「12px」の見本です
/* emで指定 */
この文字は「1em」の見本です
この文字は「2em」の見本です
この文字は「3em」の見本です
【 %で指定の見本 】
この文字は「100%」の見本です
この文字は「110%」の見本です
この文字は「150%」の見本です
この文字は「200%」の見本です
【 キーワード指定の見本 】
この文字は「xx-small」の見本です
この文字は「x-small」の見本です
この文字は「small」の見本です
この文字は「medium」の見本です
この文字は「large」の見本です
この文字は「x-large」の見本です
この文字は「xx-large」の見本です
その他、特定のセレクタ(例:「body」、「p」等)に複数のプロパティ(「color」、「font-size」等)を設定する見本は 『4-9 見出しを修飾する』 をご覧下さい。
[ 関連事項 : HP-TIPS > HPの作り方 > 用語集 > セレクタ ]
[ 関連事項 : HP-TIPS > HPの作り方 > 用語集 > プロパティ ]