エラー・システム状態
エンプティステート
まだ項目がない一覧のためのプレースホルダー。空の箱のイラストと案内文、最初の一歩を促す「新規作成」ボタンを中央に置く。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="es">
<div class="es-art" aria-hidden="true">
<svg width="104" height="82" viewBox="0 0 104 82" fill="none">
<!-- 箱のふた -->
<path d="M20 30 L52 16 L84 30 L52 44 Z" fill="#fbf6ec" stroke="#c8c2b8" stroke-width="2" stroke-linejoin="round"/>
<!-- 箱の本体 -->
<path d="M20 30 L20 54 L52 68 L52 44 Z" fill="#f0ebe0" stroke="#c8c2b8" stroke-width="2" stroke-linejoin="round"/>
<path d="M84 30 L84 54 L52 68 L52 44 Z" fill="#eee7d8" stroke="#c8c2b8" stroke-width="2" stroke-linejoin="round"/>
<!-- 舞う点線 -->
<circle class="es-dot es-dot--1" cx="34" cy="14" r="2.5" fill="#7fa4ff"/>
<circle class="es-dot es-dot--2" cx="70" cy="12" r="2" fill="#c8c2b8"/>
<circle class="es-dot es-dot--3" cx="52" cy="6" r="2.2" fill="#2b50c7"/>
</svg>
</div>
<p class="es-title">まだ項目がありません</p>
<p class="es-sub">最初のアイテムを作成すると、ここに一覧で表示されます。</p>
<button class="es-btn" id="esBtn">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<line x1="7" y1="2" x2="7" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="2" y1="7" x2="12" y2="7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
新規作成
</button>
</div>
</div>