CSS color 文字の色を指定するサンプル

colorは、文字の色を表します。

目次 colorとは
文字の色を指定する
色に透明度を付ける

colorとは

書き方 color : 値
文字の色を指定します。
初期値 ブラウザによる
継承 継承する
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/color

文字の色を指定する

<style>
  .p1 {
    color: red;
  }
  .p2 {
    color: #008000;
  }
  .p3 {
    color: rgb(0, 0, 255);
  }
</style>
<p class="p1">あいうえお</p>
<p class="p2">あいうえお</p>
<p class="p3">あいうえお</p>

3行目は、英字で色を指定しています。
6行目は、rrggbbの形式で指定しています。
9行目は、rgbの形式で指定しています。

以下のイメージになります。

色に透明度を付ける

色に透明度を付ける場合は、rgbaを指定して4つめの引数を追加します。
4つめの引数は、0から1までを指定でき、0が透明で1が不透明です。

<style>
  .p4 {
    color: rgba(0, 0, 255, 0.7);
  }
  .p5 {
    color: rgba(0, 0, 255, 0.5);
  }
  .p6 {
    color: rgba(0, 0, 255, 0.3);
  }
</style>
<p class="p4">あいうえお</p>
<p class="p5">あいうえお</p>
<p class="p6">あいうえお</p>

以下のイメージになります。

関連の記事

CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS text-decoration 文字に線を引くサンプル

△上に戻る