Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - 文字色と背景色を変えてみよう

文字色と背景色を変えてみよう

みなさまいかがお過ごしでしょうか。

続きまして文字色と背景色を変更してみましょう。

まず以下のHTMLファイルを用意してください。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>CSS 練習中！</title>
<style>

</style>
</head> 
<body> 

<p class="color_white bkcolor_black">文字色と背景色を変更するよ。<br>文字色は白色だよ。<br>背景色は黒だよ。</p>

</body>
</html>

p要素には練習がてらclass属性に『color_white』と『bkcolor_black』の2つの値を記述してあります。これをクラスセレクタを使用してデザインを変更してみましょう。

今回のCSS記述はstyleタグを使用します。

ではやってみましょう。

文字色を変更するCSSプロパティは『color』です。背景色を変更するCSSプロパティは『background-color』です。値は『ウェブカラー』もしくは『色の名前』を記述します。

記述例は以下のような形になりますね。

p {
    color: red;
    background-color: #000000;
}

『ウェブカラー』とは主にウェブで使用される色指定の方法です。

こんな数字6桁の16ビット表記と

#FF0000

こんな数字3桁の8ビット表記があります。

#F00

この数値の羅列は一般に『カラーコード』と呼ばれます。

記述の仕方ですがまず文頭に『#』を置き、その後に赤、緑、青の成分を順番に16進数の数値で色を指定します。16ビットは『00~FF』までの数値、8ビットは『0~F』までの数値となります。例えば赤が『FF』、緑が『00』、青が『00』だと赤色が最大で緑、青が共に最小となり、純色の赤が出来上がります。

#FF0000

16ビットの場合の最大表現色は16,777,216色となります。8ビットで記述した場合の最大表現色は256色となります。

以下の8ビットの記述でも上記の#FF0000と同じ純色の赤色が表現されます。

#F00

大文字小文字は区別しません。最近では小文字表記が多数派になってきてるようですがまあどっちでも良いです。

かなり昔のディスプレイは表現できる色が乏しく8ビット表記を標準として使っていましたが、今のほぼ全てのディスプレイは1000万色以上の表現が可能なので古いディスプレイ対応など特別な場合を覗いて8ビットで記述する必要はありません。ただ8ビットで表現可能な色は8ビットで表記したほうが数値の記述が短くなり記述時間の短縮、及びファイル容量の節約につながるという背景があり今現在もそういった目的で8ビット表記は使用されてます。

とつらつらと説明しましたが欲しい色があるならば難しいことは考えず『ウェブカラー 一覧』とでもgoogle先生に聞いてみてください。きっと幸せになれると思います。

では実際に記述してみましょう。まずクラスセレクタcolor_whiteに文字色を変更するcolorプロパティと値を記述します。ウェブカラーで白色は『#FFFFFF』、もしくは『#FFF』です。

.color_white {
    color: #FFFFFF;
}

これでcolor_whiteは白文字となりました。

続いてクラスセレクタbkcolor_blackの背景色を黒色に変更しましょう。CSSプロパティは『background-color』、値は『#000』、もしくは『#000000』です。『background-color』のデフォルト値は『transparent』(透明色)となっています。

.bkcolor_black {
    background-color: #000000;
}

これでOKそうですね、では先程のHTMLファイルに組み込んでみましょう。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>CSS 練習中！</title>
<style>
.color_white {
    color: #FFFFFF;
} 
.bkcolor_black {
    background-color: #000000;
}
</style>
</head> 
<body> 

<p class="color_white bkcolor_black">文字色と背景色を変更するよ。<br>文字色は白色だよ。<br>背景色は黒だよ。</p>

</body>
</html>

完成したらブラウザで確認してみてください。しっかりデザインが変更されていますでしょうか。

ブラウザにおける色の指定はウェブカラーの他に『white』,『black』,『red』等、名前指定が可能な色もあります。記述例は以下です。

body {
    background-color: black;
}
p {
    color: white;
}
span {
    color: red;
}

ちょっとした確認作業などで「赤色のウェブカラーのカラーコードってなんだったっけ(；´Д｀)」となってしまう場合でも『red』と記述すれば赤色になるのでウェブカラーの確認時間を短縮できます。デバッグ時や一時的に色合いを確認したい場合などに捗るのでこれも覚えておくと良いでしょう。

色の一覧はこちらです。
http://www.w3.org/TR/css3-color/

ただし商用サイトなどでCSSを記述する際、最後はしっかりウェブカラーで指定するのが一般的です。その理由は他のエンジニアさんやデザイナーさんなどがファイルを触った際にウェブカラーのカラーコードを拾いにくいからです。商用サイトなどを構築する際の最後の納品時はウェブカラーで記述するようにしましょう。

問題なければOKです。もしデザインが適応されない場合は『:』や『;』のミスなど記述に問題がないか確認してみましょう。

というわけでこの辺で。次の記事では文字の大きさを変更したり装飾してみます。引き続き頑張ってくださいね。ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類
桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェア
このエントリーをはてなブックマークに追加