schedule2011.5.6

テキスト属性に関してのリスト|CSSプロパティ

CSS

CSSで制御する事のできるテキスト(文章)に関する属性のリストです。文字/行間や空白スペース等を制御できる属性をまとめました。

CSSプロパティのテキスト属性に関するリスト

line-height: ★;

数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

テキスト要素の行に関する高さを指定する属性。文字の中心点を支点に上下に範囲を広げる。この属性の値と親要素の高さの値を合わせることで中心に文字を表示する事ができるが、改行されると値分改行されるので注意が必要。

/* 数値のみ(%) */
line-height: 1.75;

/* メニューの中心に文字を表示 */
div{
height: 30px;
}
a.nav1{
line-height: 30px;
}

text-align: ★;

  • left
  • rigth
  • center
  • justify(均等)

要素内のテキストおよび画像、もしくはテーブルセルの水平位置を指定する属性。
初期値はleftで設定されている。

text-align: left;

vertical-align: ★;

  • baseline(親要素)
  • top(行中の上辺)
  • bottom(行中の下辺)
  • middle(親要素のxの高さ半分上)
  • super
  • sub
  • text-top
  • text-bottom
  • inherit
数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

要素内のテキストおよび画像、もしくはテーブルセルの垂直位置を指定する。
初期値はbaselineで設定されている。

イメージ要素に指定した場合、隣接するインライン要素の位置を指定できる。また、画像下の隙間を消したい場合に値をbottomとすることで隙間が消える。

/* 設定されている値を継承しての大きさ */
font-size: 1em;
font-size: 100%;

font-size: 0.5em; ※50%になる
 
/* ディスプレイに対して絶対的な大きさ */
font-size: 10mm;
font-size: 10px;

text-indent: ★;

数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

テキスト文の頭の字下げを指定する属性。折り返しや、開業後の文頭はインデントされない。デフォルトは0。あくまで文頭のみ。

text-indent: 1em;

letter-spacing: ★;

数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

文字間のスペースを指定する属性。デフォルトはnormalで設定されている。

letter-spacing: 1px;

word-spacing: ★;

数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

英文の場合の単語同士のスペースを指定する属性。マイナス値を指定する事も可能。デフォルトはnormalで設定されている。

/* 間隔を空ける場合 */
word-spacing: 1em;

/* 間隔をつめる場合 */
word-spacing: -1em;

white-space: ★;

属性
  • normal(空白は半角スペースに。折り返しされる)
  • nowrap(空白は半角スペースに。折り返しされない)
  • pre(空白をそのまま表示。折り返しされない)
  • justify(均等)

半角スペース・改行・タブの扱いを指定する属性。デフォルトはnormalで設定されている。

white-space: nowrap;