【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【CSS】文字・テキストの色を変える方法(color)

本記事では、HTMLで表示されている文字・テキストの色を変える方法について解説しています。

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

文字の色を変える

HTMLで表示しているテキストの色を変更する場合、CSSのcolorプロパティを使います。

p{
  color:値;
}

colorプロパティに設定できる値について見ていきましょう。

色の指定方法①:キーワード

カラーを指定する1つ目の方法、キーワードについて解説します。

p{
  color:black;
}

キーワードでは、あらかじめ決められた色を「black」や「white」などの名詞で指定します。直感的で分かりやすいですが、キーワードでは表現できない微妙な色合いを指定することができないため、実務ではあまり使われることが少ないです。キーワードで指定できる色名はMDNに記載されています。

キーワードを使用して文字の色を変更したサンプルコードと実行結果は以下のとおりです。

<p class="red">赤</p>
<p class="green">緑</p>
<p class="blue">青</p>
.red{
  color:red;
}

.green{
  color:green;
}

.blue{
  color:blue;
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次