🧩 Design Parts

コンポーネント一覧

このテンプレートで使えるパーツをまとめました。クラス名をコピーして、そのままページ制作にお使いください。

Colors

カラーパレット

Pink / Main

#FFAACC

Mint / Sub

#99EEDD

Peach

#FFCCAA

Sky

#99CCFF

Yellow / Accent

#FFDD44

Ink / Text

#4A4458

色は assets/css/style.css の :root にある CSS変数で管理されています。イエローは彩度が高いため、背景ではなくバッジ等の差し色として使うのがおすすめです。

Typography

タイポグラフィ

見出し1 Heading 1

見出し2 Heading 2

見出し3 Heading 3

見出し4 Heading 4

見出し5 Heading 5
見出し6 Heading 6

リード文（lead）: 大きめに見せたい導入文に使用します。

本文テキストです。フォントは Quicksand を使用し、丸みのある柔らかい印象にしています。

補足テキスト（text-muted）です。

これはリンクのサンプルです →

Buttons

ボタン

Badges

バッジ

ピル型バッジ

New Success Info Beta Hot

アイコンバッジ

Alerts

アラート

お知らせ: これは pink のアラートです。
成功: これは mint のアラートです。
情報: これは sky のアラートです。
注意: これは peach のアラートです。
警告: これは yellow のアラートです。
Cards

カード

pastel-card

アイコン付きの基本カードです。icon-badge と組み合わせて使います。

Simple
シンプルカード

アイコンなしのテキスト中心のカードです。

アクション付きカード

ボタンを含めたカードのサンプルです。

詳しく見る
Forms

フォーム