第6回 テキスト関係のプロパティ - ブロガー向けCSS入門
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- text-align
- line-height
- 関連記事
この記事は以下のブロガー対象としています。
- ブログをカスタマイズしたい
- 全くCSSの知識が無い
こんにちはnasustです。
今回はCSS Level 1のテキスト関係のプロパティを解説します。
word-spacing
単語の間隔を指定します。日本語では使用する機会は無いと思います。
例:
<span style="word-spacing:1em;">This is a pen</span> <span style="word-spacing:3em;color:red;">This is a pen</span>
表示例:
This is a pen
This is a pen
letter-spacing
文字間の間隔を指定します。
例:
<span style="letter-spacing:0.1em;">あいうえお</span> <span style="letter-spacing:0.3em;color:red;">あいうえお</span>
表示例:
あいうえお
あいうえお
text-decoration
テキストを装飾します。値は以下の通りです。
- none ⋯ 装飾なし
- underline ⋯ 下線
- overline ⋯ 上線
- line-through ⋯ 打ち消し線
- blink ⋯ テキストが点滅します
underline
例:
<span style="text-decoration:underline;">あいうえお</span>
表示例:
あいうえお
overline
例:
<span style="text-decoration:overline;">あいうえお</span>
表示例:
あいうえお
line-through
例:
<span style="text-decoration:line-through;">あいうえお</span>
表示例:
あいうえお
blink
※現在のブラウザでは点滅しません。
例:
<span style="text-decoration:blink;">あいうえお</span>
表示例:
あいうえお
vertical-align
テキストの縦の位置を指定します。値は以下の通りです。
- baseline ⋯ ベースラインに揃える
- middle ⋯ 中央揃え
- sub ⋯ 下付き文字
- super ⋯ 上付き文字
- text-top ⋯ 上端揃え
- text-bottom ⋯ 下端揃え
baseline
例:
<span style="vertical-align:baseline">Abcdefg</span> Base Line
表示例:
Abcdefg Base Line
middle
例:
<span style="vertical-align:middle">Abcdefg</span> Base Line
表示例:
Abcdefg Base Line
sub
例:
<span style="vertical-align:sub">Abcdefg</span> Base Line
表示例:
Abcdefg Base Line
super
例:
<span style="vertical-align:super">Abcdefg</span> Base Line
表示例:
Abcdefg Base Line
text-top
例:
<span style="vertical-align:text-top">Abcdefg</span> Base Line
表示例:
Abcdefg Base Line
text-bottom
例:
<span style="vertical-align:text-bottom">Abcdefg</span> Base Line
表示例:
Abcdefg Base Line
text-transform
英語などの大文字、小文字を指定します。値は以下の通りです。
- none ⋯ 記述した通りに表示します
- capitalize ⋯ 単語の先頭を大文字にします
- uppercase ⋯ 全て大文字で表示します
- lowercase ⋯ 全て小文字で表示します
none
例:
<span style="text-transform:none;">This is a pen</span>
表示例:
This is a pen
capitalize
例:
<span style="text-transform:capitalize;">This is a pen</span>
表示例:
This is a pen
uppercase
例:
<span style="text-transform:uppercase;">This is a pen</span>
表示例:
This is a pen
lowercase
例:
<span style="text-transform:lowercase;">This is a pen</span>
表示例:
This is a pen
text-align
テキストの横の位置を指定します。
- left ⋯ 左
- center ⋯ 中央
- right ⋯ 右
left
例:
<div style="text-align:left;">Abcdefg</div>
表示例:
Abcdefg
center
例:
<div style="text-align:center;">Abcdefg</div>
表示例:
Abcdefg
right
例:
<div style="text-align:right;">Abcdefg</div>
表示例:
Abcdefg
line-height
行間を指定します。%やpmなどの数値を指定します。
<div style="line-height:200%">サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章</div>
表示例:
サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章