CSSにできること―文字（フォント）編

大学の講師に、
「CSSって、何ができるの。HTMLによるデザインの限界と、CSSデザインの限界を知りたい。」
と言われたため、書き出してみることにしました。

今回は、文字に関することをピックアップました。
ちなみに、フォントに関する全てのプロパティを紹介しているわけではなく、
私の独断で利用できそうなもののみを抜粋しています。

１．文字色の変更

これはHTMLのfontタグでもできる。CSSではcolorというプロパティで行う。指定方法もほぼ同様、色名や16進数で色を指定することができる。

２．フォントファミリー（書体）の変更

HTMLではfontタグface属性だったが、CSSではfont-familyで指定できる。CSSでは、書体名を名指しで指定するだけでなく、サンセリフ（ゴシック）、セリフ（明朝）といった大まかな指定も可能。

３．フォントサイズの変更

fontタグではサイズの変更に限界があったが、CSSではfont-sizeプロパティでサイズを自由に変更可能。ピクセル指定、パーセント指定はもちろん、larger（より大きく） 、smaller（より小さく）などの相対的な指定も可能。

４．フォントスタイルの変更

HTMLではiタグで指定していた、イタリック体（斜体）にするという指定が、CSSではfont-styleで指定できるようになった。デフォルトスタイルシートではem（強調）タグを使うとイタリック体になるので、これを直すのに使用するのが一般的。（日本語だとイタリック体は見にくいので）
bタグで指定していた文字の太さは、font-weightで変えることができる。値をboldにすると太字になる。デフォルトスタイルシートではstrong（強い強調）や見出しタグが太字で表示されるので、この場合normalと指定すると通常の太さになる。

５．その他

font-variantというプロパティで、英文の小文字を大文字の綴りにし、サイズを小さくすることができる（英語のみ）。日本語で説明すると非常に分かりにくいので、下記に例を。

This sentence is normal.

This sentence is small-caps.

なぜわざわざこの機能を使うのかというと、HTMLに英単語を全部大文字で記述すると、単語として認識してくれず、音声ブラウザではアルファベットの羅列として読み上げられてしまうからです。

６．追記

文章を組んだときの行間を指定できるline-heightというプロパティも追加でここに記述しておく。文章組みの説明のときに紹介する予定だったが、どうもfont類と一緒に定義されているようだったので。

line-heightは、行間を調整できるプロパティ。HTMLに行間調節の機能はありません。ちなみに、このブログは行間をたぶん150％あたりで指定をしていますが、この段落では行間を200%に指定しているので、きっと上の文章よりも行の間隔が大きくあいているように見えるはずです。

以上。書いてたら意外と長くなってしまい、論文発表に支障をきたしそうだったので、今日はここまで。
次回は文章編。