コンポーネント
スライド用
1920×1080 のスライドに置く大きさで書かれた部品です。プレビューはスライド幅から縮小して表示しています。色は色名(rock-100 など)で書かれているため、dark に切り替えても変わるのは台紙だけです。
元ファイルcomponents/card.htmlcomponents/key-message.htmlcomponents/badge.htmlcomponents/table.htmlcomponents/arrow-row.htmlcomponents/footer.html
card
components/card.html白+枠のカード / グレーのカード
<div style="background:var(--white);border:var(--border) solid var(--rock-200);border-radius:var(--radius-card);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-s);font-family:var(--font-sans);">
<div style="font-size:var(--fs-card);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">カード見出し</div>
<div style="font-size:var(--fs-body);line-height:var(--lh-body);color:var(--rock-800);">本文</div>
</div>
<div style="background:var(--rock-100);border-radius:var(--radius-card);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-s);font-family:var(--font-sans);">
<div style="font-size:var(--fs-card);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">カード見出し</div>
<div style="font-size:var(--fs-body);line-height:var(--lh-body);color:var(--rock-800);">本文</div>
</div>key-message
components/key-message.htmlidea-50 の核メッセージ
<div style="background:var(--idea-50);border:var(--border) solid var(--idea-300);border-radius:var(--radius-card);padding:var(--space-3xl);font-size:var(--fs-key);font-weight:var(--fw-bold);color:var(--idea-900);line-height:var(--lh-body);font-family:var(--font-sans);">核となる1文</div>badge
components/badge.htmlピルバッジ・番号バッジ
<span style="display:inline-block;background:var(--idea-100);border:var(--border) solid transparent;color:var(--idea-900);font-size:var(--fs-note);font-weight:var(--fw-bold);line-height:var(--lh-table);padding:var(--space-2xs) var(--space-m);border-radius:var(--radius-pill);white-space:nowrap;font-family:var(--font-sans);">ラベル</span>
<span style="display:inline-block;background:var(--white);border:var(--border) solid var(--idea-600);color:var(--idea-800);font-size:var(--fs-note);font-weight:var(--fw-bold);line-height:var(--lh-table);padding:var(--space-2xs) var(--space-m);border-radius:var(--radius-pill);white-space:nowrap;font-family:var(--font-sans);">注意</span>
<span style="width:var(--badge-num);height:var(--badge-num);border-radius:var(--radius-pill);background:var(--idea-100);color:var(--idea-800);font-size:var(--fs-body);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-sans);">1</span>
<span style="min-width:var(--badge-num);height:var(--badge-num);padding:0 var(--space-s);box-sizing:border-box;white-space:nowrap;border-radius:var(--radius-pill);background:var(--idea-100);color:var(--idea-800);font-size:var(--fs-body);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-sans);">1・2</span>table
components/table.html段階・条件などの表
<div style="background:var(--white);border:var(--border) solid var(--rock-200);border-radius:var(--radius-card);overflow:hidden;display:grid;grid-template-columns:var(--table-label-col) minmax(0,1fr) minmax(0,1fr);font-size:var(--fs-table);line-height:var(--lh-table);color:var(--rock-800);font-family:var(--font-sans);">
<div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">列1</div>
<div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">列2</div>
<div style="background:var(--rock-100);font-weight:var(--fw-bold);color:var(--rock-900);padding:var(--space-s) var(--space-m);">列3</div>
<div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);">内容</div>
<div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);">内容</div>
<div style="padding:var(--space-s) var(--space-m);border-top:var(--border) solid var(--rock-200);">内容</div>
</div>arrow-row
components/arrow-row.html課題 → 取り組み の対比行
<div style="display:grid;grid-template-columns:minmax(0,1fr) var(--arrow-col) minmax(0,1.3fr);font-size:var(--fs-body);line-height:var(--lh-table);font-family:var(--font-sans);">
<div style="background:var(--rock-100);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--rock-900);"><b>課題</b><br>説明</div>
<div style="display:flex;align-items:center;justify-content:center;color:var(--idea-300);font-size:var(--fs-arrow);font-weight:var(--fw-bold);">→</div>
<div style="background:var(--idea-50);border:var(--border) solid var(--idea-300);border-radius:var(--radius-card);padding:var(--space-m) var(--space-l);color:var(--idea-900);display:flex;align-items:center;">取り組み</div>
</div>footer
components/footer.html社名とページ番号(親要素に position:relative が必要)
<div style="position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:var(--footer-bottom);display:flex;justify-content:space-between;font-size:var(--fs-footer);color:var(--rock-500);font-family:var(--font-sans);"><span>株式会社ATOYOLO</span><span>2</span></div>