CSS テキスト書式
テキスト書式
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the link.
テキストの色
colorプロパティはテキストの色を設定するために使用されます。
色はCSSで最も頻繁に指定されます：
- 16進数値 - 例:＃FF0000
- RGB値 - 例:RGB(255,0,0)
- 色の名前 - 例:red
参照CSS 色の値完全な色の値を参照してください。
ウェブページの背景色は、body要素内の選択を指します：
W3C標準のCSSでは：colorプロパティを定義する場合、background-colorプロパティも定義する必要があります。
テキストの配置
text-alignプロパティは、テキストの水平方向の配置を設定するために使用されます。
テキストは中央揃え、左揃え、右揃え、両端揃えにできます。
text-alignが"justify"に設定されている場合、各行は幅が等しくなるように展開され、左右の余白が揃います（雑誌や新聞のように）。
テキストの装飾
text-decorationプロパティは、テキストの装飾を設定または削除するために使用されます。
デザインの観点から見ると、text-decorationプロパティは主にリンクの下線を削除するために使用されます：
次のように文字を装飾することもできます：
例
試してみる »
リンクではないテキストを強調することはお勧めしません。これはしばしばユーザーを混乱させるためです。
テキストの変換
text-transformプロパティは、テキスト内の大文字と小文字を指定するために使用されます。
すべての文字を大文字または小文字に変換したり、各単語の先頭文字を大文字にしたりするために使用できます。
例
試してみる »
テキストのインデント
text-indentプロパティは、テキストの最初の行のインデントを指定するために使用されます。
その他の例
文字間のスペースを指定する
この例では、文字間のスペースを増減する方法を示しています。
行間のスペースを指定する
この例では、段落内の行間のスペースを指定する方法を示しています。
要素のテキスト方向を設定する
この例では、要素のテキスト方向を変更する方法を示しています。
単語間の空白スペースを増やす
この例では、段落内の単語間の空白スペースを増やす方法を示しています。
要素内でテキストの折り返しを無効にする
この例では、要素内のテキストの折り返しを無効にする方法を示しています。
画像の垂直方向の配置
この例では、テキスト内の画像の垂直方向の配置を設定する方法を示しています。
テキストに影を追加する
この例では、テキストの影を設定する方法を示しています。
すべてのCSSテキストプロパティ。
| プロパティ | 説明 |
|---|---|
| color | テキストの色を設定する |
| direction | テキストの方向を設定する。 |
| letter-spacing | 文字間隔を設定する |
| line-height | 行の高さを設定する |
| text-align | 要素内のテキストを配置する |
| text-decoration | テキストに装飾を追加する |
| text-indent | 要素内のテキストの最初の行をインデントする |
| text-shadow | テキストの影を設定する |
| text-transform | 要素内の文字を制御する |
| unicode-bidi | テキストがオーバーライドされるかどうかを設定または返す |
| vertical-align | 要素の垂直方向の配置を設定する |
| white-space | 要素内の空白の処理方法を設定する |
| word-spacing | 単語間隔を設定する |