CSSで文字に変化を

※新規ウインドウで開きます PDF印刷Eメール

文字の色や配置を指定するCSS
変化例 プロパティ 値 書き方の例

文字色を指定する

 color 色コード、又は色名 p{color: #339966;}
文字の水平方向の位置を指定する
左揃え
中央揃え
右揃え
両端揃え
text-align
left
center
right
justify
td{text-align: left;}
文字の垂直方向の位置を指定する
行の下部。上側下側
上揃え 中央揃え 下揃え
vertical-align
行内セル内
baseline top
super middle
sub bottom

span{vertical-align: baseline;}

td{vertical-align:top;}
文字の装飾を指定する

装飾なし

下線

上線

取り消し線

点滅

 text-decoration
none
underline
overline
line-through
blink
p{text-decolation: none;}
文字の水平方向・垂直方向を指定するプロパティは画像やテーブルセルなどにも指定できます。
垂直方向の指定は、一行の文字列内で指定するかテーブルのセルに指定するかで表記が異なります。

文字の形や大きさを指定するCSS
変化例 プロパティ 値 書き方の例
文字のサイズを指定する
文字サイズ15px
文字サイズ150%
文字サイズxx-small
文字サイズlarger
font-size 「数値＋単位」で指定するか、下記のように指定
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller

xx-smallからxx-largeまでは１段階ずつ大きくなっていきます。
largerは現在の大きさから１段階大きく、
smallerは１段階小さくなります。

 td{font-size: 15px;}
文字の太さを指定する
通常
太い
１段階太い
１段階細い
font-weight
normal
bold
bolder
lighter

p{font-weight:bold;}

文字の斜体を指定する

斜体とイタリック体

 font-style
normal
oblique
italic
span{font-style: italic;}
font-styleのobliqueとitalicの違いは、単純に斜めに傾くか筆記体風に傾くかです。
表示するブラウザによって、どちらを指定したも表示に差がない場合があります。