4-13-1a 文字の大きさを設定

文字の大きさを設定する方法です。font-sizeプロパティを利用致します。(下記の見本では「body」部を全て一括で指定しております)。

<head> ~ </head> 内に記述して下さい。

<style type="text/css">
<!--
body {
font-size: medium; /* 文字の大きさ */
} -->
</style>

「body」部分は他のタグ(見出しに使用する「h1」強調の「strong」等)に置き換える事も出来ます。 class属性 を利用すればかなり幅広く設定出来ます(下記の見本参照)。

[ 関連事項 : HP-TIPS > CSS > CSSにおける長さの単位 ]
[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

4-13-1b 具体的な見本

大きさの見本をclass属性 を利用して表示しております。

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--

/* 数値+単位で指定 */
.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の作り方 > 用語集 > プロパティ ]