【初心者向け】CSSでのcolor(色)を指定する指定方法

投稿日: カテゴリー EC・WEBノウハウ

colorはテキストに色を指定するために使われるもので、コーディング作業の中で頻出します。

今までhtmlで指定をすることが多かったcolorですが、HTML5からはこの指定もスタイルシートですることになりました。

でも実際は、値の指定の方法など、どうすれば良いのかわからないことも多いのではないでしょうか。

そこで今回は、初心者の方でもわかるように「color」について紹介していきます。

 

【CSS】font-weightで文字の太さを指定する方法」を知りたい方はこちらをチェックしてみてください!

 

1.color(カラー)とは?

そもそもcolor(カラー)とは何なのでしょうか?

color(カラー)は、文字色を指定する際に使用する「プロパティ」を意味します。

「プロパティ」やそもそもCSSについてあまり理解していない方は、まずはこちらの記事をご確認をお願い致します。

初心者のためのCSSの書き方・入門編

では、早速「color(カラー)」の指定方法を見ていきましょう。

 

2.color(カラー)の指定方法

これが、color(カラー)の指定方法です。

color(カラー)の指定方法は

カラーネーム (例)red,blueなど
カラーコード (例)#FF0000,#0000FFなど
この二つが主流です。

それでは、順に見ていきましょう。

 

2-1.カラーネームで指定する方法

カラーネームとは、文字通りカラー「色」+ネーム「名前」で色の名前を入力して指定する方法です。

青色は「blue」
黄色は「yellow」
上記のように色を指定します。

しかし、主要な色以外は、ユーザーの使用するブラウザなどの環境により上手く表示されない場合がありますので、ご注意ください。

また、カラーネームは微妙な色の表現ができないので、こだわる場合にはカラーコードの使用をおすすめします。

実際に表示させるとこのようになります。

 

2-2.カラーコードで指定

カラーコードとは、シャープ(#)+6ケタの16進数(0~F)で色を指定する方法です。

前から二桁ごとに、赤・緑・青の濃淡が決まります。

例えば

青色の場合は「#0000FF」
黄色の場合は「#FFFF00」
となります。

しかし、いちいちこんなの覚えていられないですよね。

そこで、私が良く使用しているのが下記のサイトです。

WEB色見本 原色大辞典 – HTMLカラーコード

このサイトを見れば、一発で解決します。

さらに、カラーコードだと複雑な色も簡単に表示できます。

実際に表示させるとこのようになります。

まとめ

いかがでしたでしょうか?

これからフォントの色の指定をする際には、CSSで指定しましょう!


投稿者: 齋藤竹紘

齋藤 竹紘(さいとう・たけひろ) 株式会社オルセル 代表取締役 / 「うるチカラ」編集長

   
Experience|実務経験
2007年の株式会社オルセル創業から 17 年間で、EC・Web 領域の課題解決を 4,500 社以上 に提供。立ち上げから日本トップクラスのEC事業の売上向上に携わり、 “売る力” を磨いてきた現場型コンサルタント。
Expertise|専門性
技術評論社刊『今すぐ使えるかんたん Shopify ネットショップ作成入門』(共著、2022 年)ほか、 AI × EC の実践知を解説する書籍・講演多数。gihyo.jp
Authoritativeness|権威性
自社運営メディア 「うるチカラ」で AI 活用や EC 成長戦略を発信し、業界の最前線をリード。 運営会社は EC 総合ソリューション企業株式会社オルセル
Trustworthiness|信頼性
東京都千代田区飯田橋本社。公式サイト alsel.co.jp および uruchikara.jp にて 実績・事例を公開。お問い合わせは info@alsel.co.jp まで。

お問い合わせ