【React/TypeScript】背景色を追加する

なにをつくるにせよまずは背景色がないと始まりませんよね。
逆に言うと背景色があればなんかそれっぽくなりますよね。

ここでは背景色の付け方を記載します。

単色の場合

<div className="min-h-screen bg-blue-300">
  これはテストメッセージです。
</div>

背景色がつきます。適用するクラスは2つだけです。

• min-h-screen：
  画面全体を着色します。「少なくとも（min）、画面（screen）の高さ（h）だけ」といった意味合いでしょうか。これがないと後述の通り、文字のある行のみ着色されます。
• bg-blue-300：
  着色する色を指定します。bgは「back ground」の略ですね。bg-blue-* の-*の数値で色の濃さを調整できます。

※ min-h-screen がない場合

せっかくなので青色を例に色の濃さを調べてみましょう。

普段使いならbg-*-300あたりが無難かもしれませんね。

グラデーションをつけたい場合

背景色にグラデーションをつけることができます。単色と比べてよりオシャレに見えますよね。
グラデーションといってもどちらからどちらに、何の色から何の色に変化させたいかを決定する必要があると思いますのでパターン別に紹介します。

右下方向にグラデーションをつける

<div className="min-h-screen bg-gradient-to-br from-blue-600 to-blue-100">
</div>

背景がグラデーションされました。適用するクラスは4つです。

• min-h-screen：
  単色で説明した通り、画面全体を着色します。
• bg-gradient-to-br：
  右下方向（to bottom right）に背景をグラデーションします。この後別のパターンも紹介しますが、いずれも bg-gradient-to-* の形となり、終端に向かう方向を省略文字で指定します。（bl：bottom left、tr：top right、tl：top left）
• from-blue-600：
  グラデーション開始時の色を指定します。先頭に「from」とあるのがわかりやすいですね。
• to-blue-100：
  グラデーション終了時の色を指定します。先頭に「to」とあるのがわかりやすいですね。

左下方向にグラデーションをつける

<div className="min-h-screen bg-gradient-to-bl from-blue-600 to-blue-100">
</div>

右上方向にグラデーションをつける

<div className="min-h-screen bg-gradient-to-tr from-blue-600 to-blue-100">
</div>

左上方向にグラデーションをつける

<div className="min-h-screen bg-gradient-to-tl from-blue-600 to-blue-100">
</div>

きれいですね。
もうすこし色の濃さや色の選別を工夫すればもっと映えると思うので試行錯誤してみてください。

以上です～