このサイトついて

このサイトではホームページを
作りたいという方のために、
HTML・CSSの解説
便利なソフト・本などの紹介
レンタルサーバの紹介
などを行っています。

テキストをいじりたい

対応ブラウザ

テキスト関連は知っていると何かと役に立つプロパティが多いです。

行間を調節する

line-height:値；

値には実数、％、px・emなどの長さが使用できます。長い文章を書くときに使用すると、読みやすくなります。

文字の間隔をあける

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要素の下辺を要素が含まれる行の下辺に持ってくる

そろえる方向を指定する

text-align:center;※中央揃え
text-align:left;※左揃え
text-align:right;※先頭の文字を大文字にする

文章の中央揃え、左揃え、右揃えを指定します。新旧のブラウザーで微妙に処理の仕方が違います。

戻る

このサイトついて

SPONSORED LINK

テキストをいじりたい