スタイルシートでの色の指定方法

スポンサーリンク


ここまでのスタイルシートでの色の指定方法まとめ

スタイルシートで色を指定する時は、#に続けて3桁、または6桁の16進数を使います。

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です。


どれが何色なのか?

#f00 赤
#0f0 緑
#00f 青
#000 すべてゼロ->光なし->黒
#fff すべて最強->まぶしい->白
#ff0 黄色
#f0f 紫
#0ff 水色

各パートへの色指定

文字の色 color
背景の色 background-color (backgroundでも指定可能)
枠線の色 border-color (borderでも指定可能)

例)枠線を赤、背景を青、文字を白の場合の指定
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;
}

関連コンテンツ

スポンサーリンク

「スタイルシートでの色の指定方法」への2件のフィードバック

  1. こんばんは。
    過去の記事、色々拝見させて頂きました。
    解りやすい説明で理解しやすく、大変に便利ですね!
    このサイトをより詳しく見て勉強したいと思います。
    とても助かります!

  2. コメントありがとうございます。
    この記事を書き上げるのが少し遅かったみたいで。
    勝手に人様のサイトの画像だけ使って申し訳ないことになりました。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください