スポンサーリンク
ここまでのスタイルシートでの色の指定方法まとめ
スタイルシートで色を指定する時は、#に続けて３桁、または６桁の１６進数を使います。
１６進数で使う文字
１６進数は数字の０～９の１０文字とアルファベットのa～fの６文字で記述します。
１６進数は１６番目に桁代わりするわけですが、数値をあらわす文字が０～９までの１０個しかありません。そこで足りない６つの数値をa～fまでの６文字で補っています。
つまり、いちばん小さいのが０。１，２，３，４，５，６，７，８と進んで
９の次がa 。a の次が b c d e と進んで、一番最後が f です。
スタイルシートで文字の色を変える指示はこう書きます。（下は文字の色に白を指した場合）
#の後が３つの時と６つの時のちがい
これは以前ブログの表の見栄えを良くしたい！の巻 その１に書いたんですが、ここに再掲します。
結論を言うと指定できる細かさが違うということです。
色の指定は１６進数ということは以前書きました。
その数字が00～ff までだと２５６種類になります。
これが、0～f までだと１６種類です。
６文字の色指定の場合、赤の数値に２５６種類、緑の数値に２５６種類、青の数値に２５６種類を割り当てています。つまり２５６ ｘ ２５６ ｘ ２５６=１６７７７２１６通りの色味が指定できる。
これに対して３文字だと１６ ｘ １６ ｘ １６=４０９６通りになります。
４０９６色では物足りないと言うのなら#の後を６文字にすればＯＫです。
どれが何色なのか？
#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;
}
関連コンテンツ
スポンサーリンク
こんばんは。
過去の記事、色々拝見させて頂きました。
解りやすい説明で理解しやすく、大変に便利ですね！
このサイトをより詳しく見て勉強したいと思います。
とても助かります！
コメントありがとうございます。
この記事を書き上げるのが少し遅かったみたいで。
勝手に人様のサイトの画像だけ使って申し訳ないことになりました。