文字色に#000（黒）とか#fff（白）とかは、あんまり使わないよって話【HTML】color
黒色のカラーコードは#000000なんだけど、実際は文字色の指定で#000000とか使わないよ！ってお話です。
同じように#ffffffの白もあんまり使わないです。
コントラストが強すぎて目が疲れちゃうんですよね。
「っていうか、お前のサイト黒じゃんか」って、ツッコみは各自で飲み込んでください。
ってことで、黒い文字だったら#333333かな、白文字だと#ddddddとか。
ただ、背景色に溶けて読みにくくならないように注意しましょう。
<p class="box b01">ここは、背景#dddで文字が#333だよ<br><span class="box_txt">Gungnir</span></p>
<p class="box b02">ここは、背景#f1f1f1で文字が#333だよ<br><span class="box_txt">Gungnir</span></p>
<p class="box b03">ここは、背景#fffで文字が#000だよ<br><span class="box_txt">Gungnir</span></p>.box {
font-size: 24px;
padding: 5em .5em;
text-align: center;
}
.b01 {
background-color: #ddd;
color: #333;
}
.b02 {
background-color: #f1f1f1;
color: #333;
}
.b03 {
background-color: #fff;
color: #000;
}
.box_txt {
font-family: 'Century Gothic';
font-size: 250%;
font-weight: bold;
}ここは、背景#dddで文字が#333だよ
Gungnir
ここは、背景#f1f1f1で文字が#333だよ
Gungnir
ここは、背景#fffで文字が#000だよ
Gungnir
どうでしょうか。真っ黒より、いい感じじゃないですか。
真っ白だと、なんだか塗り忘れた塗り絵……みたいに感じるのは私だけでしょうか。
もちろん、絶対使ってはいけないってことは無いです。
こだわりがあったり、面積が小さかったりする場合は、#000とか#fffを使います。
あとは、ロゴ画像との絡みで、どうしも#000じゃなきゃ合わないとかね。
見ているディスプレイの違いや環境設定で、みんなが全く同じ色で見てるわけではないです。
ちなみに本サイトは、メインの文字色は#dddで、背景は黒ですが、rgba(0, 0, 0, .9)という書き方で、下が少し透けるようになっています。
#000000は#000の3桁に省略できるよ
途中コード見てもらえればわかると思うんですが、3桁で記載しています。
#000000や#fffffだとそれぞれ、#000や#fffに省略できます。
私はめんどくさがりだし少しでもコードをスッキリしたいので、省略で書きます。
#f1f1f1のような形だと省略できないのですが、2桁ずつ同じであれば省略してOKです。
#336699と#369とかね。
まとめ
- #000（黒）と#fff（白）だとコントラストがきつく感じるので、#333や#dddにした方が馴染むよ。
- 6桁のカラーコードは、3桁に省略して書ける場合があるよ。
そもそも自然界に黒は存在しない……とかよく聞きますね。
興味ある人はググってみてください。
