スタイルシートの道具箱
当サイトについて リンク集
基礎編1
基礎編2
色リファレンス
小技集
テキスト
フォント
背景
配置
ボーダー
ボックス
リスト
テーブル
フィルタ
その他
 初心者による初心者の為のスタイルシート・リファレンス! 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい!
■フォント トップページ
フォント:目次

■フォントの種類

▲ページTOPへ

font-family: ●

フォント(書体)を指定します。
CSS1では以下の5種類が定義されています。
  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
セリフ(明朝体、つまり縦が太く横が細い書体)
サンセリフ(ゴシック体、つまり線の太さがどこも同じ)
筆記体
お遊び系フォント
等幅
上記以外にもシステムやブラウザにより色々なフォントが提供されていますが、
詳細はサンプルを見てもらった方が早いです^^;

■注意点1
複数のフォントを指定する場合はそれぞれを「,」で区切ります。
先に指定したフォントが優先され、それがユーザーの環境に無い場合は次のフォントが適用されます。
従って最後に示すフォントはどの環境でもありそうな一般的なものを選びましょう。
例:style="font-family:リュウミン,Garamond,serif"

■注意点2
フォント名に空白が含まれる場合は「"」か「'」で囲みます。
「'」はタグの中に埋め込む場合、「"」はヘッダや別ファイルでスタイルを設定する場合です。
例:"Times New Roman"

サンプル


これがゴシック系です。 ここからは明朝系です。
一方筆記体だったり、 ファンタジー系などもあります。
<span style="font-family:'MSゴシック',sans-serif;">これがゴシック系です。</span>
<span style="font-family:'MS明朝','MS P明朝',serif;">ここからは明朝系です。</span><br>
<span style="font-family:HG行書体,cursive;">一方筆記体だったり、</span>
<span style="font-family:fantasy,">ファンタジー系などもあります。</span>。

■フォントのサイズ

▲ページTOPへ

font-size:

フォントの大きさを指定します。指定方法は以下の通り。
  • 数値+単位
  • 数値+%
  • キーワード
pxやem等といった単位で指定
親要素のフォントサイズに対する%で指定
xx-small, xsmall, small, medium(デフォルト), large, x-large, xx-large、又はsmaller, larger
smalerとlargerは親要素に対して一段階小さく/大きく表示します。
一段階とは、上記の「xx-small」〜「xx-large」までの7段階の事を言います。

サンプル


これが初期状態(13px指定済)で これは8px、 これは20pxで、 ここは3em
これが初期状態(13px指定済)で
<span style="font-size:8px">これは8px、</span>
<span style="font-size:20px">これは20pxで、</span>
<span style="font-size:3em">ここは3em。</span>

ここは初期状態で、 これは150%、 こっちは200%です。
ここは初期状態で、 <span style="font-size:150%">これは150%、</span> <span style="font-size:200%">こっちは200%です。</span>

xx-large、 x-large、 large、 medium、 small、 x-small、 xx-small
<span style="font-size:xx-large">xx-large、</span>
<span style="font-size:x-large">x-large、</span>
<span style="font-size:large">large、</span>
<span style="font-size:medium">medium、</span>
<span style="font-size:small">small、</span>
<span style="font-size:x-small">x-small、</span>
<span style="font-size:xx-small">xx-small</span>

ここが通常サイズで、 これがsmaller、 こっちはlarger
ここが通常サイズで、
<span style="font-size:smaller">これがsmaller、</span>
<span style="font-size:larger">こっちはlarger</span>

■フォントの太さ

▲ページTOPへ

font-weight:

フォントの太さ、つまり文字を構成する「線」の太を調整します。
指定方法には以下の方法があります。
  • bold
  • bolder
  • lighter
  • normal
  • 数値
太く
一段階太く
一段階細く
通常の太さ(初期状態)
100〜900まで100ずつの単位で9段階の指定(初期状態は400)
数値で指定する場合、フォントにより太さの段階が異なります。
例えば太さ500を持つフォントもあれば、無い(=初期状態の400と同じ)というパターンもあります。
太さが二段階しか無いフォントも多いので、手っ取り早く太くするにはboldです。
boldは700と同じで、基本的に全てのフォントが太くなります。

サンプル


■MS明朝の場合(二段階のみ)
normal bold bolder lighter
100 200 300 400 500 600 700 800 900
<div style="font-family:'MS 明朝';font-weight:bold">...

■MSゴシックの場合(二段階のみ)
normal bold bolder lighter
100 200 300 400 500 600 700 800 900
<div style="font-family:'MS ゴシック';font-weight:100">...

■Times New Roman(100-500, 600, 700-800,900の4段階)
normal bold bolder lighter
100 200 300 400 500 600 700 800 900
<div style="font-family:'Times New Roman';font-weight:bolder">...

■イタリックにする

▲ページTOPへ

font-style:

文字をイタリック(斜体)にします。要は<i>と同じですね。
  • italic
  • normal
イタリックにする
通常状態(初期状態)

サンプル


ここが初期状態で、 ここからイタリックです。 そしてnormalに戻しました。
ここが初期状態で、
<span style="font-style:italic">ここからイタリックです。</span>
<span style="font-style:normal">そしてnormalに戻しました。</span>

■スモールキャピタル

▲ページTOPへ

font-variant:

スモールキャピタルとは、大文字英数字をやや小さくしたフォントです。
つまり元のフォントが大文字だろうが小文字だろうか、全て「やや小さい大文字」になります。
もちろん日本語フォントには有効ではありません。

設定値は以下のとおり。
  • small-caps
  • normal
スモールキャピタル
通常の状態(初期状態)

サンプル


stylesheet:これが初期状態
stylesheet:ここがsmall-caps
stylesheet:ここがnormal(初期状態と同じ)
STYLESHEET:ちなみにこれが普通の大文字
stylesheet:これが初期状態<br>
<span style="font-variant:small-caps">stylesheet</span>:ここがsmall-caps<br>
<span style="font-variant:normal">stylesheet</span>:ここがnormal(初期状態と同じ)<br>
STYLESHEET:ちなみにこれが普通の大文字

■一括指定

▲ページTOPへ

font:

上記で説明してきたfontに関する設定をこの一つのプロパティで全て設定出来ます。
省略も出来るので、フォント設定はこのプロパティだけでも事足ります。

設定方法は、以下のプロパティの値だけ指定します。sizeとfamilyは必須で、他は省略出来ます。
イタリックの設定
スモールキャピタル
太さ
サイズ
行の高さ
フォントの種類
次のシステムフォントを指定します⇒icon, menu, message-box, caption, status-bar
line-heightを指定する場合はfont-sizeの後に/(スラッシュ)をつけて指定します。
例:style="font:13px/15px century"

設定の順序ですが、font-familyやsizeをあれこれ入れ替えると、どうも反映する場合としない場合があります。
従ってsizeとfamilyは最後に持って来て、他のfont-style, font-variant, font-weightは順不同と言うのが無難で、一般的のようです。
システムフォントを指定する時は、それ以外の値は設定しません。

サンプル


これはサイズ18px、高さ100%、bold、MS明朝です。
<span style="font:bold 18px/100% 'MS 明朝',serif">これはサイズ18px、高さ100%、bold、MS明朝です。</span>

サイズとフォント種別だけの設定でもOKです
<span style="font:15px serif">サイズとフォント種別だけの設定でもOKです</span>

icon:これはアイコンの下部に表示される名前に使われるフォント
menu:各メニューで使われるフォント
message-box:ダイアログボックスで使われます
caption:キャプションやラベル用
status-bar:ステータスバーのフォント
<div style="font:icon">icon:これはアイコンの下部に表示される名前に使われるフォント</div>
<div style="font:menu">menu:各メニューで使われるフォント</div>
<div style="font:message-box">message-box:ダイアログボックスで使われます</div>
<div style="font:caption">caption:キャプションやラベル用</div>
<div style="font:status-bar">status-bar:ステータスバーのフォント</div>
▲ページTOPへ