目次 | 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 文字に線を引くサンプル