CSSリファレンス・フォント・テキスト

フォント、テキスト関連のリファレンス。実際の書き方はテンプレートで見ていただくとよりわかりやすいと思います。表で使われている「デフォルト」とは初期設定のことです。

フォント関連プロパティ

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

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

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


(記述例)font: bold 14pt sans-serif;

family

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

(記述例)font-family: "MS  Pゴシック",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;

TOP 

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

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;

TOP