text
word-spacing
letter-spacing
文字と文字との間のスペースを開けます。
とくにアルファベットの小文字など、詰まっていて読みづらい場合には有効です。
- letter-spacing:1px;
- letter-spacing:5px;
text-decoration
文字と文字との間のスペースを開けます。
とくにアルファベットの小文字など、詰まっていて読みづらい場合には有効です。
- text-decoration:underline;
- text-decoration:overline;
- text-decoration:line-through;
- text-decoration:blink;（文字が点滅します。読みづらくなるのでここでは実演していません）
vertical-align
文字の装飾をほどこします。ここで<span>タグを活躍させることができるでしょう。
HTMLのフォントタグと似たようなはたらきを持ちます。
| vertical-align:sub; | 下付き文字 | CO2 | CO<span style="vertical-align:sub;">2</span> |
| vertical-align:super; | 上付き文字 | X2 | X<span style="vertical-align:super;">2</span> |
text-transform
文書中のアルファベットの表示を変形します。
ただし、見た目だけの変化で、HTMLそのものの文字は小文字または大文字のままです。
- text-transform:capitalize;
- text-transform:uppercase;(text-transform:uppercase;を指定すると、全体を大文字にします)
- text-transform:lowercase;(text-transform:lowercase;を指定すると、全体を小文字にします。)
text-align
文章の配置をそろえます。基本的には左にそろえると読みやすいですが、中央や右にそろえるのもあります。
- text-align:left;
- text-align:center;
- text-align:right;
- text-align:justify;(ブラウザによって表示が変化されます)
line-height
行間を調整します。このスタイルシートで数値を大きくすると、行間があきます。
ある程度はあけたほうが読みやすくなりますが、あけすぎると文字がスカスカになってしまいます。
- この行は「line-height:12px;」に指定しています。
非常に詰まっているだけでなく、文字を大きくすると重なってしまいます。 - この行は「line-height:1.2em;」に指定しています。
「em」や「%」は、文字を大きくしてもそれに比例して行間も開きます。 - この行は「line-height:22px;」に指定しています。
このくらいになると開きすぎている印象があるかもしれません。
