テキストをいじる
今回はテキスト関連です。 知っていると何かと役に立つプロパティが多いです。
行間を調節する
使うプロパティは
line-height:値；
値には実数、％、px・emなどの長さが使用できます。 長い文章を書くときに使用すると、読みやすくなります。
下線や取り消し線を引く
使うプロパティと値の組み合わせは
text-decoration:underline; text-decoration:overline; text-decoration:line-through;
実際に使うと UNDERLINE OVERLINE LINE-THROUGH こんな感じです。
underlineはリンクと紛らわしくなるのであまり使わないほうがいいでしょう。
文字の間隔をあける
使うプロパティは
letter-spacing:値;
値にはnormalかpx・emなどの単位付きの長さを指定します。
使うとこんな感じです
大文字・小文字にする
使うプロパティと値の組み合わせは
text-transform:capitalize; text-transform:uppercase; text-transform:lowercase;
capitalizeは単語の先頭だけ大文字に、uppercaseは全部大文字に、lowercaseは全部小文字にしてくれます。 わざわざShiftキーを使って打ち分ける必要がなくなるから意外と便利です。
文字を上下にずらす
使うプロパティは
vertical-align:値;
使う値は
％やpxなどの長さ baseline:ベースラインに要素をそろえる middle:要素の中心線をベースラインのやや上に持ってくる text-top:要素の上辺を親要素のフォント上辺に持ってくる text-bottom:要素の下辺を親要素のフォントの下辺に持ってくる top:要素の上辺を要素が含まれる行の上辺に持ってくる bottom:要素の下辺を要素が含まれる行の下辺に持ってくる
ちょっと理屈が難しいですが、次のような感じになります。
使わない場合
画像にvertical-align:middleを使った場合
そろえる方向を指定する
使うプロパティは
text-align:center; text-align:left; text-align:right;
文章の中央揃え、左揃え、右揃えを指定します。新旧のブラウザーで微妙に処理の仕方が違います。 応用編のボックスのセンタリングもご覧ください。