HTML、CSSのカラーコードの色んな書き方、省略表記についても紹介

文字の色を変えるための属性の書き方やCSSの設定方法について紹介しましたが、他の方法についても紹介します。

まず、style属性を使って色を付ける方法です。

具体例は次の通りです。

<pre>
</code>
<p style="color:red;">この文章の文字を赤色にします。</p>
</code>
</pre>

この書き方でも、文字のデザインを変えたり装飾ができます。
<style>

続いて、styleタグを使って付ける方法です。

HTML文書内で文字のデザインや装飾の設定をするために使うタグです。
<head>タグの中に書きます。

具体例は次の通りです。

<!doctype html>
<head>
<html lang="ja">
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<p>Hello,World</p>
</body>
</html>

この中で、「Hello,World」の部分を赤色にしたければ、<title>タイトル</title>と、</head>の間に、

を付け足します。

このような感じになりますね。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>Hello,World</p>
</body>
</html>

カラーコードの書き方　英単語での表記、16進数表記

上に挙げた具体例で{color:red;}と書きましたが、{color:ff0000;}と書いても同じく赤になります。

このように、付けたい色を英単語だけでなく、アルファベットと数字の組み合わせで付けることもできます。

「ff0000;」のような書き方を「16進数表記」と言います。

この表記で使用可能な数字やアルファベットは、「0～9」と「a～f」です。

こちらも全て半角入力で、アルファベットは大文字でも可能です。

「HTML　カラーコード　一覧」などのキーワードで調べると色の一覧を掲載してくれているサイトがありますので、興味のある方は調べてみて下さい。

上に挙げた具体例で、文字を赤色にするには{color:red;}と書きましたが、redの部分を「green」と書けば緑色になりますし、「purple」と書けば紫色になります。

このように付けたい色を英語の単語で指定することもできますが、他にも例えば「#00FF00;」のように#と0～9の数字あるいは、アルファベットのa～f（大文字でも可）の6桁の組み合わせで色を指定する方法もあります。

「color:#00ff00;」のような書き方です。

#00FF00;のように色を指定するために割り振られている番号をカラーコードと言います。

また、0～9の数字あるいは、アルファベットのa～fの組み合わせなので、16進数で表すことができるので、「16進数表記」と言います。

参考までに「#00FF00;」はライム色になります。

#00FF00;はライム色なので、ライム色には「#00FF00;」という番号が割り振られていると言えます。

「green」と書く緑色よりも明るい緑色です。

指定できる数字とアルファベットの組み合わせは膨大にあります。

とても全種類を覚えれるほどではないので、付けたい色を探したい場合は「HTML　カラーコード　16進数」などで調べると色の一覧と、どの色にどの番号が割り振られているかを掲載してくれているサイトが見つかります。

付けたい色に割り振られているカラーコードを、コピー&ペーストして活用するといいでしょう。

#00ff00;といった書き方は、英単語で指定するよりも見た目的にめんどくさそうに見えるかもしれません。

しかし、こういった16進数表記の方が色の種類が豊富にある分、薄い緑色、濃い緑色という風に調節しやすいというメリットがありますので、ぜひ活用してみて下さい。

※注意点
・#は、半角入力の状態で「Shift」を押しながら「#、3、あ、ぁ」のボタンを押します。

・カラーコードの数字とアルファベットは半角で入力してください。

・全角だと上手く反映されません。

Wordからカラーコードを取得する方法

ネットでカラーコードの一覧表が掲載されているサイトを探さなくてもカラーコードを取得する方法もありますので紹介します。

Wordを使う方法です。

Wordでカラーコードを取得する具体的な手順を紹介します。

私が使っているWordは2019なので、他のバージョンだと手順が少し異なる場合があることをご了承ください。

Word2019を開きます。

「空白の文書を新規作成」ボタンをクリック。

画面上のツールバーの中にフォントという項目があり、その中の右の方に「A」のマークの下に赤い線が入っているボタン（カーソルを乗せると「フォントの色」と表示されるボタン）があると思います。

その右に下向きの矢印がありますので、それをクリック。

表示される項目の下の方にある「その他の色」をクリック。

色の設定という画面が表示され、その画面上に「標準」、「ユーザー設定」という項目がありますので、「ユーザー設定」をクリック。

「色(C):」と表示されている下に虹色の画面があり、その右にしたほど色が濃くて上ほど薄い色になっている棒のようなものがあります。

その棒の右下に小さな左向きの三角形があるので、これを左クリックした状態で上や下に動かすと、三角形を動かせます。

これで色の濃さを任意で調節できます。

虹色の画面上の任意の場所で左クリックすると、画面の右下に「新規」と「現在の色」と書かれている部分がありますが、その中でも「新規」と書かれている下の部分の色が変わったと思います。

また、虹色の画面上の上で左クリックしたまま、マウスを任意の位置に動かしても「新規」と書かれている下の部分の色が変わったと思います。

色の濃さを調節できる棒のような部分で、色の濃さを選択し、虹色の画面上で自分の使いたい色を見つけたら、その色が「新規」と書かれている下の部分の色に表示されていることを確認します。

そして、画面左下にHex(H):という項目があり、その右側に例えば「#3AD23E」といった感じで、#と6桁の数字とアルファベットの組み合わせが表示されていると思います。

入力枠内の#の左で左クリックし、もう一度左クリックしたままで6桁全て青く反転するまでマウスを右に動かします。

マウスカーソルを青く反転している上に載せた状態で右クリック。
（途中で他の部分をクリックしてしまい、青く反転してない場合は、もう一度上記の方法で反転させて下さい）

表示された画面の中から「コピー」をクリック。

「色の設定」画面の右上のバツボタン（ウィンドウを閉じるボタン）をクリックして閉じる。

Wordの画面左上のバツボタンをクリックして閉じる。

CSSファイルを表示させ、p要素の文字の色を先ほど選択した色に変えたければ、

p{
color:red;
}

のredの部分を「Backspace」ボタンで削除し、「:」と「;」の間の上で左クリック。

同じ位置で右クリックし、表示された画面の中から「貼り付け」をクリック。

そうすると、先ほどWordで選択した任意の色をCSSの要素にも反映させれました。

上記のような方法でもカラーコードを取得できますので、ご参考にして下さい。

16進数表記の簡略的な書き方

上でカラーコードの16進数表記の書き方を説明しましたが、「#00ff00;」を「#0f0;」と入力しても同じ色になります。

このような書き方を省略表記と言います。

左から数えて同じ数字か、同じアルファベットが2つ連続する場合は、同じ2つの数字あるいはアルファベットを省略して書けます。

具体例は次の通りです。

「#00ff00;」の省略記法・・・#0f0;
「#ff1a6f;」の省略記法・・・#f1a6f;

左から2個ずつに分けて、アルファベットか数字が2個連続しているか？に着目するのがポイントです。

#00ff00;を
2個ずつに分けると00、ff、00に分けれます。
どれも同じ数字かアルファベットが連続していますので
#0f0;
と書けます。

#ff1a6f;
を2個ずつに分けるとff、1a、6fに分けれます。
連続している部分は「ff」の部分だけなので、この部分だけ省略できます。

よって、
#f1a6f;
と書けます。