Tailwind CSS の border クラスを使って境界線を表示する
Tailwind CSS の border クラスを使って、要素の境界線を表示することができます。border クラスの使い方をご紹介します。このページ自体が Tailwind CSS を使っていますので、そのままサンプルになっています。
| CLASS | CSS |
|---|---|
| border | border-width: 1px; |
| border-2 | border-width: 2px; |
| border-4 | border-width: 4px; |
| border-8 | border-width: 8px; |
| border-0 | border-width: 0px; |
| border-t | border-top-width: 1px; |
| border-t-2 | border-top-width: 2px; |
| border-t-4 | border-top-width: 4px; |
| border-t-8 | border-top-width: 8px; |
| border-t-0 | border-top-width: 0px; |
| border-r | border-right-width: 1px; |
| border-r-2 | border-right-width: 2px; |
| border-r-4 | border-right-width: 4px; |
| border-r-8 | border-right-width: 8px; |
| border-r-0 | border-right-width: 0px; |
| border-b | border-bottom-width: 1px; |
| border-b-2 | border-bottom-width: 2px; |
| border-b-4 | border-bottom-width: 4px; |
| border-b-8 | border-bottom-width: 8px; |
| border-b-0 | border-bottom-width: 0px; |
| border-l | border-left-width: 1px; |
| border-l-2 | border-left-width: 2px; |
| border-l-4 | border-left-width: 4px; |
| border-l-8 | border-left-width: 8px; |
| border-l-0 | border-left-width: 0px; |
| border-solid | border-style: solid; |
| border-dashed | border-style: dashed; |
| border-dotted | border-style: dotted; |
| border-double | border-style: double; |
| border-none | border-style: none; |
| rounded | border-radius: 0.25rem; |
| rounded-sm | border-radius: 0.125rem; |
| rounded-lg | border-radius: 0.5rem; |
| rounded-full | border-radius: 9999px; |
| rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; |
| rounded-r | border-top-top-right: 0.25rem; border-bottom-right-radius: 0.25rem; |
| rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; |
| rounded-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; |
| border-transparent | border-color: transparent; |
| border-white | border-color: rgb(255 255 255 / 1); |
| border-gray-100 | border-color: rgb(243 244 246 / 1); |
| border-gray-200 | border-color: rgb(229 231 235 / 1); |
| border-gray-300 | border-color: rgb(209 213 219 / 1); |
| border-gray-400 | border-color: rgb(156 163 175 / 1); |
| border-gray-500 | border-color: rgb(107 114 128 / 1); |
| border-gray-600 | border-color: rgb(75 85 99 / 1); |
| border-gray-700 | border-color: rgb(55 65 81 / 1); |
| border-gray-800 | border-color: rgb(31 41 55 / 1); |
| border-gray-900 | border-color: rgb(17 24 39 / 1); |
| border-black | border-color: rgb(0 0 0 / 1); |
境界線
Tailwind CSS を使って境界線を表示するには、以下に示すクラスを指定する。
<div class="border">.border</div>
<div class="border-0">.border-0</div>
<div class="border-2">.border-2</div>
<div class="border-4">.border-4</div>
<div class="border-8">.border-8</div>上記の HTML は以下のように表示される。
.border
.border-0
.border-2
.border-4
.border-8
上側の境界線
Tailwind CSS を使って、要素の上側に境界線を表示するには、以下に示すクラスを指定する。
<div class="border-t">.border-t</div>
<div class="border-t-2">.border-t-2</div>
<div class="mt-8 border-t-4">.border-t-4</div>
<div class="border-t-8">.border-t-8</div>
<div class="border-t-0">.border-t-0</div>上記の HTML は以下のように表示される。
.border-t
.border-t-2
.border-t-4
.border-t-8
.border-t-0
右側の境界線
Tailwind CSS を使って、要素の右側に境界線を表示するには、以下に示すクラスを指定する。
<div class="border-r">.border-r</div>
<div class="border-r-2">.border-r-2</div>
<div class="border-r-4">.border-r-4</div>
<div class="border-r-8">.border-r-8</div>
<div class="border-r-0">.border-r-0</div>上記の HTML は以下のように表示される。
.border-r
.border-r-2
.border-r-4
.border-r-8
.border-0
下側の境界線
Tailwind CSS を使って、要素の下側に境界線を表示するには、以下に示すクラスを指定する。
<div class="border-b">.border-b</div>
<div class="border-b-2">.border-b-2</div>
<div class="border-b-4">.border-b-4</div>
<div class="border-b-8">.border-b-8</div>
<div class="border-b-0">.border-b-0</div>上記の HTML は以下のように表示される。
.border-b
.border-b-2
.border-b-4
.border-b-8
.border-b-0
左側の境界線
Tailwind CSS を使って、要素の左側に境界線を表示するには、以下に示すクラスを指定する。
<div class="border-l">.border-l</div>
<div class="border-l-2">.border-l-2</div>
<div class="border-l-4">.border-l-4</div>
<div class="border-l-8">.border-l-8</div>
<div class="border-l-0">.border-l-0</div>上記の HTML は以下のように表示される。
.border-l
.border-l-2
.border-l-4
.border-l-8
.border-l-0
境界線の種類
Tailwind CSS を使って境界線の種類を指定するには、以下に示すクラスを指定する。
実線を表示する例を以下に示す。
<div class="border border-solid">.border .border-solid</div>
<div class="border-2 border-solid">.border-2 .border-solid</div>
<div class="border-4 border-solid">.border-4 .border-solid</div>
<div class="border-8 border-solid">.border-8 .border-solid</div>.border .border-solid
.border-2 .border-solid
.border-4 .border-solid
.border-8 .border-solid
破線を表示する例を以下に示す。
<div class="border border-dashed">.border .border-dashed</div>
<div class="border-2 border-dashed">.border-2 .border-dashed</div>
<div class="border-4 border-dashed">.border-4 .border-dashed</div>
<div class="border-8 border-dashed">.border-8 .border-dashed</div>.border .border-dashed
.border-2 .border-dashed
.border-4 .border-dashed
.border-8 .border-dashed
点線を表示する例を以下に示す。
<div class="border border-dotted">.border .border-dotted</div>
<div class="border-2 border-dotted">.border-2 .border-dotted</div>
<div class="border-4 border-dotted">.border-4 .border-dotted</div>
<div class="border-8 border-dotted">.border-8 .border-dotted</div>.border .border-dotted
.border-2 .border-dotted
.border-4 .border-dotted
.border-8 .border-dotted
二重線を表示する例を以下に示す。
<div class="border border-double">.borer .border-double</div>
<div class="border-2 border-double">.border-2 .border-double</div>
<div class="border-4 border-double">.border-4 .border-double</div>
<div class="border-8 border-double">.border-8 .border-double</div>.border .border-double
.border-2 .border-double
.border-4 .border-double
.border-8 .border-double
境界線を表示しない例を以下に示す。
<div class="border border-none">.border .border-none</div>.border .border-none
角丸の境界線
Tailwind CSS を使って境界線を角を丸くするには、以下に示すクラスを指定する。
<div class="p-4 border rounded">.border .rounded</div>
<div class="p-4 border rounded-sm">.border .rounded-sm</div>
<div class="p-4 border rounded-lg">.border .rounded-lg</div>
<div class="p-4 border rounded-full">.border .rounded-full</div>
<div class="p-4 border rounded-t">.border .rounded-t</div>
<div class="p-4 border rounded-r">.border .rounded-r</div>
<div class="p-4 border rounded-b">.border .rounded-b</div>
<div class="p-4 border rounded-l">.border .rounded-l</div>上記の HTML は以下のように表示される。
.border .rounded
.border .rounded-sm
.border .rounded-lg
.border .rounded-full
.border .rounded-t
.border .rounded-r
.border .rounded-b
.border .rounded-l
境界線の色
Tailwind CSS を使って境界線の色を指定するには、border クラスに加えて、以下に示すクラスを指定する。
<p class="border border-transparent">.border-transparent</p>
<p class="border border-white">.border-white</p>
<p class="border border-gray-100">.border-gray-100</p>
<p class="border border-gray-200">.border-gray-200</p>
<p class="border border-gray-300">.border-gray-300</p>
<p class="border border-gray-400">.border-gray-400</div>
<p class="border border-gray-500">.border-gray-500</p>
<p class="border border-gray-600">.border-gray-600</p>
<p class="border border-gray-700">.border-gray-700</p>
<p class="border border-gray-800">.border-gray-800</p>
<p class="border border-gray-900">.border-gray-900</p>
<p class="border border-black">.border-black</p>上記の HTML は以下のように表示される。
.border-transparent
.border-white
.border-gray-100
.border-gray-200
.border-gray-300
.border-gray-400
.border-gray-500
.border-gray-600
.border-gray-700
.border-gray-800
.border-gray-900
.border-black