ここまでのスタイルシートでの色の指定方法まとめスタイルシートで色を指定する時は、 #
に続けて3桁、または6桁の16進数を使います。
16進数は数字の0〜9の10文字とアルファベットのa〜fの6文字で記述します。
16進数は16番目に桁代わりするわけですが、数値をあらわす文字が0〜9までの10個しかありません。そこで足りない6つの数値をa〜fまでの6文字で補っています。
つまり、いちばん小さいのが0。1,2,3,4,5,6,7,8と進んで
9の次がa 。a の次が b c d e と進んで、一番最後が f です。
スタイルシートで文字の色を変える指示はこう書きます。(下は文字の色に白を指した場合)
これは以前 ブログの表の見栄えを良くしたい!の巻 その1 に書いたんですが、ここに再掲します。
文字の色 color
背景の色 background-color (backgroundでも指定可能)
枠線の色 border-color (borderでも指定可能)
リンクのタグは a です。
ただし、リンクの文字色はいくつかのパターンを指示する必要があります。
例えば、普段の文字色は黄色でマウスが乗ったら白にする場合。
16進数で使う文字
16進数は数字の0〜9の10文字とアルファベットのa〜fの6文字で記述します。
16進数は16番目に桁代わりするわけですが、数値をあらわす文字が0〜9までの10個しかありません。そこで足りない6つの数値をa〜fまでの6文字で補っています。
つまり、いちばん小さいのが0。1,2,3,4,5,6,7,8と進んで
9の次がa 。a の次が b c d e と進んで、一番最後が f です。
スタイルシートで文字の色を変える指示はこう書きます。(下は文字の色に白を指した場合)
color:#fff
または #ffffff
#の後が3つの時と6つの時のちがい
これは以前 ブログの表の見栄えを良くしたい!の巻 その1 に書いたんですが、ここに再掲します。
なぜ6文字と3文字どちらでもよいのか?また、どう違うのか?
結論を言うと 指定できる細かさが違う ということです。
色の指定は16進数ということは以前書きました。
その数字が 00〜ff までだと 256 種類になります。
これが、 0〜f までだと 16 種類です。
6文字の色指定の場合、 赤の数値に256種類 、 緑の数値に256種類 、 青の数値に256種類 を割り当てています。つまり256 x 256 x 256= 16777216通り の色味が指定できる。
これに対して3文字だと16 x 16 x 16= 4096通り になります。
4096色では物足りないと言うのなら#の後を6文字にすればOKです。
結論を言うと 指定できる細かさが違う ということです。
色の指定は16進数ということは以前書きました。
その数字が 00〜ff までだと 256 種類になります。
これが、 0〜f までだと 16 種類です。
6文字の色指定の場合、 赤の数値に256種類 、 緑の数値に256種類 、 青の数値に256種類 を割り当てています。つまり256 x 256 x 256= 16777216通り の色味が指定できる。
これに対して3文字だと16 x 16 x 16= 4096通り になります。
4096色では物足りないと言うのなら#の後を6文字にすればOKです。
どれが何色なのか?
#f00 赤
#0f0 緑
#00f 青
#000 すべてゼロ->光なし->黒
#fff すべて最強->まぶしい->白
#ff0 黄色
#f0f 紫
#0ff 水色
#0f0 緑
#00f 青
#000 すべてゼロ->光なし->黒
#fff すべて最強->まぶしい->白
#ff0 黄色
#f0f 紫
#0ff 水色
各パートへの色指定
文字の色 color
背景の色 background-color (backgroundでも指定可能)
枠線の色 border-color (borderでも指定可能)
例)
枠線を赤、背景を青、文字を白の場合の指定
border-color:#f00;
background-color:#00f;
color:#fff;
border-color:#f00;
background-color:#00f;
color:#fff;
リンクの文字色を変える
リンクのタグは a です。
ただし、リンクの文字色はいくつかのパターンを指示する必要があります。
a:link | 未訪問リンクの色 |
---|---|
a:visited | 訪問済みリンクの色 |
a:hover | マウスが上に乗ったときの色 |
例えば、普段の文字色は黄色でマウスが乗ったら白にする場合。
a:link,a:visited{
color:#ff0;
}
a:hover{
color:#fff;
}