Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@masarufuruya

CSS3の色の指定について

More than 3 years have 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;
}
7
Help us understand the problem. What is going on with this article?
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
masarufuruya
React/Next.js/TypeScript/React Native/Firebase/GraphQL/DDD リモートでも要件定義→設計→見積→開発→リリースまで自走できることを大切にしています。お仕事の依頼はTwitterのDMまで。Rails/Vue中心でしたが最近はフロントエンド/サーバーレス/DevOps等やってます。
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?