テキストに関するプロパティ

今回はプロパティを紹介するのですが、まずはテキスト、すなわち文字の表示に関するプロパティを紹介します。その代表例が、最初に紹介したcolorプロパティでしたね。

文字の大きさ

文字色と並んで基本的なのが、文字の大きさですね。文字の大きさを変える方法を紹介します。font-sizeプロパティを使います。名前の通り、文字の大きさを定めるには、フォントのサイズを指定してやればいいということですね。

値としては、上に示した3種類の指定方法がありますので、一つずつ見ていきます。

キーワード

キーワードには2種類あります。一つは絶対的指定、もう一つは相対的指定です。

絶対的指定では、それぞれに普通の大きさ（何も指定がない状態でのデフォルトの大きさ）の何倍かが定められています。倍率で定めるなら相対的な指定といえるのではないかと思うかもしれませんが、デフォルトの大きさがページ内の他の要因に左右されないという意味で絶対的な指定に属します。以下の7種類があります。

もう一つの相対的指定は2種類です。相対的指定というのは、現在のフォントの大きさに比べてどうかということです。

smallerとlargerの2つがあり、その名の通り、smallerは今より小さめ、largerは今より大きめです。具体的にどれくらい変わるかは実は定められていません。ブラウザがうまい感じにやってくれます。

絶対的・相対的ということの意味を理解するためにいくつかサンプルを示します。

<p style="font-size:small">ここはsmall<:/p>
<p style="font-size:x-large">ここはx-large<span style="font-size:small">ここはsmall</span>ここはまたx-large</p>

この例をみると、絶対的指定の絶対の意味が分かります。2つのsmallは同じ大きさですね。2つ目のほうの内側のspanは、x-largeであるpの中にありますが、自身が絶対的指定を持っているのでその影響を受けません。これが相対的指定だとどうなるかを次のサンプルでみてみましょう。

<p style="font-size:larger">ここはlarger</p>
<p style="font-size:xx-large">ここはxx-large<span style="font-size:larger">ここはxx-largeの中のlarger</span>ここはxx-large</p>

こう見ると、同じlargerでも大きさが違うことが分かります。前のlargerは、何もない状態（これはmediumにあたります）に比べて大きいということです。後のlargerは、span自体がxx-largeの大きさの位置にあり、それに対して大きいということです。これが相対的指定の意味です。

長さ

詳しくは値と単位を参照して下さい。長さの単位によって絶対的指定と相対的指定が存在します。絶対的指定の例としては、pxやmmによる指定があります。

<p style="font-size:18px">18pxの段落</p>

ただし、フォントサイズにおいては、pxをはじめとする絶対単位による指定は避けたほうがよいでしょう。例えば小さい文字が見にくい人は、ブラウザのフォントサイズを大きめに設定しているかもしれません。絶対単位による指定はそういった事情を無視して、どんな人にも同じ大きさで表示します。ただし同じ絶対的指定でも、上で紹介したsmall,medium,largeなどは、デフォルトのフォントサイズを基準としているためこの問題は起こりません。

また、largeとかx-largeとかだと曖昧で嫌だとかいう場合は、相対単位を使いましょう。特に便利なのがemです。たとえば1.2emとすれば1.2倍のフォントサイズになります。これならlargeなどと同じようにもともとのフォントサイズにあわせて変わるのでユーザーにやさしいです。例えばこのページでは、h3要素はfont-size:1.2emとなっていて、普通の文字の1.2倍の大きさの見出しとなっています。

またemは現在のフォントサイズを基準としますから、例えばfont-size:1.2emの要素の中でさらにfont-size:1.2emになった場合その中身は、デフォルトからみて1.2×1.2=1.44倍になります。

パーセンテージ

最後に残ったパーセンテージですが、これもフォントサイズを基準にして大きさを記述します。すなわち100%=1emで、例えば1.2emは120%と同じです。emかパーセンテージか、好きなほうを使いましょう。

ただし注意すべき点は、emは長さの単位ですからどんな場合でもフォントサイズを基準とした一意な値ですが、パーセンテージはプロパティにより異なり、何を基準とするのかは場合により異なります。今回はfont-sizeなのでフォントサイズを基準としており、たまたまemと同じ感じになったのです。

フォントのスタイル

さて、文字の大きさ以外にもフォントを修飾することが可能です。

font-weightプロパティはフォントの太さを指定します。

上述の通り、100～900の9段階で指定できますが、実際は9段階も太さの種類が用意されているフォントなんかそうそう無いでしょう。普通は、特に日本語では「普通」と「太字」の二段階、よくて三段階でしょう。ぴったりの太さが用意されていない場合は、近い感じの太さが選ばれます。

数値指定は分かりにくいので、キーワードによる指定も可能です。

normal

普通の太さ。特にfont-weightを指定しない場合の太さ。400と同じ。

bold

太字。700と同じ。

bolder

今よりも一段階太い。

lighter

今よりも一段階細い。

bolderやlighterは、上のfont-sizeのsmallerやlargerと同じ感じで、今のを基準にします。

また普通が400ですから、300以下は普段より細い、いわば「細字」ということになりますが、細字を用意しているフォントなど多分めったにないでしょう。一番良く使うのはboldです。

<p style="font-weight:bold">太字</p>

以下に、100から900まで並べてみました。多分普通と太字の2種類しか見られないと思います。境目は600くらいでしょう。

次に紹介するのがこれです。font-styleといわれるとなんか汎用的で難しそうな気がしますが、実は意味は「斜体かどうか」です。それなら「普通」と「斜体」の2つでいい気がしますが値は3種類ありますね。じつは斜体にも2種類あるのです。

3種類の値のうち、normalは普通で、斜体ではない文字です。そしてobliqueが本当の「斜体」で、文字を斜めに傾けたようになります。そしてitalicは斜体の仲間ですが「イタリック体」です。イタリック体は英文で強調などに使われ、筆記体をもとにした丸みのある文字です。

したがって、イタリック体は日本語ではほぼ利用できません。英語などアルファベット圏では斜体とイタリック体を区別したフォントが存在します。ちなみに、イタリック体が存在しないフォントでitalicを利用しようとした場合はobliqueと同じになります。斜体が用意されていないフォントの場合は無理やり傾けるので多少汚くなったりします。以下の3種類を比較してみましょう。

次に紹介するfont-stretchは、フォントの横幅を指定できます。これは「普通とくらべてどうか」という相対的な指定です。

細いほうから順に、ultra-condensed,extra-condensed,condensed,semi-condensed,normal,semi-expanded,expanded,extra-expanded,ultra-expandedというキーワードを指定できます。

normalが普通で、condensedは普通よりも幅が狭く、expandedは幅が広くなります。

ただしこれもfont-weightと同じで、幅が9段階も用意されているフォントはありません。太字よりも一般的でないので、そもそも幅狭版とか幅広版などひとつも用意されていないかもしれません。一応以下に全部並べてみました。

このfont-synthesisはほとんど使う機会がないでしょうが、一応紹介します。

これはfont-weightとfont-styleに関係します。font-weightで太字が指定されたのにフォントに太字がない場合は、ブラウザが頑張ってもとのフォントをちょっと太くしたりして対処することができます。同様に、font-styleで斜体が選択されたのにフォントに斜体が用意されていない場合は、普通のを無理やり傾けることができます。font-synthesisは、そういう動作を許可するかどうかを指定します。まったく許可しない場合はnoneで、太字は許可する場合はweight、斜体を許可する場合はstyleです。では太字も斜体も両方許可したい場合はどうするかというと、両方指定します。一般にCSSで複数の値を指定するときはスペースで区切ります。たから、この場合weightとstyleを両方指定したい場合は、font-synthesis: weight style;のようにします。上に書いた通り、デフォルトではweight styleなので両方許可されています。ちなみに順不同なので、style weightでも構いません。

ただ、もともとweight styleになっているので、あえてfont-synthesisを使う場合は何かを許可しない場合であり、2つ両方指定するために使うのは珍しいかもしれません。

フォントの種類

次のfont-familyはよく使います。簡単にいうとフォント名を指定できます。

例えば、かつてMacで標準だったOsakaというフォントを使いたければ次のようにします。

<p style="font-family:Osaka">Osakaフォントの段落</p>

ただこれはやめたほうがいいですね。なぜなら、Macユーザー以外はなかなかOsakaフォントは持っていないからです。そういうときのために、候補を複数指定できます。コンマで区切ります。

<p style="font-family:Osaka,'ＭＳ Ｐゴシック'">OsakaフォントかＭＳ Ｐゴシック</p>

ちなみにこのように、スペースや、その他の英数字以外の記号を含むようなフォント名の場合、""や''で囲みます。また複数指定した場合、先に書いたほうが優先されます。すなわちこの場合、まず「Osaka」を探して、あればそれを使い、なければ「ＭＳ Ｐゴシック」を探します。それもなければデフォルトのままです。

しかし、こうやっていくら並べても、やはり確実にそのフォントがある保証はありません。

そこでどんな環境でもだいたい同じ感じで表示されるように、「こんな感じで」と、フォントのだいたいの種類を指定することができます。それには次の種類があります。

serif

いわゆる「セリフ体」。日本語でいうところの「明朝体」。

sans-serif

いわゆる「サンセリフ」。日本語フォントでは「ＭＳ Ｐゴシック」や「ヒラギノ角ゴシック」がこれにあたるので「ゴシック体」とも呼ばれるが、英語圏ではゴシック体というとまた別の意味になるので注意が必要。

cursive

筆記体のようなフォント。日本語フォントだと「HG行書体」など。

fantasy

いわゆる「飾り文字」というと言い過ぎかもしれませんが、何かこう遊び心がある感じのフォントです。日本語だと「HGP創英角ポップ体」などがこれにあてはまるそうです。

monospace

等幅フォントです。等幅とは、すべての文字の横幅が同じだということです。これは、プログラムのソースコードを表示するときなどに重宝します。プログラミングは等幅フォントじゃないと、とてもできたものではありません。

これらのキーワードも、フォント名と同様に使えます。例えば、font-family:serif;という具合です。フォント名を使って指定する場合にも、一番最後にこれらのキーワードをつけてやれば、最悪の場合でも一応そこそこな感じで表示してくれそうです。つまり、 font-family:Osaka,'ＭＳ Ｐゴシック', sans-serifという感じです。

今回も、5種のキーワードがどんな感じか見てみましょう。

自分の環境では、日本語は微妙ですが、英語はちゃんと5種類全部違うフォントになりました。もちろん実際に表示されるフォントは、環境によって入っているフォントが違うので異なります。しかしだいたい、イメージにあったフォントにあるはずです。

長くなったので次回に続きますが、次回もフォントの話です。