SE学院
Contact

Paddingの使い方

Cheat sheet

各項目を選ぶことで、テキストや背景の色を変更できます。

テキストの色
背景の色

HTML

<div class="">
Color
</div>

サンプル

Color

Color

Primer CSSには、色を指定するためのクラスが用意されています。

<p class="text-blue">.text-blue</p>
<p class="text-dark">.text-dark</p>
<p class="text-gray-light">.text-gray-light</p>
<p class="text-gray">.text-gray</p>
<p class="text-gray-dark">.text-gray-dark</p>
<p class="text-red">.text-red</p>
<p class="text-orange">.text-orange</p>
<p class="text-orange-light">.text-orange-light</p>
<p class="text-yellow">.text-yellow</p>
<p class="text-green">.text-green</p>
<p class="text-purple">.text-purple</p>
<p class="text-pink">.text-pink</p>

.text-blue

.text-dark

.text-gray-light

.text-gray

.text-gray-dark

.text-red

.text-orange

.text-orange-light

.text-yellow

.text-green

.text-purple

.text-pink

Background color

Primer CSSには、背景色を指定するためのクラスが用意されています。

<div class="bg-blue">.bg-blue</div>
<div class="bg-blue-light">.bg-blue-light</div>
<div class="bg-red">.bg-red</div>
<div class="bg-red-light">.bg-red-light</div>
<div class="bg-green-light">.bg-green-light</div>
<div class="bg-yellow-dark">.bg-yellow-dark</div>
<div class="bg-yellow">.bg-yellow</div>
<div class="bg-yellow-light">.bg-yellow-light</div>
<div class="bg-purple">.bg-purple</div>
<div class="bg-ray-dark">.bg-ray-dark</div>
<div class="bg-gray">.bg-gray</div>
<div class="bg-white">.bg-white</div>
.bg-blue
.bg-blue-light
.bg-red
.bg-red-light
.bg-green-light
.bg-yellow-dark
.bg-yellow
.bg-yellow-light
.bg-purple
.bg-gray-dark
.bg-gray
.bg-white