Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18
Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30
Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
[kjk_balloon id=”7″]文字の色を使って上手に配色したいなぁ[/kjk_balloon] [kjk_balloon id=”11″]マテリアルデザインではテキストの色や透明度でキレイに配色できるんだよ[/kjk_balloon] [kjk_balloon id=”4″]なんやて！透明度でやってやんよ！[/kjk_balloon]
このページでは、マテリアルデザインっぽい文字色の配色テクニックを紹介します。 [kjk_balloon id=”1″]ぼくのブログでもちょいちょい使ってます。[/kjk_balloon]
文字の色について
文字の色は単純に白と黒よりも、透明度をプラスしたり、ちょっとグレーに近い色を使っているサイトが多くあります。
文字の色が真っ黒だけでなく「グレー」や「うすいグレー」を使っている場合が多いですよね。
黒色について
真っ黒と表現していますが、カラーコードでは#000000と表現されます。RGBでは( 0, 0, 0)です。逆に白色は#ffffffと(255, 255, 255)と表現されます。
カラーコードからRGBを知りたいときはこちらのサイトがおすすめです。
参考
RGBと16進数カラーコードの相互変換ツール - PEKO STEPPEKO STEP
Googleの文字色
①検索文字入力欄：#000000、②背景が薄いグレー部分：#777、③背景が白の部分：#545454が使われています。
Amazonの文字の色
①検索文字入力欄：#000000、②商品下の黒い文字：#555が使われています。
コントラストを抑えた黒い文字
コントラストが強すぎると目が疲れやすくなります。コントラストキツめ
Amazonの文字色
Googleの文字色
このサイトの文字色
マテリアルデザインの文字色
マテリアルデザインでは文字色について透明度で表現されています。- メインの文字：#000000 透明度87％
- サブの文字 ：#000000 透明度60％
- ヒントの文字：#000000 透明度38％
マテリアルデザインでは背景が白（#ffffff）の場合は、黒色（#000000）の透明度を調整して、重要性を表しています。
カラーコードで透明度を指定
文字の色をCSSで指定する場合、カラーコードを使う場合が多いですよね。ただしカラーコードでは透明度まで指定するには後ろに2桁追加しなければいけません。| カラーコードで透明度を指定 | |
|---|---|
| メインの文字（透明度87％） | #000000DE |
| サブの文字 （透明度60％） | #00000099 |
| ヒントの文字（透明度38％） | #00000061 |
RGBAで透明度を指定
RGBにA（alpha：透明度）がプラスされた関数です。 透明度の指定（87％の場合）
RGBAで入力したほうが、直感的に透明度がわかりやすいですね。
[kjk_balloon id=”6″]透明度で迷ったらとりあえずRGBAで書いときゃいいね！[/kjk_balloon]
さて、使用する文字の色と透明度が決まったら実際に使ってみたいと思います。
.text {
color: rgba(0, 0, 0, 0.87);
}マテリアルカラーの例（インディゴ）
このブログは白黒をイメージカラーにしています。 そこで、ぼくが次にサイトを立ち上げる際に使いたいと思っているカラー「Indigo：インディゴ」を例に使ってみます。 マテリアルデザインのTools for picking colorsで紹介されているカラーになります。
[kjk_balloon id=”4″]いやぁ～かっこいい色ですね♪[/kjk_balloon]
このインディゴのなかで今回は #283593 のものをメインカラーで使って行きます。
配色例
内部リンクのカラーをインディゴでしてみました。透明度を変えて配色するだけでもキレイになりますね。
