JavaScriptに関するお知らせ

SINCE2019
>
【CSS】tailwind.cssの色の指定方法を抑えよう

【CSS】tailwind.cssの色の指定方法を抑えよう


こんにちは!一番タイピングしやすい色はorangeだと思うMizutani(@sirycity)です。(マークアップの時確認で一時的に色付けたりするよね?自分だけ?)

今日はtailwind.cssの色を扱う際の気をつけるポイントみたいなのをざっと書きます。

超基本の文字と背景とボーダー

  • text-[色]-[番号] で文字の色
  • bg-[色]-[番号] で背景の色
  • border--[色]-[番号] でボーダーの色

基本はこのようなクラス名を指定すればokです。例えば赤文字は text-red-500 とか。青い背景は bg-blue-500 とか。

tailwindはクラス名が色を表します。赤ならred。超シンプル。

他のCSSフレームワークとかだとクラス名が用途を表すものが多いです。successだと成功だから緑とか。errorだとエラーだから赤とか。

個人的にはtailwindの方がわかりやすいし、ちょっと明度落としたりとかしやすいので大好き。

後ろの番号について

番号は100から900の9種類です。これはどの色もいっしょ。また、

数字が小さいほど明るく大きいほど暗いです。分かりやすく言うと、大きいほど濃くなる(厳密には違うけど)。

カラーコードだと大きいほど明るくなるので逆です。注意。まあ逆にしてもすぐ気づくけど。

一例として、 gray-100 はほぼ白、 gray-900 はほぼ黒です。この2つを全体の背景と文字色にしてもいいかもね。

色の種類について

基本的な色は全部ある。赤(red)とか青(blue)とか。ただ主要な色だとこの2つがない。

  • 茶色
  • 赤紫

逆にマイナーだけどある(日本人的に見慣れないだけ?)のはこの2つ。覚えよう!

  • teal(ティール)は青と緑の中間っぽい色、tailwindのロゴっぽい色。
  • indigo(インディゴ)は青と紫の中間っぽい色、今このブログBenQのモニターで見てる人いたらBenQのロゴみたいな色。

白黒灰色について

白と黒は番号がない。text-whiteはok。text-white-300とかはダメ。白と黒はほんっっとに真っ白と真っ黒だから、まあまず使わない。gray-100と gray-900使おう。

grayは G R A Y しかダメ。 G R E Y はダメ。

透明度

背景は半透明にできる。背景しかできないし、背景もできるのはバージョン1.4以降

bg-opacity-[番号] を bg-[色]-[番号]と併せて付けよう。こんな感じ。

<div class="bg-blue-500 bg-opacity-50">僕は半透明の青色だよ!</div>

opacityの数字は5種類。 0 25 50 75 100。これはCSSのopacityと一緒だから覚えやすいね。

さいごに

簡単すぎてつまづきポイント探すのに苦労した。

tailwindは似た色大量にあるし、一度使った色とかはメモっておくと後が楽だよ!使ってみてね。



PREV
2020-05-09
【CSS】世にも簡単なレスポンシブの1カラム2カラムの書き方

NEXT
2020-05-15
【JS】Next.jsとGatsby.js(SSRと静的化)の比較と選び方