プログラミング・ITCSS

Blog Article

CSSで文字や要素に色を付ける・変更する方法をわかりやすく解説

こんにちは、Mochiです。

CSSで要素に色をつけるにはどうしたらいいんだろう?CSSで色を変えるプロパティを忘れてしまった…🤔

そんな方に向けて、CSSで文字や要素の色をつけたり、変更する方法をわかりやすく解説します。学んでいきましょう!

🎨CSSの色の指定方法

まずCSSで色を指定する方法は複数あります。それぞれの仕組みとどれを使うべきかを解説します。

RGB値

RGB値とは、赤、緑、青を組み合わせた色の表現モデルです。0〜255までの数値で色の強さを指定し、組み合わせることで様々な色を表現します。数値が大きいほど色が強いです。
RGB値の例
色ごとにこれらの値を覚える必要はありません。カラーピッカーと呼ばれるような色を選択するツールを使うことで、値は勝手に決まります。VSCodeというエディターでは以下のようなカラーピッカーがあります。
カラーピッカーの例

CSSでRGB値を指定する書き方は

rgb(<red>, <green>, <blue>)

のように、赤、緑、青の数値を指定します。
RGB値を与えるルールの例

RGBA

RGBAとは、RGBに透明度(alpha: アルファ)を加えた色の表現モデルです。RGB値に加えて、透明度を0〜1で表します。値が小さいほど透明度が上がります。
透明度の変化
CSSでRGB値を指定する書き方は

rgba(<red>, <green>, <blue>, <alpha>)

のように、赤、緑、青、透明度の数値を指定します。
RGBAモデルで透明度を指定した例

カラーコード

カラーコードとは、0〜ffまでの値で色の強さを指定する色の表現方法です。ffという値は16進数法の表現で、私たちが普段使う10進数法の255を表します。1~9の数字に加えてa(10)、b(11)、c(12)、d(13)、e(14)、f(15)を使うことで、本来3桁の255までの数字を2桁で表すことができます。とりあえず「255を短くしたやつ」という認識を持っておけば大丈夫です!

CSSでカラーコードの書き方は

#00ff00

のように赤、緑、青の順で2桁ずつ値を指定します。

また、特徴として白や黒、グレーといった無彩色は同じ数値が赤緑青に3つ並びます。そして、2桁が同じ値の場合は1桁に省略できます。
カラーコードの例
RGB値とRGBA、カラーコードについて学びました。このうちどれを使うべきかについて、通常の色の時は一般的によく使われるカラーコードを使うと良いでしょう。また、透明度を扱いたい場合にはRGBAを使うと良いです。

では学んだカラーコードを使って、実際に色をつけるプロパティについて学んでいきましょう!

✍️色をつけるプロパティの種類と使い方

color:文字の色

colorプロパティは文字の色をつけることができます。
文字に色をつけるイメージ
colorプロパティの使い方は

<selector> {color: <value>};

のようになります。
値<value>には以下のいずれかを指定します。

  • キーワード:主要な色の名前
    • 例:red, blue, green
  • カラーコード
    • 例:#ff0000、#ddd
  • RGB値
    • rgb(<red>, <green>, <blue>)
  • RGBA
    • rgba(<red>, <green>, <blue>, <alpha>)

例えば次のように使います。
colorプロパティの使用例

background-color:背景の色

background-colorプロパティは背景の色をつけることができます。
背景色をつけたイメージ
background-colorプロパティの使い方は

<selector> {background-color: <value>};

のようになります。
値<value>には以下のいずれかを指定します。

  • キーワード:主要な色の名前
    • 例:red, blue, green
  • カラーコード
    • 例:#ff0000、#ddd
  • RGB値
    • rgb(<red>, <green>, <blue>)
  • RGBA
    • rgba(<red>, <green>, <blue>, <alpha>)

例えば次のように使います。
background-colorプロパティで背景色をつけた例

border:要素の境界線

borderプロパティは要素の境界線を作成し、色をつけることができます。
境界線を引いたイメージ
borderプロパティの使い方は

<selector> {border: <width> <type> <color>};

のようになります。

値(value)には太さ、タイプ、色を指定します。

  • <width>:線の太さ
      • 単位:px, em, remなど
    • キーワード
      • thin:細い
      • medium:通常
      • thick:太い
  • <type>:枠線のタイプ
    • none:なし
    • solid:実線
    • dashed:波線
    • dotted:点線
    • double:二重線
  • <color>:枠線の色
    • キーワード
    • カラーコード
    • RGB値 / RGBA

例えば次のように使います。
borderプロパティで境界線を引く例

border-direction

borderプロパティは、左右上下の境界線の位置ごとに、別々の色や形式を指定することもできます。

  • 種類
    • border-top:境界線の上
    • border-bottom:境界線の下
    • border-left:境界線の左
    • border-right:境界線の右

指定できる値(value)はborderプロパティと同じです。

例えば次のように使います。
4つの方向のborderプロパティで境界線を引いた例

🎉まとめ

今回は色の指定方法や文字、背景、枠線の色を変えるプロパティについて学びました。皆さんは今回学んだ内容によって、さまざまな部分に色をつけることができるようになりました!素晴らしいです👏

デザインにおいて色は非常に重要な要素です。今回学んだことをもとに、素敵な色を持つウェブサイトやアプリケーションを作成してみてください!

🤗おすすめ

本で体系的にCSSについて学びたいという方にはこちらの本をおすすめします。HTML・CSSの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。HTMLやCSSなど、ぜひ気になるWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容