色関連の主なプロパティ。
CSS(カスケーディングスタイルシート)での色関連のプロパティ(属性)について、主なものについて解説します。
color プロパティ(前景色)。
color プロパティとは、前景色、すなわち文字の色です。
color プロパティの値としては、以下のものがあります。
color プロパティは指定なき場合には上位要素から継承されます。
color プロパティを与える際に注意したい事として、color プロパティを用いる場合には、必ずbackground-colorプロパティ(背景色)も併せて指定しましょう。
そうしないと、文字が背景に紛れて読めなくなる事があり得ます。
背景のプロパティ群。
各要素の背景として、色と画像をプロパティとして与える事が出来ます。
このため、いくつかのプロパティが定義されております。
背景関連のプロパティは全ての要素に対して適用が可能です。つまり、一文字単位で背景を変える事も可能になっております。
- 但し、一部の携帯電話向けブラウザなどで、正常に機能しない場合があります。
- PC向けのブラウザでも、かつては正常に機能しないものが幾つかありましたが、今日ではそのようなブラウザは全くと言って良い程使われなくなっており、心配する必要はない筈です。
background-color プロパティ(背景色)。
background-color プロパティは、背景色です。
background-color プロパティの値としては、以下のものがあります。
background-color プロパティが指定されていない場合には、transparent 値、すなわち無色透明が採られます。
つまり、background-color プロパティの指定がない場合であっても、上位要素から値が継承される事はありません。
尚、background-color プロパティを用いる際に注意すべき事として、background-color プロパティを適用する場合には、必ずcolorプロパティ(前景色)も併せて指定しましょう。
そうしないと、文字が背景に紛れて読めなくなる事があり得ます。
background-image プロパティ(背景画像)。
background-image プロパティは、背景に用いる画像です。
background-image プロパティの値としては、以下のものがあります。
background-image プロパティは指定なき場合には none値、すなわち背景画像なしとなります。
つまり、background-image プロパティの指定がない場合であっても、上位要素から値が継承される事はありません。
background-image プロパティを適用する際に注意したい事を挙げておきます。
background-imageプロパティを用いる場合には、必ずも併せて指定しましょう。
そうしないと、背景画像を読み込まなかった場合に前景色が背景色に紛れて読めなくったりする事があり得ます。
- また、
background-imageプロパティと併用すべきbackground-colorプロパティ(背景色)の値は、背景画像に近い色とすれば良いでしょう。その意味でも、背景画像には色調が欽一なものを撰ぶのが良いでしょう。
background-repeat プロパティ(背景画像の繰返し指定)。
background-repeat プロパティは、背景に用いる画像を繰返し並べるか否かの指定です。
当然、background-image プロパティ(背景画像)での背景画像指定がないと無意味となります。
background-repeat プロパティの値としては、以下のものがあります。
background-repeat プロパティは指定なき場合には repeat 値が採られる、すなわち縦横とも繰返して並べる事となります。
つまり、background-repeat プロパティの指定がない場合であっても、上位要素から値が継承される事はありません。
background-position プロパティ(背景画像の表示位置)。
background-position プロパティは、背景に用いる画像の表示位置の指定です。
当然、background-image プロパティ(背景画像)での背景画像指定がないと無意味となります。
background-position プロパティの値としては、以下のものがあります。
数値の単位としてはいろいろありますが、取敢えず
%(幅または高さに対する比率)
を覚えておけば良いでしょう。
background-positionプロパティの値の詳細はCSSリファレンス内のbackground-positionプロパティの書式をご覧ください。
background-position プロパティは指定なき場合には left top値が採られる、すなわち横方向は左端、縦方向は上端に表示される事となります。
つまり、background-position プロパティの指定がない場合であっても、上位要素から値が継承される事はありません。
background-attachment プロパティ(背景画像を画面に固定するか否か)。
background-attachment プロパティは、背景画像を画面に固定するか否かの指定です。
当然、background-image プロパティ(背景画像)での背景画像指定がないと無意味となります。
background-attachment プロパティの値としては、以下のものがあります。
background-attachment プロパティは指定なき場合には left top値が採られる、すなわち固定せずにスクロールに合わせて動かす事となります。
つまり、background-attachment プロパティの指定がない場合であっても、上位要素から値が継承される事はありません。
background プロパティ(背景関連プロパティの一括指定)。
background プロパティは、背景関連プロパティの一括指定です。
すなわち、
background-colorプロパティ(背景色)background-imageプロパティ(背景画像)background-repeatプロパティ(背景画像の繰返し指定)background-positionプロパティ(背景画像の表示位置)background-attachmentプロパティ(背景画像を画面に固定するか否か)
の値を一行で纏めて指定する記述法です。
注意すべき事として、これらの値はいずれも任意に指定出来ますが、指定しなかったプロパティ値については、各プロパティで指定された初期値が自動的に当てられると言う事です。
特に、これらの固有のプロパティを個別に指定した後で、background プロパティを記述してしまうと、折角の個別指定が初期化されてしまうので、記述順序には充分注意してください。
具体的な background プロパティの記述方法としては、以下のものがあります。
色の値として指定出来るもの。
color プロパティ(前景色)及びbackground-color プロパティ(背景色)には、色の値として主に以下の値が指定出来ます。
色を十六進数六桁で指定する。
# に続けて、赤, 緑, 及び青の各成分の値を十六進数二桁ずつで記述します。
例えば、赤なら、
- 赤成分は最大の FF (十進数で言えば255)
- 緑成分は最小の 00 (十進数で言えば0)
- 青成分は最小の 00 (十進数で言えば0)
となるため、これらを # に続けて並べて、#FF0000 と記述する事となります。
- つまり、この方法の場合、各成分は 0 から 255 までの二百五十六段階が指定可能となります。
色を十六進数三桁で指定する。
# に続けて、赤, 緑, 及び青の各成分の値を十六進数一桁ずつで記述します。
十六進数六桁で指定する際に、赤, 緑, 及び青の各成分の上と下の桁が同じ場合、この表記法が使えます。
例えば、六桁で #EEFF00 と言う色であれば、これを #EF0 と略記出来ます。
- つまり、この方法の場合、各成分は 0 から 15 までの十六段階が指定可能となります。
色をキーワードで指定する。
現行の CSS 第二水準第一改訂版 では、以下の十七色のキーワードが指定されております。
black- 黒です。
#000000または#000と同じです。 silver- 銀色です。
#c0c0c0と同じです。 gray- 灰色です。
#808080と同じです。 white- 白です。
#ffffffまたは#fffと同じです。 maroon- 臙脂色です。
#800000と同じです。 red- 赤です。
#ff0000または#f00と同じです。 purple- 赤紫です。
#800080と同じです。 fuchsia- ピンクです。
#ff00ffまたは#f0fと同じです。 green- 緑です。
#008000と同じです。 lime- 黄緑です。
#00ff00または#0f0と同じです。 olive- 黄土色です。
#808000と同じです。 yellow- 黄色です。
#ffff00または#ff0と同じです。 navy- 紺です。
#000080と同じです。 blue- 青です。
#0000ffまたは#00fと同じです。 teal- 青緑です。
#008080と同じです。 aqua- 水色です。
#00ffffまたは#0ffと同じです。 orange- 橙色です。
#FFA500と同じです。
実は、この他にも各ブラウザが私的な色コードを定めているのですが、その中で一部広く普及していると思われるコードについては、次世代の CSS 規格となる CSS 第三水準 で規格化される予定となっております。
- 拡張カラーキーワード… CSS 第三水準草案・カラーモジュール内の一節
尚、CSS 第三水準がまだ勧告されていない現時点でも、上記の現時点で公式とされている色コード以外の私的な色コードを用いる事は、文法違反とはしておりません。
ただ、環境に依っては思い通りの発色とならない恐れはありますので、その点はご留意ください。