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進数で表すパターンなど、下記の様に色々とあります。

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

WordPressのカラー選択の色を自由に変更する方法：見本あり

今回は、WordPressの標準機能であるテキストカラーと背景色を変更するボタンについて、これを押した際の実際の色味を自分の好きなデザインに変更する方法を紹介します。また最後には、丸々コピペで実装可能なCSSの見本を付けけていますので参考にしてみて下さい。

kt-life.net

2020.03.09

カラーの例

テキストカラー

<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>

透過性

<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デザインのクオリティが大幅に上がるかと思いますので色々と勉強してみて下さい。

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

CSSでグラデーションを作成する方法【コピペで使える】

今回は、CSSでグラデーションを作成する方法をいくつか紹介します。CSSのプロパティとカラーコードの指定の仕方や値に関してを詳しく書いていきます。また最後にはコピペ用の見本デザインも用意していますので良かったら参考にして下さい。

kt-life.net

2020.03.17

CSSで薄らした半透明カラーの作成方法（透過の指定）

今回は、CSSを使って要素やカラーを半透明にする方法を紹介します。今回使用する方法は2種類あります。プロパティの「opacity」を使用した方法と、「rgba」のaのチャンネルを使用した方法です。

kt-life.net

2020.03.21