CSSでカラーを変更する方法(カラーコードについての基礎知識)

HTML/CSS

今回は、CSSでテキストカラーや背景色などを変更する記述の仕方を紹介いたします。またカラーコードについても少しだけ触れますので良かったら参考にしてみて下さい。

CSSでの記述

CSSでカラーを指定したい場合は、下記の様な記述をスタイルシートに記述します。(いろんなパターンがある)

要素 { color: #008000; }

要素 { background-color: rgb(0, 128, 0); }

サイト上のpタグ全体の色を変えたい場合は、下記の様にpタグに対しての記述をスタイルシートに記述していきます。

p { color: rgb(0, 128, 0); }

この様に一部の文章の色を変えたい場合は下記の様に直接styleを記述すればOKです。

<p style="color: #008000">
この様に一部の文章にだけ色を変えたい場合は下記の様に直接styleを記述すればOKです。
</p>

この様に背景色を変えたい場合は「background-color」を指定します。

<p style="background-color:#ffffe0">
この様に背景色を変えたい場合は「background-color」を指定します。
</p>

また「#008000」や「rgb(0, 128, 0)」の部分のことをカラーコードと言います。

カラーコードについて

カラーコードとは、Webページ上で表現される色を指定するための制御コードのことである。 カラーコードはシャープ(#)に続く6桁の16進数で表記される。 2桁ごとに赤・青・緑の濃淡が表され、16進数(0~F)の0が最も薄く、Fに近づくほど濃い色となる。

https://www.weblio.jp/content/カラーコード

これらのカラーコードを変更することで色を変えることが出来ます。

そしてカラーコードの書き方は「#008000」の様に「#」を付けて16進数で表す書き方や、「rgb(0, 128, 0)」の様に10進数で表すパターンなど、下記の様に色々とあります。

16進数#FF0000; #fff; #008000 など

「#」から始めて16進数で書いていきます。#ffffffや#000000など同じ数字が並ぶものは#fffなどと省略可能です。
10進数rgb(255,0,0); or rgb(100%,0%,0%);

Red、Blue、Greenの値を最大300(100%)まで振って書いていきます。
Webカラーネームcolor: red; color: blue; color: olive; など

決められたカラーネームをそのまま書いていきます。
HSLhsl(0,100%,50%);

色相の円グラフの角度を示す値です。
透過rgba(255,0,0,0.3);  or hsla(0,100%,50%,0.5);

a chをつける事で透明度を表します。透過度無しが1で0.9〜0.1と数値を下げると透明になっていきます。

最後に、下記の記事の様にワードプレスのカラーボタンをカスタムすれば効率的にカラーを付けていけます。

カラーの例

テキストカラー

パープル

ダークグリーン

ブラウン

ゴールド

<p style="color:#800080;">パープル</p>
<p style="color:#006400;">ダークグリーン</p>
<p style="color:#a52a2a;">ブラウン</p>
<p style="color:#ffd700;">ゴールド</p>

背景色

ホワイトスモーク

ライトシアン

リネン

ゴールド

<p style="background-color:#f5f5f5;">ホワイトスモーク</p>
<p style="background-color:#e0ffff;">ライトシアン</p>
<p style="background-color:#faf0e6;">リネン</p>
<p style="background-color:#ffd700;">ゴールド</p>

透過性

グリーン10%

グリーン50%

グリーン80%

パープル10%

パープル50%

パープル80%

<p style="background-color:rgba(0, 255, 0, 0.1)";>グリーン10%</p>
<p style="background-color:rgba(0, 255, 0, 0.5)";>グリーン50%</p>
<p style="background-color:rgba(0, 255, 0, 0.8)";>グリーン80%</p>
<p style="background-color:rgba(255, 0, 255, 0.1)";>パープル10%</p>
<p style="background-color:rgba(255, 0, 255, 0.5)";>パープル50%</p>
<p style="background-color:rgba(255, 0, 255, 0.8)";>パープル80%</p>

この様に、カラーコードを変えれば様々な色を作成することが出来ます。

また、無数にあるカラーコードを調べる際は「原色大辞典」と言うサイトがおすすめです。もしくはGoogleの検索窓に「#000000」などのカラーコードを入力するとカラーパネルが出ます。そこで色を作成して新たなカラーコードをコピーして使うことも可能です。


以上が「CSSでカラーを変更する方法(カラーコードについての基礎知識)」でした。

カラー指定の仕方は他にもたくさんあります。それらをマスターすればWEBデザインのクオリティが大幅に上がるかと思いますので色々と勉強してみて下さい。

当サイトでも、他にも「グラデーション」や「半透明」などいろんなパターンでのカラー指定について紹介していきますので是非参考にしてみて下さい。