【CSS】文字の装飾!文字色の指定の仕方と最低限意識する点


<span>
    こんにちは
</span>
    

文字の色を指定するためには、color属性を使用します。

このspan要素に対してcolor属性を使用してみます。


span {
    color: red;
}
        
こんにちは

color属性にred(赤)という値を指定したため、文字の色が赤色になっています。
この様に色のキーワード(*1)を指定することで文字色を指定できます

カラーコード「16進数(hex)」で指定する

16進数というのは「0123456789abcdef」という普段日常生活で使用している10進数「0123456789」にアルファベット6文字「abcdef」を追加した計16の英数字で表される数値となります。

先頭にシャープ(#)を付け、16進数が6桁のカラーコードを使用して各色を表現します

カラーコードは光の三原色「」「」「」のを混ぜて表現します。
左から2文字は赤色を表し、次の2文字は緑、最後の2文字が青となります。

赤色の文字にしたい場合であれば、「赤」を最大値に設定して、「緑」と「青」はゼロなので、次のようになります。


span {
    color: #ff0000;
}
        
こんにちは

光の三原色は、すべての色を混ぜると白色になります。
そのため、白色のカラーコードは「#ffffff」となり、逆に黒のカラーコードは「#000000」となります。

各色の16進数が同じ場合、カラーコードを3文字に省略して指定することもできます。

例: 赤「#f00」、白「#fff」、黒「#000

光の三原色「赤(Red)」「緑(Green)」「青(Blue)」で指定する

カラーコードの16進数を10進数で指定する方法で、rgbという関数を使用します。

左からコンマ(,)区切りで、「」「」「」を0から255の数値で指定します。


span {
    color: rgb(255, 0, 0);
}
        
こんにちは

色相(Hue)、彩度(Saturation)、輝度(Lightness)で指定する

HSL色空間を指定する方法です。

色相(wikipedia)は色相環の角度を0〜360までの数値で指定し、彩度は0〜100%で0に近いほど灰色となり、輝度は0〜100%で0に近いほど黒で100に近いほど白になります

色相環では始まり(0)が赤色となっているため、次のような指定になります。


span {
    color: hsl(0, 100%, 50%);
}
        
こんにちは

アルファチャンネル

アルファチャンネルを使用して色の透過度を設定することができます。

カラーコード

カラーコードの6桁の後に透過度を2桁付けることで透明にすることができます。
ffが不透明で00が透明になります


span {
    color: #ff000088;
}
        
こんにちは

RGBA

rgb関数の最後にアルファチャンネルを設定します。
1が不透明で0が透明になります


span {
    color: rgb(255, 0, 0, 0.53);
}
        
こんにちは

HSLA

hsl関数の最後にアルファチャンネルを設定します。
1が不透明で0が透明になります


span {
    color: hsl(0, 100%, 50%, 0.53);
}
        
こんにちは

理解度チェック

  • 青色の文字を表示させてください!
  • 緑色の文字を表示させてください!
  • 紫色の文字を表示させてください!

*1: 色のキーワードについてもっと知りたい方は次のページを参考にしてください。
<color> – CSS: カスケーディングスタイルシート | MDN

文字色の取り扱いに注意する

Webデザイナーは色に関する専門的な知識をもっていますが、そうでない方も最低限意識するべき点について説明します。

読みやすい色を使用する

読みやすい色を使用することを常に意識しましょう。

例えば、「この文字」は背景の色に近いため読むことが困難です。同じ様に「この文字」も困難です。この様な例では、利用者が読みにくい他に、Googleなどの検索エンジンに「隠しテキスト」と判断されてしまい検索順位にマイナスな影響を与える可能性もあります。

色の配色に困ったら、色相環(Wikipedia)の補色などを参考にしてみましょう。

イメージを正しく使用する

これは「青色」です。と表示されていたら混乱してしまうように、色にはイメージがあります。

信号機は世界のどこでも「」は止まれで、「」は進めるです。同じ様に、「黄」は注意、「橙」は警告、「青」は指示を連想させます。

絶対押すな」より「絶対押すな」という具合に正しいイメージの色を使用しましょう。

アクセシビリティを意識する

アクセシビリティとは、どんな人でも支障なく利用できるかどうかの度合いのことを言います。

文字が小さすぎると読みにくいと感じる人がいるように、色覚異常(Wikipedia)であれば赤色と緑色は同じ様に見えているかもしれません
Webサイトは不特定多数の多くの人に目にしてもらう機会があるため、「どんな人でも見やすい」を意識することは必須と言えます。

理解度チェック

  • 文字色を設定する際に最低限意識することを3つ挙げてください

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。