フォント関連プロパティ

フォント関連のプロパティもまとめて書くショートハンドが使えます。ただし順番があるのでそれに従います、style、variant、weight、size、height、familyの順です。

またフォントのショートハンドには必ずfont-sizeとfont-familyを含めます。

line-heightを含める場合にはfont-sizeに続けて/を入れて値を入れます。

（記述例）font: bold 14pt sans-serif;

family

フォントの種類です。2つ以上を指定することもできますが、その場合間に,（カンマ）を入れます。なおＭＳ  Ｐゴシック等あいだの空くものは"ＭＳ  Ｐゴシック"のように"（引用符）で囲みます。

（記述例）font-family: "ＭＳ  Ｐゴシック",sans-serif;

style

見た目の指定です。

• normal   普通、デフォルト
• italic 斜体
• oblique 斜体

（記述例）font-style: italic;

variant

小文字表示の指定です。

• normal   普通、デフォルト
• small-caps 小文字

（記述例）font-variant: small-caps;

weight

文字の太さの指定です。

• normal   普通、デフォルト
• bold 太字
• bolder 今の状態より太く
• lighter 今の状態より細く
• 100～900 数字で指定、100刻み

（記述例）font-weight: bold;

size

文字の大きさの指定です。使用できる単位、パーセントでの指定ですが以下のようなキーワード指定もできます。 ただしキーワード指定の場合、ブラウザにより違いが出る場合があります。

• xx-small 非常に小さい
• x-small 小さい
• small やや小さい
• medium 普通
• large やや大きい
• x-large 大きい
• xx-large 非常に大きい

（記述例）font-size: 14pt;

テキスト関係のプロパティ

indent

テキスト先頭の字下げの設定です。CSS指定の値やパーセントで指定します。

（記述例）text-indent: 1em;

color

テキストの色を設定します。

（記述例）color: #333333;

align

テキストの表示位置指定をします。

• left 左寄せ
• right 右寄せ
• center 中央
• justify 両端揃え、主にIE

（記述例）text-align: center;

decoration

テキストを装飾します。複数指定することもできます。

• none なし
• underline 下線
• overline 上線
• line-through 打ち消し線
• blink 点滅

（記述例）text-decoration: none;

transform

大文字、小文字の指定をします、特に英文。

• capitalize 単語の最初の文字を大文字にする
• uppercase すべて大文字にする
• lowercase すべて小文字にする
• none なし

（記述例）text-transform: capitalize;

letter-spacing

各文字間の指定をします。

（記述例）letter-spacing: 1px;

line-height

行の高さの指定をします。各サイズの値かパーセントを入れます。

（記述例）line-height: 20px;

white-space

半角、改行などの空白の扱いを指定します。

• normal 空白は一つにまとめる。横幅がいっぱいになったら改行する
• pre 自動で改行しない、空白はそのまま
• nowrap 自動で改行しない、空白は一つにまとめる

（記述例）white-space: normal;

vertical-align

もともとインライン要素の文字がボックス内（行内）で表示される位置の指定。

• baseline ボックスの下辺に揃える
• middle ボックスの中央線の0.5ex上にインラインの中央線をそろえる
• sub 下付き文字として表示
• super 上付き文字として表示
• text-top もとのインラインの上辺をボックスの上辺とそろえる
• text-bottom もとのインラインの下辺をボックスの下辺とそろえる
• top 行をボックスの上辺とそろえる
• bottom 行をボックスの下辺とそろえる

（記述例）vertical-align: baseline;