CSSで制御する事のできるテキスト(文章)に関する属性のリストです。文字/行間や空白スペース等を制御できる属性をまとめました。
目次
CSSプロパティのテキスト属性に関するリスト
- line-height: ★;※行間の高さ
- text-align: ★;※文字の水平位置
- vertical-align: ★;※文字の垂直位置
- text-indent: ★;※一行目のスペース
- letter-spacing: ★;※文字同士の間隔
- word-spacing: ★;※単語同士の間隔
- white-space: ★;※半角スペース、改行の制御
line-height: ★;
数値指定(相対) |
|
---|---|
数値指定(絶対) |
|
テキスト要素の行に関する高さを指定する属性。文字の中心点を支点に上下に範囲を広げる。この属性の値と親要素の高さの値を合わせることで中心に文字を表示する事ができるが、改行されると値分改行されるので注意が必要。
/* 数値のみ(%) */ line-height: 1.75; /* メニューの中心に文字を表示 */ div{ height: 30px; } a.nav1{ line-height: 30px; }
text-align: ★;
値 |
|
---|
要素内のテキストおよび画像、もしくはテーブルセルの水平位置を指定する属性。
初期値はleft
で設定されている。
text-align: left;
vertical-align: ★;
値 |
|
---|---|
数値指定(相対) |
|
数値指定(絶対) |
|
要素内のテキストおよび画像、もしくはテーブルセルの垂直位置を指定する。
初期値はbaseline
で設定されている。
イメージ要素に指定した場合、隣接するインライン要素の位置を指定できる。また、画像下の隙間を消したい場合に値をbottom
とすることで隙間が消える。
/* 設定されている値を継承しての大きさ */ font-size: 1em; font-size: 100%; font-size: 0.5em; ※50%になる /* ディスプレイに対して絶対的な大きさ */ font-size: 10mm; font-size: 10px;
text-indent: ★;
数値指定(相対) |
|
---|---|
数値指定(絶対) |
|
テキスト文の頭の字下げを指定する属性。折り返しや、開業後の文頭はインデントされない。デフォルトは0。あくまで文頭のみ。
text-indent: 1em;
letter-spacing: ★;
数値指定(相対) |
|
---|---|
数値指定(絶対) |
|
文字間のスペースを指定する属性。デフォルトはnormal
で設定されている。
letter-spacing: 1px;
word-spacing: ★;
数値指定(相対) |
|
---|---|
数値指定(絶対) |
|
英文の場合の単語同士のスペースを指定する属性。マイナス値を指定する事も可能。デフォルトはnormal
で設定されている。
/* 間隔を空ける場合 */ word-spacing: 1em; /* 間隔をつめる場合 */ word-spacing: -1em;
white-space: ★;
属性 |
|
---|
半角スペース・改行・タブの扱いを指定する属性。デフォルトはnormal
で設定されている。
white-space: nowrap;