CSSでフォント・文字の色を変更する方法/colorプロパティの使い方

colored-pencils IT

CSSでは文字の色を変更する時にfont-colorとかではなく、colorプロパティを変更します。

Advertisements

colorプロパティの使い方

たとえばこのように色を変更してみます。

文字色の変更
color:色;

この時、html側では「このように」という文字をspanで囲んでいます。spanはよくこんな感じで、どこかテキストの一部を装飾したい場合などに使われます。
spanは他の装飾でも使用するので、文字を青くする時用に「bluetext」というクラスをspanに付けておきます。
そしてCSS側では、bluetextクラスに対して「文字を青くする」という装飾を指定します。まとめるとこうなります。

<!-- html -->
たとえば<span class = "bluetext">このように</span>色を変更してみます。

/*CSS*/
.bluetext{
color:blue;
}

または、(あまり推奨されませんが)htmlに直接スタイルを指定することもできます。

<!-- html -->
たとえば<span style = "color:blue;">このように</span>色を変更してみます。

ちょっと一箇所変更したい場合にはこっちのほうが楽かもしれません。

CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント