【css】文字の色を指定できるcolorプロパティを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 cssで文字の色を指定できるcolorプロパティについて

  • colorプロパティとは
  • colorプロパティを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

colorプロパティとは

colorプロパティとは、文字の色を指定できるプロパティです。

colorプロパティで指定すると
cssのcolorプロパティを解説
というように文字の色を指定することができます。

書き方は

文字に指定したい色をカラーコードかカラーネームで指定します。

では、次の章で実際に使い動作を確認します。

colorプロパティサンプルの概要

colorプロパティサンプルでは、

  • HTML
  • css

の2ファイルを使います。

3つpタグを用意します。
2つのpタグのみ文字に色をつけるよう指定して、指定しなかったpタグとの表示の確認をします。
フォルダ構成は以下のようになっています。
cssのcolorプロパティを解説

HTMLサンプル

HTMLで外部のcssを読み込むやり方と、cssでid属性でHTML要素を指定するIDセレクターについてはこちらの記事をご参考ください。

cssサンプル

実行結果

作成したHTMLをブラウザで開きます。
cssのcolorプロパティを解説

指定したpタグのみ文字の色が指定できていることが確認できました。

まとめ:colorプロパティを使ってみよう

以上がcssのcolorプロパティについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました