CSS入門 | CSS基本プロパティ | CSSテキスト
CSSで使用できる代表的なtextプロパティは次のとおりである。
| プロパティ | 説明 |
|---|---|
| color | テキストの色を設定する。 |
| direction | テキストが書かれる方向を設定する。 |
| letter-spacing | テキスト内の文字間隔を設定する。 |
| word-spacing | テキスト内の単語間隔を設定する。 |
| text-indent | 段落の最初の行を字下げするかどうかを設定する。 |
| text-align | テキストの水平方向の配置を設定する。 |
| text-decoration | テキストにさまざまな効果を設定または削除する。 |
| text-transform | テキストに含まれる英字の大文字小文字を設定する。 |
| line-height | テキストの行間を設定する。 |
| text-shadow | テキストに影効果を設定する。 |
| unicode-bidi | directionプロパティと一緒に使い、テキストの基本出力方向を設定する。 |
| vertical-align | HTML要素内の垂直方向の配置を設定する。 |
| white-space | HTML要素内の空白を設定する。 |
colorプロパティ
colorプロパティは、テキストの色を設定する。
Webページでのテキストの既定色は黒である。
<body>タグに指定されたcolorプロパティ値は、Webページ内のすべてのテキスト要素に適用される。
ただし、各要素に別途指定されたcolorプロパティ値がある場合、その値が<body>タグに指定された値より優先される。
<style>
body { color: red; }
p { color: maroon; }
</style>
directionプロパティ
directionプロパティは、テキストが書かれる方向を設定する。
Webページでテキストは基本的に左から右へ書かれる。
directionプロパティがleft-to-right(ltr)の場合、既定設定のようにテキストは左から右へ書かれる。
しかし、directionプロパティがright-to-left(rtl)の場合、テキストは反対方向である右から左へ書かれる。
<style>
.rightToLeft { direction: rtl; }
</style>
letter-spacingプロパティ
letter-spacingプロパティは、テキスト内の文字間隔を設定する。
<style>
.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }
</style>
word-spacingプロパティ
word-spacingプロパティは、テキスト内の単語間隔を設定する。
letter-spacingプロパティとは異なり、文字間隔ではなく単語間隔を基準に設定する。
<style>
.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }
</style>
text-indentプロパティ
text-indentプロパティは、段落の最初の行を字下げするかどうかを設定する。
Webページで段落は基本的に字下げされていない。
<style>
.paraIndent { text-indent: 30px; }
</style>
text-alignプロパティ
text-alignプロパティは、テキストの水平方向の配置を設定する。
text-alignプロパティで設定された配置方向は、text-directionプロパティに関係なく優先的に適用される。
<style>
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }
</style>
text-decorationプロパティ
text-decorationプロパティは、テキストをいくつかの形で装飾できる。
<style>
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }
a { text-decoration: none; }
</style>
text-decorationプロパティ値をnoneに設定して、リンクが設定されたテキストの下線を削除するためによく使われる。
text-transformプロパティ
text-transformプロパティは、テキストに含まれる英字の大文字小文字を設定する。
このプロパティは、テキストに含まれるすべての英字を大文字または小文字に変更できる。 また、単語の最初の文字だけを大文字に変更することもできる。
<style>
h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }
</style>
text-transformプロパティは韓国語には影響せず、英字にだけ適用される。
line-heightプロパティ
line-heightプロパティは、テキストの行間を設定する。
<style>
.narrowLineHeight { line-height: 0.8; }
.wideLineHeight { line-height: 1.8; }
</style>
text-shadowプロパティ
text-shadowプロパティは、テキストに簡単な影効果を設定する。
<style>
h2 { text-shadow: 2px 1px #3399CC; }
</style>
CSS3テキスト
CSS3では、HTML文書内に存在するテキストをより多様な方法で操作できるようになった。 CSS3で新しく追加されたテキスト関連プロパティは次のとおりである。
| プロパティ | 説明 |
|---|---|
| text-overflow | content領域を外れたテキストをどのように表現するかを設定する。 |
| word-wrap | 長い単語がcontent領域を外れた場合、その単語を次の行に分けて表現できるようにする。 |
| word-break | 長い単語を分けて表現する必要があるとき、その単語が分かれる基準を設定する。 |
| text-emphasis | ユーザーが強調表現を設定できるようにする。 |
| text-align-last | テキストの最後の行の配置方法を設定する。 |
| text-justify | テキストの配置が両端揃えになっているとき、その配置方法を設定する。 |
CSS3テキストプロパティの対応バージョン
CSS3テキストプロパティをサポートする主なWebブラウザーのバージョンは次のとおりである。 また、ブラウザーごとにベンダープレフィックスを使ってこの機能を最初にサポートしたバージョンも併記している。
| プロパティ | ie | chrome | firefox | safari | opera |
|---|---|---|---|---|---|
| text-overflow | 6.0 | 4.0 | 7.0 | 3.1 | 11.0 / 9.0 -o- |
| word-wrap | 5.5 | 23.0 | 3.5 | 6.1 | 12.1 |
| word-break | 5.5 | 4.0 | 15.0 | 3.1 | 15.0 |
text-overflowプロパティ
text-overflowプロパティは、content領域を外れたテキストをどのように表現するかを設定する。
領域を外れたテキスト部分を切り取ることも、省略記号(…)を使って表現することもできる。
<style>
p { white-space: nowrap; width: 250px; overflow: hidden; }
#p_01 { text-overflow: clip; }
#p_02 { text-overflow: ellipsis; }
</style>
overflowプロパティ値をvisibleに設定すると、ユーザーにcontent領域を外れて省略されたテキストまで見せることができる。
<style>
#p_01:hover, #p_02:hover { overflow: visible; }
</style>
word-wrapプロパティ
word-wrapプロパティは、content領域を外れた長い単語を次の行に分けて表現できるようにする。
<style>
p { border: solid 1px black; width: 130px; }
#p_01, #p_03 { word-wrap: break-word; }
</style>
word-wrapプロパティは英字で構成された単語にだけ適用され、韓国語には適用されない。
word-breakプロパティ
word-breakプロパティは、長い単語を分けて表現する必要があるとき、単語が分かれる基準を設定する。
単語を文字ごとに分けることも、ハイフン(-)を基準に分けることもできる。
<style>
p { border: solid 1px black; width: 130px; }
#p_02 { word-break: break-all; }
#p_03 { word-break: keep-all; }
</style>
上の例で、word-wrapプロパティとword-breakプロパティの違いを確認できる。
word-breakプロパティは英字で構成された単語にだけ適用され、韓国語は自動的にbreak-allとして適用される。