<<PREV | TOP | NEXT>>

CSS 'font'

last modified 5th/Oct. 2000

%fontstyle; に属するようなフォント情報は、 CSS を利用することで、より木目細かく柔軟に指定できます。

ここでは、 CSS のフォントと、テキスト装飾に関係したプロパティを紹介します。詳しくは、「CSS の紹介」を参照してください。

  1. 行の高さ
  2. テキスト修飾
  3. 影つき文字
  4. font-family
  5. font-style
  6. font-variant
  7. font-weight
  8. font-size
  9. font

CSS2 で初めて現れたプロパティや追加されたプロパティ値も、いくつか紹介します。CSS2 は CSS1 を含み、相互に矛盾しないとされていますので、気にせずじゃんじゃん使ってください。但し、細かい所で少々の変更もあります。

line-height

行間とは、行と行の間のスペースの事ですが、 line-height プロパティでは、行と底辺と前後する行の底辺との間隔を指定します。 line-height から文字の大きさを引いたものが行間になります。

line-heightnormal | <number> | <length> | <%> | inherit

<number>, <%> では、要素のフォント・サイズとの積で計算されます。

p { font-size:12pt }
p { line-height:20pt }    /* absolute length */
p { line-height:1.5em }   /* relative length */
p { line-height:150% }    /* percentage */
p { line-height:1.5 }     /* number */

P要素に対してフォントサイズが 12pt に設定されています。 line-height は上から順番に 20pt, 12*1.5pt, 12*(150%)pt, 12*1.5pt になります。

line-hieght はフォントサイズの 1.3-1.5 倍程度が読みやすいようです。

text-decoration

text-decorationnone | [ underline || overline || line-through || blink ] | inherit

CSS1 では underline | none だけです。

次の例では、 href 属性を持つ全ての A 要素に下線が引かれます。

a[href] { text-decoration: underline }

表示例を見てみましょう；

p { text-decoration: underline overline blink }

text-decoraoint の例です。CSS1 で登場した下線と、 CSS2 で追加されたキーワード、上線と点滅が指定して有ります。

I.E.5.5 では blink が効きません。 Netscape 6 では完全に効きます。

text-shadow

文字に影の効果をつけます。指定する値は、影の色、影の横方向へのずれ、縦方向へのずれ、ぼかしの範囲です。影の位置は必須ですが、色とぼかしの範囲は任意です。

また、一箇所の指定で複数の影を指定でき、カクテルライトのような効果も指定できます。

H1 { text-shadow: 0.2em 0.2em }

H2 { text-shadow: 3px 3px 5px red }

影の色を指定しないと、 color プロパティの値が使われます。

text-shadownone | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit

CSS2 で初めて現れたプロパティです。

'text-shadow' のサンプルです。

次の例では、テキストと影のずれがゼロに指定されているので、テキストの輪郭が 5px だけぼやけます。

text-shadow: 0px 0px 5px;

I.E.5.5, Netscape 6 供に効きません。

I.E.5.5 では filter と云うプロパティが実装されていますが、独自拡張で標準規格ではありません。 W3C に「提案」しているそうなので、もしかすると現在策定中の CSS3 には含まれるかもしれませんが、ここでは紹介しません。

font-family

P {font-family:'font1','font2'}
        /* 'font1'が無ければ'font2'を使用 */

この場合、font1が無ければfont2を使用させることになり、それも無ければブラウザ標準のフォントで表示されます。各人の設定によって標準フォントは異なりますから、標準といっても特定は出来ません。

また、個々のフォントをデザイン系統で分類した「系統名」でも指定できます。「個々のフォント」を "font-fmaily" と呼び、そのフォントが属する「系統」を "geneirc family" （総称）と呼びます。すべてのフォントは下の5つの系統に分けられます。

generic fmailies
generic family
serif 明朝系。字線に強弱、撥ね、払い等があり、文字の太い細いが目立つ。
'Times New Roman', 'Bodoni', 'Garamond', 'Georgia', 'Bitstream Cyberbit', 'ＭＳ Ｐ明朝', 細明朝体, 平成明朝, 'New York', 'Palatino' etc.
sans-serif ゴシック系。字線に強弱が無く、先端が必ず止めになっている。文字の太い細いが目立ちにくい。
'Trebuchet MS', 'Arial', 'Verdana', 'Univers', 'Gill Sans', 'Helvetica', 'ＭＳ Ｐゴシック', 平成角ゴシック, 中ゴシック体, Osaka, Charcoal, Chicago, Geneva etc.
cursive 手書（筆記）体系。 Chancery, Brush, Swing, Script 等と呼ばれる事も有る。
'Script', 'Caflisch Script', 'Flemish Script', 'Adobe Poetica', 'Sanvito', 'Ex Ponto', 'Snell Roundhand', 'Zapf-Chancery'
monospace 等幅フォント系。全ての文字が共通の固定的幅を持つ。タイプライタ体。
'Courier', 'MS Courier New', 'Prestige', 'Everson Mono', 'ＭＳ ゴシック', 'ＭＳ 明朝', Osaka-等幅, Monaco etc.
fantasy 装飾的フォント系。装飾が主である文字種。絵と記号だけのものは含まない。
'Alpha Geometrique', 'Critter', 'Cottonwood', 'FB Reactor', 'Studz', 'goudy old style', 'ＤＦＰPOP体' etc.

細明朝体などはMacintoshに最初からインストールされているフォントですが、未確認です。是非御教示下さい。

空白類文字を含むフォント名は引用符 " または ' で括るべきですが、 generic family は引用符で括ってはなりません。

また、フォント名は大文字・小文字、全角・半角を区別しますので、注意してください。

font-family[[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit

空白類文字を含む <familt-name> は引用符で括る。 <generic-family> は引用符で括ってはならない。

【使用例】

CODE {font-family:'Courier New','Courier','ＭＳ ゴシック',monospace}
        /* 優先順位の高い順に'Courier New','Courier','ＭＳ ゴシック',monospace */

上の例では、指定されているどのフォントも使えなければ、系統； monospace に属する台替フォントを使用します。具体的にどのフォントが選ばれるかはブラウザに依存するので特定は出来ません。

個別のfontはブラウザによっては利用できないかもしれないが、一般に「系統名」はどのブラウザでも利用出来ることになっているので、font-family宣言の最後にこれを記述しておくと、必ずではありませんが、似通ったフォントが選ばれます。

その他のフォント・サンプル

font-style

font-stylenormal | italic | oblique | inherit
font-style
normal AbcdefgHijklmnOpqrstuVwxyzあいうえお日本語アイウエオ 標準フォント
italic AbcdefgHijklmnOpqrstuVwxyzあいうえお日本語アイウエオ 斜体（筆記体に近い）フォント
oblique AbcdefgHijklmnOpqrstuVwxyzあいうえお日本語アイウエオ 標準を傾けただけのフォント

【使用例】

H1 {font-style:italic}      /* H1要素の文字は「italic」 */
H1 P {font-style:normal}    /* H1要素の子要素であるP要素の文字は「標準」 */
strong {font-style:oblique}
.math {font-style:italic}

font-size

font-size[ xx-small | x-small | small | medium | large | x-large | xx-large ] | [ larger | smaller ] | <length> | <%> | inherit

【使用例】

p { font-size: 12pt }

上の出力例では、フォントの大きさを絶対指定の pt 単位で表しました。絶対単位は、デザインが崩れにくいなどのメリットがありますが、閲覧者が文字の大きさを変更できないと云うデメリットも生じます。出力装置が特定できない一般の Web コンテンツの場合は、相対単位で指定した方が安全でしょう。メンテナンス上もその方が有利です。相対単位には、 em, ex, px, % があります。私は一文字の大きさを単位とする em 単位を使っています。

普通、 em は、当該要素で使われているフォントの "M" の高さを 1 とする単位です。しかし、フォントの大きさ自身に用いる場合は、親要素のフォントの大きさが参照されます。親要素よりも二倍の大きさの文字を指定したければ、 2em と指定します。

...省略...
<head>
  ...省略...
  <META http-equiv="Content-Style-Type" content="text/css">
  <style type="text/css">
  <!--
    p { font-size: 1em }
    pre { font-size: 1.3em }
    strong { font-size: 1.2em }
  -->
  </style>
</head>
<body>
  <p>
  ここは p 要素の内容部です。
  strong 要素は<strong>インライン要素</strong>ですから、
  p 要素の子要素になり得ます。
  </p>
  <pre>
  ここは pre 要素の内容部です。
  strong 要素は<strong>インライン要素</strong>ですから、
  pre 要素の子要素にもなり得ます。
  </pre>
</body>
...省略...

この時、閲覧者が基準フォントの大きさを 12 pt に設定していた場合は次のようになります；

では、基準フォントの大きさが 10.5pt の場合はどうでしょうか？考えてみてください。 PRE 要素の子孫要素である STRONG 要素は 10.5pt * 1.2em * 1.3em = 16.38 pt になります。（小数点の扱いはブラウザによりますが、小数点以下一桁は確実に反映します。）

font-weight

フォントの太さを表す font-weight プロパティーの値は、 100, 200,..., 900 の9段階で設定できます。

また、キーワードでは、400 が normalに、 700 が bold に対応します。一般に、個別のフォント毎に設定されている「通常」を 400 に対応させることになります。

プロパティーの値には、 bolder 、 lighter が用意されている。それぞれ、親要素の継承値よりも1段階太いフォント、細いフォントに設定されます。

font-weight
normal AbcdefgHijklmnOpqrstuVwxyz bold AbcdefgHijklmnOpqrstuVwxyz
100 AbcdefgHijklmnOpqrstuVwxyz 200 AbcdefgHijklmnOpqrstuVwxyz
300 AbcdefgHijklmnOpqrstuVwxyz 400 AbcdefgHijklmnOpqrstuVwxyz
500 AbcdefgHijklmnOpqrstuVwxyz 600 AbcdefgHijklmnOpqrstuVwxyz
700 AbcdefgHijklmnOpqrstuVwxyz 800 AbcdefgHijklmnOpqrstuVwxyz
900 AbcdefgHijklmnOpqrstuVwxyz

【使用例】

H1 {font-weight:900}        /* H1要素の太さ最大 */
strong {font-weight:bolder} /* strong要素は親要素より一段階太い */

font-variant

欧文の small-capitals です。小文字を背に低い大文字に変換するはずです。

font-variantnormal | small-caps | inherit
font-variant
normal AbcdefgHijklmnOpqrstuVwxyz
small-caps AbcdefgHijklmnOpqrstuVwxyz

【使用例】

John <span style="font-variant:small-caps">Coltrane</span>

【表示例】

"John Coltrane"のように使います。

MS IE5.0では大文字も小文字も全て背の低い大文字になってしまいます。Netscape6PR1 以降では、きちんと小文字だけが背の低い大文字に変換されます。

font-strech

指定されているフォントファミリの中から、希望する字幅のフォントを指定できます。

font-strechnormal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

'wider' は 、親要素の値より一段階広い字幅が採用され、 'narrower' は一段階狭い字幅が採用されます。

CSS2 で初めて登場したプロパティーで、 CSS1 には含まれません。

font

font関係のプロパティーの幾つかをまとめて宣言できます。

font[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

'font-size' と 'font-family' は必須です。

CSS2 では、 inherit が単独で指定できる他、 OS で利用するシステムフォントを利用する為のキーワードも指定できます。

'font' プロパティを用いると、 'font-size-adjast' (CSS2) と 'font-strech' (CSS2) が無条件で初期値に設定されます。変更したい場合は、 'font' プロパティの後ろで改めて個別に宣言する必要が有ります。

'font' プロパティで設定できるプロパティー
property 説明・値初期値
font-style[省略可]normal/ italic/ obliquenormal
font-variant[省略可]normal/ small-capsnormal
font-weight[省略可]normal/ bold/ lighter/ bolder/ 100, 200,...,900normal
font-size[必須]フォントの大きさmedium
/line-height[省略可]一行の高さnormal
font-family[必須]フォントの種類閲覧環境に依存

一行の高さを設定する時は、値の前に/を入れて下さい。

【使用例】

P {font:italic small-caps bold 10.5px/1.3 'Times New Roman','ＭＳ Ｐ明朝',serif}

上の例は、下のように記述したのと同じ事になります。

P {font-style:italic;
   font-variant:small-caps;
   font-weight:bold;
   font-size:10.5px;
   line-height:1.3;
   font-family:'Times New Roman','ＭＳ Ｐ明朝',serif}

【HTMLソース】

<P>
一行目；abcdefghijklmnopqrstuvwxyz<BR>
二行目；ABCDEFGHIJKLMNOPQRSTUVWXYZ<BR>
三行目；日本語漢字見本<BR>
四行目；ひらがなみほんカタカナミホン
</P>

【ブラウザでの表示】

一行目；abcdefghijklmnopqrstuvwxyz
二行目；ABCDEFGHIJKLMNOPQRSTUVWXYZ
三行目；日本語漢字見本
四行目；ひらがなみほんカタカナミホン

省略可能なプロパティーは必要無ければ何も書きません。初期値に設定されます。

H1 {font:bold 2em/1.5em 'Comis Sans MS','Impact','ＤＦＰPOP体',fantasy}

太字。文字の大きさは標準の2倍。行の高さは一文字の1.5倍。フォントは優先順位の高い順に'Comis Sans MS', 'Impact', 'ＤＦＰPOP体', fantasy。 

P {font:1.2em/1.3em 'ＭＳ Ｐ明朝','Times New Roman',serif}

文字の大きさは標準の1.2倍。一行の高さは文字の1.3倍。フォントは優先順位の高い順に'ＭＳ Ｐ明朝','Times New Roman', serif。

応用例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <title>CSS によるフォント情報の指定</title>
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
      <!--
h1 { font-size: 2em }            /* フォントの大きさを二倍に */
h2 { font-size: 1.5em }          /* フォントの大きさを1.5倍に */
code { font-family: monospace }  /* フォントの種類を等幅フォントに */
em { font-style: italic }        /* フォントをイタリック体に */
em.author { color:red }          /* フォントの色を赤に */
strong { font-weight: bold }     /* フォントを太字に */
cite { font-style: normal;       /* フォントを通常体に */
   text-decoration: underline }  /* テキストに下線を */
      -->
    </style>
  </head>
  <body>
    <h1>現代物理学史</h1>
    <h2>力学的世界観の瓦解</h2>
    <p>
<strong>力学的世界観</strong>とは、
 <em>世界が Newton 力学的因果法則で全て説明できる</em> とする世界観である。
<em class="author">sir Isacc Newton</em> がその主著
「<cite>プリンキピア</cite>」に於いて唱えた
三つの運動の法則を以ってすれば、原理的には全ての現象が説明できるものとされていたのだ。
    </p>
    <p>
Newtonの運動の第二法則は、<strong>運動方程式</strong>；
<code>F(t) = m dP(t)/dt = P'(t)</code>
にまとめることが出来る；
    </p>
  </body>
</html>

表示例；

現代物理学史

力学的世界観の瓦解

力学的世界観とは、 世界が Newton 力学的因果法則で全て説明できる とする世界観である。 sir Isacc Newton がその主著 「プリンキピア」に於いて唱えた 三つの運動の法則を以ってすれば、原理的には全ての現象が説明できるものとされていたのだ。

Newtonの運動の第二法則は、運動方程式； F(t) = m dP(t)/dt = P'(t) にまとめることが出来る；

<<PREV | TOP | NEXT>>

FC2> モビット