CSS ユーティリティ

Kaze は、素早い UI 開発のための包括的な CSS ユーティリティクラスを提供します。 これらの低レベルなユーティリティクラスを使えば、カスタム CSS を書かずに自由なデザインを構築できます。 ユーティリティは自由に組み合わせることができ、Kaze コンポーネントと併用できるように設計されています。

ディスプレイ

要素の表示方法を制御します。これらのクラスは CSS の display プロパティに直接対応しています。

クラス説明
.flexdisplay: flex を設定
.inline-flexdisplay: inline-flex を設定
.griddisplay: grid を設定
.blockdisplay: block を設定
.inline-blockdisplay: inline-block を設定
.hiddendisplay: none を設定
.flex
.inline-flex
.grid
.block
.inline-block

フレックスボックス

フレックスコンテナ内の方向、折り返し、配置、主軸の配置、ギャップを制御するための フレックスボックスユーティリティです。

方向

クラス説明
.flex-rowflex-direction: row を設定（デフォルト）
.flex-colflex-direction: column を設定

.flex .flex-row

1
2
3

.flex .flex-col

1
2
3

折り返し

クラス説明
.flex-wrapflex-wrap: wrap を設定
.flex-nowrapflex-wrap: nowrap を設定

配置

クラス説明
.items-startalign-items: flex-start を設定
.items-centeralign-items: center を設定
.items-endalign-items: flex-end を設定
.items-stretchalign-items: stretch を設定
小
大
中

コンテナに .flex .items-center を適用

主軸の配置

クラス説明
.justify-startjustify-content: flex-start を設定
.justify-centerjustify-content: center を設定
.justify-endjustify-content: flex-end を設定
.justify-betweenjustify-content: space-between を設定
.justify-aroundjustify-content: space-around を設定

.flex .justify-between

A
B
C

ギャップ

ギャップユーティリティは、フレックスまたはグリッドの子要素間のスペースを制御します。 値は Kaze のスペーシングスケールに従います。

クラス説明
.gap-1gap: 4px を設定（0.25rem）
.gap-2gap: 8px を設定（0.5rem）
.gap-3gap: 12px を設定（0.75rem）
.gap-4gap: 16px を設定（1rem）
.gap-5gap: 20px を設定（1.25rem）
.gap-6gap: 24px を設定（1.5rem）
.gap-7gap: 28px を設定（1.75rem）
.gap-8gap: 32px を設定（2rem）

.flex .gap-4（16px のギャップ）

Item
Item
Item

グリッド

カラムユーティリティを使って素早くグリッドレイアウトを作成できます。 ギャップユーティリティと組み合わせることで、グリッドを細かく制御できます。

カラム数

クラス説明
.grid-cols-1grid-template-columns: repeat(1, 1fr) を設定
.grid-cols-2grid-template-columns: repeat(2, 1fr) を設定
.grid-cols-3grid-template-columns: repeat(3, 1fr) を設定
.grid-cols-4grid-template-columns: repeat(4, 1fr) を設定

.grid .grid-cols-3 .gap-4

1
2
3
4
5
6

スペーシング

一貫したスペーシングスケールでパディングとマージンを制御します。 値は 0 から 8 まであり、1 ステップあたり 4px（0.25rem）です。

パディング

クラス説明
.p-0全方向に padding: 0px を設定
.p-1全方向に padding: 4px を設定
.p-2全方向に padding: 8px を設定
.p-3全方向に padding: 12px を設定
.p-4全方向に padding: 16px を設定
.p-5全方向に padding: 20px を設定
.p-6全方向に padding: 24px を設定
.p-7全方向に padding: 28px を設定
.p-8全方向に padding: 32px を設定
.px-{n}水平方向のパディング（padding-left と padding-right）を設定。0 から 8 の値に対応。
.py-{n}垂直方向のパディング（padding-top と padding-bottom）を設定。0 から 8 の値に対応。
.p-2
.p-4
.p-6
.p-8

マージン

クラス説明
.m-0全方向に margin: 0px を設定
.m-1全方向に margin: 4px を設定
.m-2全方向に margin: 8px を設定
.m-3全方向に margin: 12px を設定
.m-4全方向に margin: 16px を設定
.m-5全方向に margin: 20px を設定
.m-6全方向に margin: 24px を設定
.m-7全方向に margin: 28px を設定
.m-8全方向に margin: 32px を設定
.mx-automargin-left: auto; margin-right: auto を設定し、水平中央揃えにする

.mx-auto（水平中央揃え）

.mx-auto

タイポグラフィ

フォントサイズ、ウェイト、テキスト揃え、カラー、テキストの省略表示を タイポグラフィユーティリティクラスで制御します。

フォントサイズ

クラス説明
.text-xsfont-size: 0.75rem（12px）を設定
.text-smfont-size: 0.875rem（14px）を設定
.text-basefont-size: 1rem（16px）を設定
.text-lgfont-size: 1.125rem（18px）を設定
.text-xlfont-size: 1.25rem（20px）を設定
.text-2xlfont-size: 1.5rem（24px）を設定
.text-3xlfont-size: 1.875rem（30px）を設定
.text-4xlfont-size: 2.25rem（36px）を設定
.text-xs (12px).text-sm (14px).text-base (16px).text-lg (18px).text-xl (20px).text-2xl (24px).text-3xl (30px).text-4xl (36px)

フォントウェイト

クラス説明
.font-normalfont-weight: 400 を設定
.font-mediumfont-weight: 500 を設定
.font-semiboldfont-weight: 600 を設定
.font-boldfont-weight: 700 を設定
.font-normal (400).font-medium (500).font-semibold (600).font-bold (700)

配置

クラス説明
.text-lefttext-align: left を設定
.text-centertext-align: center を設定
.text-righttext-align: right を設定
.text-left
.text-center
.text-right

テキストカラー

クラス説明
.text-primaryKaze テーマのプライマリテキストカラーを設定
.text-secondaryセカンダリ（控えめ）のテキストカラーを設定
.text-muted低強調のミュートテキストカラーを設定
.text-positiveポジティブ／成功のテキストカラー（緑）を設定
.text-negativeネガティブ／エラーのテキストカラー（赤）を設定
.text-warning警告のテキストカラー（アンバー／イエロー）を設定
.text-info情報のテキストカラー（ブルー）を設定

省略表示

クラス説明
.truncateはみ出したテキストを省略記号で省略します。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap を設定。
この文章はコンテナの幅を超えると省略記号で省略されます...

max-width を設定したコンテナに .truncate を適用

ボーダー

角丸とボーダーの配置を制御して、要素の形状や視覚的な区切りを設定します。

角丸

クラス説明
.rounded-smborder-radius: 2px を設定
.rounded-mdborder-radius: 6px を設定
.rounded-lgborder-radius: 8px を設定
.rounded-xlborder-radius: 12px を設定
.rounded-fullborder-radius: 9999px を設定（ピル型）
.rounded-sm
.rounded-md
.rounded-lg
.rounded-xl
.rounded-full

ボーダー線

クラス説明
.borderテーマのボーダーカラーで全辺に 1px のソリッドボーダーを追加
.border-t上辺のみに 1px のソリッドボーダーを追加
.border-b下辺のみに 1px のソリッドボーダーを追加
.border
.border-t
.border-b

シャドウ

box-shadow ユーティリティで要素に奥行きと高さを与えます。 シャドウは極小から特大までスケールします。

クラス説明
.shadow-xs極小のシャドウでさりげない浮き上がりを表現
.shadow-sm小さいシャドウで軽い浮き上がりを表現
.shadow-md中程度のシャドウで標準的な浮き上がりを表現
.shadow-lg大きいシャドウで目立つ浮き上がりを表現
.shadow-xl特大のシャドウで最大の浮き上がりを表現
.shadow-xs
.shadow-sm
.shadow-md
.shadow-lg
.shadow-xl

幅

割合、キーワード、最大幅のユーティリティクラスで要素の幅を設定します。

幅

クラス説明
.w-fullwidth: 100% を設定
.w-autowidth: auto を設定
.w-1/2width: 50% を設定
.w-1/3width: 33.333% を設定
.w-2/3width: 66.667% を設定
.w-1/4width: 25% を設定
.w-3/4width: 75% を設定
.w-full
.w-3/4
.w-2/3
.w-1/2
.w-1/3
.w-1/4

最大幅

クラス説明
.max-w-smmax-width: 384px を設定
.max-w-mdmax-width: 448px を設定
.max-w-lgmax-width: 512px を設定
.max-w-xlmax-width: 576px を設定

アニメーション

要素にあらかじめ用意された CSS アニメーションを追加します。 すべてのアニメーションユーティリティはユーザーの prefers-reduced-motion 設定を尊重し、モーション軽減が要求された場合は自動的に無効になります。

クラス説明
.animate-fade-in透明から不透明にフェードインさせる
.animate-fade-out不透明から透明にフェードアウトさせる
.animate-slide-up下から上にスライドして表示する
.animate-slide-down上から下にスライドして表示する
.animate-scale-in小さいサイズから拡大して表示する
.animate-scale-out現在のサイズから縮小する
.animate-spin360 度の連続回転アニメーション（ローディングインジケーターに最適）
.animate-pulse不透明度が連続的に変化するパルスアニメーション

アクセシビリティ

/* Kaze のアニメーションは prefers-reduced-motion を自動で尊重します */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-out,
  .animate-slide-up,
  .animate-slide-down,
  .animate-scale-in,
  .animate-scale-out,
  .animate-spin,
  .animate-pulse {
    animation: none;
    transition: none;
  }
}

使用例

<div class="animate-fade-in">
  このコンテンツはマウント時にフェードインします。
</div>

<button class="animate-pulse">
  読み込み中...
</button>

<svg class="animate-spin" ...>
  <!-- スピナーアイコン -->
</svg>

レスポンシブ

Kaze はモバイルファーストのレスポンシブプレフィックスシステムを採用しています。 任意のユーティリティクラスにブレークポイントプレフィックスを付けると、 そのブレークポイント以上の画面幅でのみ適用されます。 プレフィックスなしのスタイルはすべての画面サイズに適用されます。

ブレークポイント

プレフィックス最小幅説明
sm:640px小画面以上（横向きスマートフォン）
md:768px中画面以上（タブレット）
lg:1024px大画面以上（デスクトップ）
xl:1280px特大画面以上（ワイドデスクトップ）

使い方

任意のユーティリティクラスの前にブレークポイント名とコロンを付けます。 そのユーティリティは、指定したブレークポイントの最小幅以上でのみ有効になります。

<!-- モバイルでは縦積み、中画面で 3 カラム、大画面で非表示 -->
<div class="flex flex-col md:grid md:grid-cols-3 lg:hidden">
  ...
</div>

<!-- モバイルで全幅、小画面で半分、中画面で 3 分の 1 -->
<div class="w-full sm:w-1/2 md:w-1/3">
  ...
</div>

<!-- モバイルで縦方向、小画面で横方向のレイアウト -->
<nav class="flex flex-col sm:flex-row gap-2 sm:gap-4">
  ...
</nav>

よく使うパターン

クラス説明
.md:grid-cols-3中画面以上で 3 カラムのグリッドレイアウトを適用
.lg:hidden大画面以上で要素を非表示にする
.sm:flex-col小画面以上でフレックス方向を縦に切り替え
.xl:gap-8特大画面でより大きなギャップを適用
.md:text-lg中画面以上でフォントサイズを拡大
.sm:px-4小画面以上で水平パディングを追加

レスポンシブカードグリッドの例

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="p-4 rounded-lg shadow-sm">Card 1</div>
  <div class="p-4 rounded-lg shadow-sm">Card 2</div>
  <div class="p-4 rounded-lg shadow-sm">Card 3</div>
  <div class="p-4 rounded-lg shadow-sm">Card 4</div>
</div>