- 目次
- 基本フォントを指定する
- 斜体を呼ぶ
- スモールキャプスのフォントを呼ぶ
- 太さ
- フォント関連の一括指定
- 色
- 文字の大きさ
- 文字を装飾する
- 大文字・小文字の制御
- 字下げ（インデント）
- 内容を寄せる
- 文字間の余白
- 単語間の余白
- 空白類の扱い
- 行の高さの制御
- インラインボックスの縦方向の位置
文字と戯 れる 第2節 -呼び出したフォントの詳細を指定する-
色
color
| 値 | <色> |
|---|---|
| 初期値 | UA依存 |
| 適用 | すべての要素 |
| 継承 | する |
このプロパティは、文字自身の色、やや専門的には前景色と申しますが、これを指定するのでございますよ。HTML で言う font要素のcolor属性と同じ働きをするのでございます。色の指定方法に関しましては、色の指定方法の説明をご覧になると宜しいかと。例と致しまして、em要素を赤く染め上げる方法を2つほど紹介致しましょう。
em { color: red } /* 決まった色の名前を使う */
em { color: rgb(255,0,0) } /* RGB range 0-255 */
'font-color' というプロパティはございませんので、お間違いの無きよう。
文字の大きさ
font-size
| 値 | <絶対サイズ> | <相対サイズ> | <長さ> | <パーセンテージ> |
|---|---|
| 初期値 | medium |
| 適用 | すべての要素 |
| 継承 | する。詳細は以下 |
| パーセンテージ | 親要素の値を参照 |
文字それ自体の大きさを指定するプロパティです。様々なプロパティの値の参照先にもされますので、丁重に取り扱いましょう。では、キーワードについてです。
- <絶対サイズ>
- この言葉は、以下のように解釈されます。
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
ご想像通り、左から右へ、順にサイズが大きくなっていくのですが、隣り合うキーワード同士の比率は 1.2 が推奨されています。つまり、[x-small] は [xx-small] の 1.2倍 の大きさで、[x-large] は [large] の 1.2倍 の大きさ、という事です。 - <相対サイズ>
- この言葉は、以下のように解釈されます。
[ larger | smaller ]
例えば親要素のフォントサイズが[medium]だとすると、[larger]は[large]、[smaller]は[small]と解釈されます。親要素から長さを継承した場合の処置に関しては記述がございませんが、それぞれ、1.2倍大きく、又は小さくするのが宜しいかと。
置換要素の場合は、値は[em]や[ex]を定義するのに用いられます。ですので、無意味というわけではございません。では、記述例を幾つか挙げておきましょう。
p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
様々な例を挙げておいて恐縮でございますが、パーセンテージ以外は使わないほうが無難でございます。閲覧者に色々と不便をかけてしまうからです。
文字を装飾する
text-decoration
| 値 | none | [ underline || overline || line-through || blink ] |
|---|---|
| 初期値 | none |
| 適用 | すべての要素 |
| 継承 | しない。詳細は以下 |
このプロパティを用いると、対象となる文字に様々な線を引く事が出来ます。早速、キーワードの解説を致しましょう。
- none
- 装飾を施しません。
- underline
- テキスト各行に下線を引きます。
- overline
- テキスト各行に上線を引きます。
- line-through
- テキストに取消線を引きます。
- blink
- テキストを点滅させます。
次に示すように、複数のラインを同時に引く事も可能なのでございます。
<span style="text-decoration:underline overline line-through">This text is Deleted</span>
相手が置換要素の場合は、このプロパティは無効でございます。
また、装飾ラインの色は、'color'で定めた色になります。その時、子孫部の要素が'color'に異なる値を持っていても装飾の色は同じになります。
大文字・小文字の制御
text-transform
| 値 | capitalize | uppercase | lowercase | none |
|---|---|
| 初期値 | none |
| 適用 | すべての要素 |
| 継承 | する |
このプロパティは、要素のテキストを大文字化・小文字化致します。つまり、大文字・小文字の区別がある言語に対してのみ有効なわけでございますね。
キーワードは、以下の通りでございます。例として、この文書にプロパティを適用してみましょうか。
He's the leader of a buntch. You know him well.
- capitalize
- 各単語の1文字目を大文字化。
He's The Leader Of A Buntch. You Know Him Well. - uppercase
- 各単語の全文字を大文字化。
HE'S THE LEADER OF A BUNTCH. YOU KNOW HIM WELL. - lowercase
- 各単語の全文字を小文字化。
he's the leader of a buntch. you know him well. - none
- 効果無し。
He's the leader of a buntch. You know him well.
書き方は至って簡単、例えばh1要素にこのプロパティを指定する時は、こうするのでございます。
h1 { text-transform: uppercase }
何故このようなプロパティが存在するのかと言いますと、装飾と、もう一つ、スクリーンリーダに対する配慮の意味があるのでございます。スクリーンリーダですと、すべて大文字で書かれた英語は、一文字ずつ読んでしまう場合があるのでございます。例えば、BORDER と書きますと、「ビーオーアールディーイーアール」と読んでしまう場合がございます。タイトルや見出しなど、大文字にしがちでございますが、それをすべて一文字ずつ読まれましたのであれば、何とも間抜けに聞こえる事この上ございません。そういった時にも有用なのでございますよ。