テキスト [CSS]

タイトルやテキストなど文字に関するCSSプロパティを紹介します。

文字の色

文字の色は color を使います。

.red {
  color: #FF0000;
}
.green {
  color: #00FF00;
}
.blue {
  color: #0000FF;
}

<p class="red">この文字の色は赤です。</p>
<p class="green">この文字の色は緑です。</p>
<p class="blue">この文字の色は青です。</p>

この文字の色は赤です。
この文字の色は緑です。
この文字の色は青です。

文字の大きさ

文字の大きさは font-size を使います。

.f_12 {
  font-size: 12px;
}
.f_18 {
  font-size: 18px;
}
.f_24 {
  font-size: 24px;
}

<p class="f_12">この文字の大きさは12pxです。</p>
<p class="f_18">この文字の大きさは18pxです。</p>
<p class="f_24">この文字の大きさは24pxです。</p>

この文字の大きさは12pxです。
この文字の大きさは18pxです。
この文字の大きさは24pxです。

文字の太さ

文字の太さは font-weight を使います。

.f-w_n {
  font-weight: normal;
}
.f-w_b {
  font-weight: bold;
}

<p class="f-w_n">この文字の太さはNormalです。</p>
<p class="f-w_b">この文字の太さはBoldです。</p>

この文字の太さはNormalです。
この文字の太さはBoldです。