スタイルシートで文字を書く

目次

Ⅰ．フォントの太さを指定する

font-weight: 太さ

［太さ］
normal,bold,lighter,bolder
100,200,300,400,500,600,700,800,900

［サンプル］
例見本
<span style="font-nomal: normal">normal</span> normal
<span style="font-nomal: bold">bold</span> bold
<span style="font-nomal: lighter">lighter</span> lighter
<span style="font-nomal: bolder">bolder</span> bolder

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
</HEAD>
<BODY>
<span style="font-nomal: bold">bold</span>
</BODY>
</HTML>

備考：
「ｂｏｌｄ」は一般的な太字、「ｌｉｇｈｔｅｒ］は１段階細いフォント、「ｂｏｌｄｅｒ］は
１段階太いフォントになります。
また、１００～９００の数値の、４００は「ｎｏｒｍａｌ」、７００は「ｂｏｌｄ」に相当します。

Ⅱ．フォントサイズを指定する

font-size: サイズ

［太さ］
単位付の数値・%・smaller・larger
xx-small・x-small・small・medium・large・x-large・xx-large

［サンプルⅠ］
例見本
<span style="font-size: 24px">24px</span> 24px
<span style="font-size: 180%">180%</span> 180%
<span style="font-size: smaller">smaller</span> smaller
<span style="font-size: larger">larger</span> larger
<span style="font-size: large">large</span> large

［サンプルⅡ］
例見本
<span style="font-size: xx-small">xx-small</span> xx-small
<span style="font-size: x-small">x-small</span> x-small
<span style="font-small: small">small</span> small
<span style="font-size: medium">medium</span> medium
<span style="font-size: large">large</span> large
<span style="font-size: x-large">x-large</span> x-large
<span style="font-size: xx-large">xx-large</span> xx-large

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
</HEAD>
<BODY>
<span style="font-size: 24px">font-size 24px</span>
</BODY>
</HTML>

Ⅲ．フォントの種類を指定する

font-family: フォント名、フォント名、フォント名、…

［フォント名］
フォントファミリー名
キーワード（serif・sans-serif・cursive・fantasy・monospace）

［キーワード］
キーワード説明例
serif明朝系（Times New Romsn・ＭＳ P明朝）serif
sans-serifゴシック系（Helvetica・Arial・ＭＳ Pゴシック）sans-serif
cursive草書系（Caflisch Script・Adode Poetica）cursive
fantasy装飾的なフォント（Critter・Cottonwood）fantasy
monospace等フォント（Courier New・ＭＳ ゴシック）monospace

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 .serif { font-family: serif,"ＭＳ P明朝" }
 .sans_serif { font-family: sans-serif }
 .cursive { font-family: cursive }
 .fantasy { font-family: fantasy }
 .monospace { font-family: monospace }
-->
</STYLE>
</HEAD>
<BODY>
<span class="serif">serif</span>
<span class="sans_serif">sans-serif</span>
<span class="cursive">cursive</span>
<span class="fantasy">fantasy</span>
<span class="monospace">monospace</span>
</BODY>
</HTML>

備考：
　フォント名は、カンマで区切って複数指定することが出来ます。その場合、左から順に
　ユーザーの環境で表示可能なフォントが適用されます。

Ⅳ．文字間隔を指定する

letter-spacing: 文字間隔

サンプル
letter-spacing: 0.5em
letter-spacing: 1em

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 .ls1 { letter-spacing: 1em }
 .ls2 { letter-spacing: 2em }
-->
</STYLE>
</HEAD>
<BODY>
<SPAN class="ls1">letter-spacing: 0.5em</SPAN>
<SPAN class="ls2">letter-spacing: 1em</SPAN>
</BODY>
</HTML>

［メインに戻る］