シェアする
Changing Text Color and Background Color - Japanese Only
みなさまいかがお過ごしでしょうか。
続きまして文字色と背景色を変更してみましょう。
まず以下の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です。もしデザインが適用されない場合は『:』や『;』のミスなど記述に問題がないか確認してみましょう。
というわけでこの辺で。次の記事では文字の大きさを変更したり装飾してみます。引き続き頑張ってくださいね。ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
