CSS テキスト

テキスト関連の基本的な設定方法について解説します。

テキストの色

テキストの色を設定するには、colorプロパティを使用します。色名、16進数、RGB、RGBAなどの形式で指定できます。

p {
  color: #333333;
}

テキストの装飾

テキストの装飾を設定するには、text-decorationプロパティを使用します。下線（underline）、上線（overline）、取り消し線（line-through）、なし（none）などが指定できます。

a {
  text-decoration: none;
}

テキストの配置

text-alignプロパティを使用して、テキストの水平方向の配置を制御できます。

このプロパティには、left（デフォルト）、right、center、justifyの値があります。

/* 左揃え（デフォルト） */
p {
  text-align: left;
}

/* 右揃え */
p {
  text-align: right;
}

/* 中央揃え */
p {
  text-align: center;
}

/* 両端揃え */
p {
  text-align: justify;
}

vertical-alignプロパティを使用して、テキストの垂直方向の配置を制御できます。

このプロパティは、テーブルセルやインライン要素など、特定の要素に対してのみ適用されます。利用可能な値には、top、middle、bottom、baselineなどがあります。

/* 上揃え */
td {
  vertical-align: top;
}

/* 中央揃え */
td {
  vertical-align: middle;
}

/* 下揃え */
td {
  vertical-align: bottom;
}

/* ベースライン揃え */
td {
  vertical-align: baseline;
}

テキストの行間

テキストの行間を設定するには、line-heightプロパティを使用します。単位なしの数値、ピクセル(px)、パーセント(%)、em、remなどが使えます。

p {
  line-height: 1.5;
}

テキストの字間

テキストの字間を設定するには、letter-spacingプロパティを使用します。単位はピクセル(px)、em、remなどが使えます。

p {
  letter-spacing: 1px;
}

テキストの変換

テキストの大文字・小文字を変換するには、text-transformプロパティを使用します。

大文字に変換（uppercase）、小文字に変換（lowercase）、先頭だけ大文字（capitalize）、変換なし（none）が指定できます。

h1 {
  text-transform: uppercase;
}

テキストのインデント

テキストのインデント（字下げ）を設定するには、text-indentプロパティを使用します。単位はピクセル(px)、パーセント(%)、em、remなどが使えます。

p {
  text-indent: 2em;
}

テキストの方向

directionプロパティはあまり使わないと思いますが、テキストの方向を設定できます。

これは、右から左に書かれる言語（アラビア語やヘブライ語など）で役立ちます。ltr（左から右、デフォルト）またはrtl（右から左）のいずれかを設定できます。

/* 左から右（デフォルト） */
p {
  direction: ltr;
}

/* 右から左 */
p {
  direction: rtl;
}