Help us understand the problem. What is going on with this article?

CSS3の色の指定について

More than 1 year has passed since last update.

色の指定の種類

カラーネームで指定する

html lang="ja"
  head
    meta charset="utf-8"
    title
      | CSS3
    link rel="stylesheet" href="./stylesheets/default.css"
  body
    div id="box1" box1
    div id="box2" box2
    div id="box3" box3
    div id="box4" box4
#box1 {
  background-color: wheat;
}

#box2 {
  background-color: khaki;
}

#box3 {
  background-color: lightpink;
}

#box4 {
  background-color: steelblue;
}

Kobito.yOoxiU.png

  • 指定できるカラーネームは以下を参照
  • WEB色見本 原色大辞典 - HTMLカラーコード https://www.colordic.org/
  • 変わった色の指定はOSやブラウザなどの環境によって正常に表示されない場合がある

カラーコード(#)で指定する

  • 色指定を16進数(0-f)で指定する
  • 3桁と6桁で指定する方法がある
#box1 {
  background-color: #f0f;
}

#box2 {
  background-color: #ff00ff;
}
  • 重複する値は省略することができる。3桁以外は無理
  • 色の指定は頻繁に行うので、省略できた方がコーディングが少し楽になる

rgb, rgba(CSS3)で指定する

  • 赤緑青の量で色を指定する方法
  • 数値(0-255)、%(0-100%)で指定する方法がある
  • 0(0%)が薄く255(100%)が濃い
background-color: rgb(赤、緑、青)
#box1 {
  background-color: rgb(255, 0, 0);
}

#box2 {
  background-color: rgb(0%, 100%, 0%);
}
  • 0が透明で1が元の色
#box1 {
  background-color: rgba(255, 0, 0, 0.2);
}

#box2 {
  background-color: rgba(0%, 100%, 0%, 0.8);
}

hsl, hslaで指定する (CSS3)

  • 色相 (Hue)
  • 鮮やかさ (Saturation)
  • 明るさ (Lightness)
  • 透明度 (Alpha)
#box1 {
  background-color: hsl(0, 79%, 72%)
}

#box2 {
  background-color: hsl(0, 90%, 80%)
}

#box3 {
  background-color: hsla(210, 100%, 50%, .7);
}

#box4 {
  background-color: hsla(210, 100%, 40%, .7);
}

image.png

  • 少し色を明るくしたい、鮮やかにしたいといった時に直感的に変更できる
  • 古いブラウザでは利用できない時があるので注意
  • CSSは1未満の0の部分は省略できるので省略している

便利ツール

要素全体を透明にする (opacity)

  • 背景色だけではなくて、要素全体を透明にしたい時はCSS3のopacityを使う
#box1 {
  background-color: red;
  opacity: .5;
}
masarufuruya
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系のフリーランスエンジニア。React Nativeとサーバーレスアーキテクチャがマイブーム。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした