📦
TailwindCSSについて自分なりのチートシートを作る。#6 BOX編
初めに
TailwindCSSを使うときに、思うように動かせなかったりすることが多いなと個人的に感じていて、なので一度全体的にまとめておこうと思いこの記事を書いています。
第一弾目は、疑似クラスについてまとめました。
第二弾目は、レスポンシブデザインについてまとめました。
第三弾目は、ダークモードの実装についてまとめました。
第四弾目は、コンテナについてまとめました。
第五弾目は、Columnsについてまとめました。
第六弾目は、ボックスについてまとめていきたいと思います。
基本的なBoxレイアウトに関するクラス一覧
1. サイズ(Width / Height)
クラス | 説明 |
---|---|
w-64 |
幅を固定(例:16rem ) |
w-full |
横幅いっぱい |
h-32 |
高さを固定(例:8rem ) |
h-screen |
画面全体の高さ |
2. パディング・マージン
クラス | 説明 |
---|---|
p-4 / px-4 / py-4
|
内側の余白(全体 / 横 / 縦) |
m-4 / mx-4 / my-4
|
外側の余白(全体 / 横 / 縦) |
3. ボーダー
クラス | 説明 |
---|---|
border |
デフォルトの1pxボーダー |
border-2 / border-4
|
ボーダーの太さ |
border-gray-300 |
ボーダーの色 |
rounded / rounded-lg / rounded-full
|
角の丸み |
4. シャドウ
クラス | 説明 |
---|---|
shadow |
標準的な影 |
shadow-md / shadow-lg
|
より強い影 |
shadow-none |
影なし |
5. 背景・色
クラス | 説明 |
---|---|
bg-white / bg-gray-100
|
背景色 |
bg-blue-500 |
ブルーの背景 |
text-gray-700 |
テキストの色 |
bg-opacity-50 |
背景の透明度 |
6. 表示・配置
クラス | 説明 |
---|---|
flex / grid
|
ボックス内のレイアウト指定 |
items-center / justify-center
|
中央寄せ(Flex用) |
text-center |
テキスト中央寄せ |
7. その他便利なクラス
クラス | 説明 |
---|---|
overflow-hidden |
はみ出た部分を隠す |
z-10 |
Zインデックス |
cursor-pointer |
ポインター表示に |
8.Box Decoration Break
- 概要
box-decoration-break は、改行や複数行にまたがる要素に対して、背景やボーダーがどのように表示されるか を制御します。
クラス名 | 説明 |
---|---|
box-decoration-slice |
デフォルト。要素が複数行に分割されても、背景やボーダーは1つのまとまりとして表示される(連続的に見える)。 |
box-decoration-clone |
各行に対して個別に背景やボーダーが適用され、各行ごとに装飾が複製されて表示される(行ごとに独立しているように見える)。 |
具体例その1
1.サイズ(Width / Height)~7.その他便利なクラスまでをいくつか使用した例を以下に示します。
<div class="m-4 w-80 rounded-lg border border-gray-300 bg-white p-6 text-gray-700 shadow-md">
<div class="mb-4 flex items-center">
<h2 class="text-xl font-semibold">ユーザー名</h2>
</div>
<p class="text-sm">テキスト、テキスト、テキスト。</p>
<button class="mt-4 cursor-pointer rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">詳細を見る</button>
</div>
実行結果
具体例その2
box-decoration-slice
とbox-decoration-clone
の違いが分かるような具体例を以下に示します。
box-decoration-slice
の例
<!-- box-decoration-slice: 背景がつながって見える -->
<span class="bg-gradient-to-r from-green-400 to-blue-500 box-decoration-slice px-2 text-white">
背景が<br />つながって見える
</span>
実行結果
box-decoration-clone
の例
<!-- decoration-clone: 各行ごとに独立 -->
<span class="bg-gradient-to-r from-green-400 to-blue-500 box-decoration-clone px-2 text-white">
背景が<br />行ごとに分かれる
</span>
Discussion