エレベーション

PreviousNext

エレベーションは、ブラウザ上で表示されるコンポーネントの高さの度合いを示します。

エレベーションは CSS の box-shadow で表現します。Tailwind の shadow-* ユーティリティを使用します。

0

Level 0 — Flat

フラット。標準的なコンテンツ領域。

1

Level 1 — Low

カード、入力フィールド。

2

Level 2 — Medium

ドロップダウン、コンテキストメニュー。

3

Level 3 — High

モーダル、ダイアログ。

4

Level 4 — Highest

フルスクリーンオーバーレイ。

レベル定義

レベルクラスbox-shadow用途
0shadow-noneなしフラットな要素
1shadow-sm0 1px 2pxカード、入力フィールド
2shadow-md0 4px 6pxドロップダウン、コンテキストメニュー
3shadow-lg0 10px 15pxモーダル、ダイアログ
4shadow-xl0 20px 25pxフルスクリーンオーバーレイ

使い方

// Level 1 — カード
<div className="rounded-xl bg-card shadow-sm" />
 
// Level 2 — ドロップダウン
<div className="rounded-lg bg-popover shadow-md" />
 
// Level 3 — モーダル
<div className="rounded-xl bg-card shadow-lg" />

ルール

  • エレベーションは UI の重なり順を視覚的に表す ために使います。単純な装飾目的では使いません。
  • 同じ画面に shadow-xl を多用しないでください。最も高いレベルのコンポーネントが際立たなくなります。
  • ダークモードでは影が見えにくくなるため、border と組み合わせて奥行きを補完します。
// ダークモード対応
<div className="rounded-xl bg-card shadow-sm ring-1 ring-border/50" />