レスポンシブブレークポイント状態（バリアント）間隔（スペーシング）サイズディスプレイフレックスボックス配置グリッド位置タイポグラフィテキスト配置と装飾色ボーダーエフェクトトランジションとアニメーション変形オーバーフローとその他カラーパレット
#レスポンシブブレークポイント
| クラス | CSS | 説明 | |
|---|---|---|---|
sm: | @media (min-width: 640px) | 小さい画面以上 | |
md: | @media (min-width: 768px) | 中くらいの画面以上 | |
lg: | @media (min-width: 1024px) | 大きい画面以上 | |
xl: | @media (min-width: 1280px) | 特大画面以上 | |
2xl: | @media (min-width: 1536px) | 超特大画面以上 |
#状態（バリアント）
| クラス | CSS | 説明 | |
|---|---|---|---|
hover: | :hover | マウスオーバー時 | |
focus: | :focus | フォーカス時 | |
active: | :active | クリック/タップ中 | |
disabled: | :disabled | 無効時 | |
first: | :first-child | 最初の子要素 | |
last: | :last-child | 最後の子要素 | |
odd: | :nth-child(odd) | 奇数番目の子要素 | |
even: | :nth-child(even) | 偶数番目の子要素 | |
group-hover: | .group:hover & | 親グループホバー時 | |
dark: | @media (prefers-color-scheme: dark) | ダークモード時 |
#間隔（スペーシング）
| クラス | CSS | 説明 | |
|---|---|---|---|
p-{size} | padding | 全体のパディング | |
px-{size} | padding-left/right | 左右のパディング | |
py-{size} | padding-top/bottom | 上下のパディング | |
pt/pr/pb/pl-{size} | padding-top/right/bottom/left | 個別方向のパディング | |
m-{size} | margin | 全体のマージン | |
mx-{size} | margin-left/right | 左右のマージン | |
my-{size} | margin-top/bottom | 上下のマージン | |
mt/mr/mb/ml-{size} | margin-top/right/bottom/left | 個別方向のマージン | |
mx-auto | margin: 0 auto | 水平中央揃え | |
gap-{size} | gap | Flex/Gridの間隔 | |
gap-x-{size} | column-gap | 横方向の間隔 | |
gap-y-{size} | row-gap | 縦方向の間隔 | |
space-x-{size} | > * + * { margin-left } | 子要素の横方向の間隔 | |
space-y-{size} | > * + * { margin-top } | 子要素の縦方向の間隔 |
#サイズ
| クラス | CSS | 説明 | |
|---|---|---|---|
w-{size} | width | 幅 | |
w-full | width: 100% | 全幅 | |
w-screen | width: 100vw | 画面幅 | |
w-auto | width: auto | 自動幅 | |
w-fit | width: fit-content | コンテンツに合わせる | |
min-w-0 | min-width: 0 | 最小幅0 | |
min-w-full | min-width: 100% | 最小幅100% | |
max-w-{size} | max-width | 最大幅 | |
max-w-screen-{bp} | max-width: breakpoint | ブレークポイントの最大幅 | |
h-{size} | height | 高さ | |
h-full | height: 100% | 全高 | |
h-screen | height: 100vh | 画面高さ | |
min-h-screen | min-height: 100vh | 最小画面高さ | |
max-h-{size} | max-height | 最大高さ | |
size-{size} | width + height | 幅と高さを同時に設定 |
#ディスプレイ
| クラス | CSS | 説明 | |
|---|---|---|---|
block | display: block | ブロック要素 | |
inline-block | display: inline-block | インラインブロック | |
inline | display: inline | インライン要素 | |
flex | display: flex | Flexコンテナ | |
inline-flex | display: inline-flex | インラインFlex | |
grid | display: grid | Gridコンテナ | |
inline-grid | display: inline-grid | インラインGrid | |
hidden | display: none | 非表示 | |
contents | display: contents | コンテンツのみ |
#フレックスボックス
| クラス | CSS | 説明 | |
|---|---|---|---|
flex-row | flex-direction: row | 横方向 | |
flex-col | flex-direction: column | 縦方向 | |
flex-row-reverse | flex-direction: row-reverse | 横方向逆順 | |
flex-col-reverse | flex-direction: column-reverse | 縦方向逆順 | |
flex-wrap | flex-wrap: wrap | 折り返し許可 | |
flex-nowrap | flex-wrap: nowrap | 折り返しなし | |
flex-1 | flex: 1 1 0% | 残りの空間を埋める | |
flex-auto | flex: 1 1 auto | 自動サイズ | |
flex-none | flex: none | 固定サイズ | |
grow | flex-grow: 1 | 拡大許可 | |
grow-0 | flex-grow: 0 | 拡大禁止 | |
shrink | flex-shrink: 1 | 縮小許可 | |
shrink-0 | flex-shrink: 0 | 縮小禁止 |
#配置
| クラス | CSS | 説明 | |
|---|---|---|---|
justify-start | justify-content: flex-start | メイン軸の開始 | |
justify-center | justify-content: center | メイン軸の中央 | |
justify-end | justify-content: flex-end | メイン軸の終端 | |
justify-between | justify-content: space-between | 両端揃え | |
justify-around | justify-content: space-around | 均等配置 | |
justify-evenly | justify-content: space-evenly | 等間隔配置 | |
items-start | align-items: flex-start | クロス軸の開始 | |
items-center | align-items: center | クロス軸の中央 | |
items-end | align-items: flex-end | クロス軸の終端 | |
items-baseline | align-items: baseline | ベースライン揃え | |
items-stretch | align-items: stretch | 引き伸ばし | |
self-auto | align-self: auto | 個別配置自動 | |
self-start | align-self: flex-start | 個別配置開始 | |
self-center | align-self: center | 個別配置中央 | |
self-end | align-self: flex-end | 個別配置終端 |
#グリッド
| クラス | CSS | 説明 | |
|---|---|---|---|
grid-cols-{n} | grid-template-columns: repeat(n, 1fr) | n列 | |
grid-rows-{n} | grid-template-rows: repeat(n, 1fr) | n行 | |
col-span-{n} | grid-column: span n | n列にまたがる | |
col-start-{n} | grid-column-start: n | n列目から開始 | |
col-end-{n} | grid-column-end: n | n列目で終了 | |
row-span-{n} | grid-row: span n | n行にまたがる | |
row-start-{n} | grid-row-start: n | n行目から開始 | |
row-end-{n} | grid-row-end: n | n行目で終了 | |
auto-cols-auto | grid-auto-columns: auto | 自動列サイズ | |
auto-cols-fr | grid-auto-columns: 1fr | 自動列1fr | |
auto-rows-auto | grid-auto-rows: auto | 自動行サイズ |
#位置
| クラス | CSS | 説明 | |
|---|---|---|---|
static | position: static | 静的位置 | |
relative | position: relative | 相対位置 | |
absolute | position: absolute | 絶対位置 | |
fixed | position: fixed | 固定位置 | |
sticky | position: sticky | スティッキー位置 | |
top-{size} | top | 上からの距離 | |
right-{size} | right | 右からの距離 | |
bottom-{size} | bottom | 下からの距離 | |
left-{size} | left | 左からの距離 | |
inset-{size} | top/right/bottom/left | 全方向の距離 | |
inset-x-{size} | left/right | 左右の距離 | |
inset-y-{size} | top/bottom | 上下の距離 | |
z-{n} | z-index | Zインデックス | |
z-auto | z-index: auto | Zインデックス自動 |
#タイポグラフィ
| クラス | CSS | 説明 | |
|---|---|---|---|
font-sans | font-family: sans-serif | サンセリフフォント | |
font-serif | font-family: serif | セリフフォント | |
font-mono | font-family: monospace | 等幅フォント | |
text-xs | font-size: 0.75rem | 極小テキスト | |
text-sm | font-size: 0.875rem | 小さいテキスト | |
text-base | font-size: 1rem | 基本テキスト | |
text-lg | font-size: 1.125rem | 大きいテキスト | |
text-xl | font-size: 1.25rem | 特大テキスト | |
text-2xl ~ 9xl | font-size: 1.5rem ~ 8rem | より大きいサイズ | |
font-thin | font-weight: 100 | 最も細い | |
font-light | font-weight: 300 | 細い | |
font-normal | font-weight: 400 | 通常 | |
font-medium | font-weight: 500 | 中太 | |
font-semibold | font-weight: 600 | セミボールド | |
font-bold | font-weight: 700 | ボールド | |
italic | font-style: italic | イタリック | |
not-italic | font-style: normal | イタリック解除 | |
leading-{size} | line-height | 行の高さ | |
tracking-{size} | letter-spacing | 文字間隔 |
#テキスト配置と装飾
| クラス | CSS | 説明 | |
|---|---|---|---|
text-left | text-align: left | 左揃え | |
text-center | text-align: center | 中央揃え | |
text-right | text-align: right | 右揃え | |
text-justify | text-align: justify | 両端揃え | |
underline | text-decoration: underline | 下線 | |
line-through | text-decoration: line-through | 取り消し線 | |
no-underline | text-decoration: none | 装飾なし | |
uppercase | text-transform: uppercase | 大文字 | |
lowercase | text-transform: lowercase | 小文字 | |
capitalize | text-transform: capitalize | 先頭大文字 | |
truncate | overflow: hidden; text-overflow: ellipsis | 省略記号で切り捨て | |
line-clamp-{n} | -webkit-line-clamp: n | n行に制限 | |
whitespace-nowrap | white-space: nowrap | 折り返しなし | |
break-words | word-wrap: break-word | 単語で改行 |
#色
| クラス | CSS | 説明 | |
|---|---|---|---|
text-{color}-{shade} | color | テキストの色 | |
bg-{color}-{shade} | background-color | 背景色 | |
bg-gradient-to-{dir} | background-image: linear-gradient | グラデーションの方向 | |
from-{color} | from color | グラデーション開始色 | |
via-{color} | via color | グラデーション中間色 | |
to-{color} | to color | グラデーション終了色 | |
text-transparent | color: transparent | 透明テキスト | |
bg-transparent | background-color: transparent | 透明背景 | |
text-current | color: currentColor | 現在の色を継承 |
#ボーダー
| クラス | CSS | 説明 | |
|---|---|---|---|
border | border-width: 1px | 1pxボーダー | |
border-{n} | border-width: npx | nピクセルボーダー | |
border-t/r/b/l-{n} | border-top/right/bottom/left-width | 方向別ボーダー | |
border-{color} | border-color | ボーダーの色 | |
border-solid | border-style: solid | 実線 | |
border-dashed | border-style: dashed | 破線 | |
border-dotted | border-style: dotted | 点線 | |
border-none | border-style: none | ボーダーなし | |
rounded | border-radius: 0.25rem | わずかに丸く | |
rounded-md | border-radius: 0.375rem | 中程度に丸く | |
rounded-lg | border-radius: 0.5rem | 大きく丸く | |
rounded-xl | border-radius: 0.75rem | 非常に丸く | |
rounded-full | border-radius: 9999px | 完全な円形 | |
rounded-none | border-radius: 0 | 角なし | |
rounded-t/r/b/l-{size} | border-radius (corners) | 特定のコーナー |
#エフェクト
| クラス | CSS | 説明 | |
|---|---|---|---|
shadow-sm | box-shadow: small | 小さい影 | |
shadow | box-shadow: default | 標準の影 | |
shadow-md | box-shadow: medium | 中程度の影 | |
shadow-lg | box-shadow: large | 大きい影 | |
shadow-xl | box-shadow: extra large | 非常に大きい影 | |
shadow-2xl | box-shadow: 2x large | 最大の影 | |
shadow-inner | box-shadow: inset | 内側の影 | |
shadow-none | box-shadow: none | 影なし | |
opacity-{n} | opacity: n% | 不透明度（0-100） | |
blur | filter: blur(8px) | ぼかし | |
blur-{size} | filter: blur(size) | ぼかしの程度 | |
brightness-{n} | filter: brightness(n%) | 明るさ | |
contrast-{n} | filter: contrast(n%) | コントラスト | |
grayscale | filter: grayscale(100%) | グレースケール | |
invert | filter: invert(100%) | 反転 |
#トランジションとアニメーション
| クラス | CSS | 説明 | |
|---|---|---|---|
transition | transition-property: all | 標準トランジション | |
transition-all | transition-property: all | すべてのトランジション | |
transition-colors | transition-property: colors | 色のトランジション | |
transition-opacity | transition-property: opacity | 不透明度のトランジション | |
transition-transform | transition-property: transform | 変形のトランジション | |
duration-{ms} | transition-duration: ms | 持続時間 | |
ease-linear | transition-timing: linear | リニアイージング | |
ease-in | transition-timing: ease-in | イーズイン | |
ease-out | transition-timing: ease-out | イーズアウト | |
ease-in-out | transition-timing: ease-in-out | イーズインアウト | |
delay-{ms} | transition-delay: ms | 遅延 | |
animate-spin | animation: spin | 回転アニメーション | |
animate-ping | animation: ping | ピンアニメーション | |
animate-pulse | animation: pulse | パルスアニメーション | |
animate-bounce | animation: bounce | バウンスアニメーション |
#変形
| クラス | CSS | 説明 | |
|---|---|---|---|
scale-{n} | transform: scale(n) | スケール | |
scale-x-{n} | transform: scaleX(n) | 横方向スケール | |
scale-y-{n} | transform: scaleY(n) | 縦方向スケール | |
rotate-{deg} | transform: rotate(deg) | 回転 | |
translate-x-{size} | transform: translateX | 横方向移動 | |
translate-y-{size} | transform: translateY | 縦方向移動 | |
skew-x-{deg} | transform: skewX(deg) | 横方向傾斜 | |
skew-y-{deg} | transform: skewY(deg) | 縦方向傾斜 | |
origin-center | transform-origin: center | 変形基準点 中央 | |
origin-top | transform-origin: top | 変形基準点 上 | |
origin-bottom | transform-origin: bottom | 変形基準点 下 |
#オーバーフローとその他
| クラス | CSS | 説明 | |
|---|---|---|---|
overflow-auto | overflow: auto | 必要時スクロール | |
overflow-hidden | overflow: hidden | はみ出し非表示 | |
overflow-scroll | overflow: scroll | 常にスクロール | |
overflow-visible | overflow: visible | はみ出し表示 | |
overflow-x-{value} | overflow-x | 横方向オーバーフロー | |
overflow-y-{value} | overflow-y | 縦方向オーバーフロー | |
cursor-pointer | cursor: pointer | ポインターカーソル | |
cursor-not-allowed | cursor: not-allowed | 禁止カーソル | |
pointer-events-none | pointer-events: none | クリック無効 | |
select-none | user-select: none | 選択不可 | |
select-text | user-select: text | テキスト選択可 | |
select-all | user-select: all | クリックで全選択 | |
sr-only | screen reader only | スクリーンリーダー専用 |
#カラーパレット
slate
gray
zinc
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
💡 Click a color block to copy the class name (e.g., blue-500)
Usage: text-{color}-{shade}, bg-{color}-{shade}, border-{color}-{shade}
#サイズスケール参照
| クラス | 値 | クラス | 値 |
|---|---|---|---|
| 0 | 0px | px | 1px |
| 0.5 | 0.125rem (2px) | 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) | 3 | 0.75rem (12px) |
| 4 | 1rem (16px) | 5 | 1.25rem (20px) |
| 6 | 1.5rem (24px) | 8 | 2rem (32px) |
| 10 | 2.5rem (40px) | 12 | 3rem (48px) |
| 16 | 4rem (64px) | 20 | 5rem (80px) |
| 24 | 6rem (96px) | 32 | 8rem (128px) |
#よくある質問 (FAQ)
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.