MENU

トースト

Figma
  1. ホーム
  2. Figma
  3. トースト
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

toast：inline-grid による3カラムレイアウトの構築

ポイント: トースト全体の幅をコンテンツに合わせつつ、内部の「アイコン・テキスト・閉じるボタン」を grid プロパティで整列させています。

.toast {
  display: inline-grid;
  grid-template-columns: 27px 1fr 27px; /* アイコン(固定) / テキスト(伸縮) / ボタン(固定) */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
}

解説: display: inline-grid を使用することで、トースト全体の横幅を親要素いっぱい（block）に広げず、中身の量に応じた「最小限の幅」に留めています。また、grid-template-columns で左右のアイコン・ボタンの幅を 27px に固定し、中央のテキスト部分を 1fr（余ったスペースをすべて占有）に設定することで、テキスト量が変わってもレイアウトが崩れない構造を構築しています。

マルチクラス（success / warning / error）による効率的なスタイル管理

ポイント: 共通の構造（サイズ、余白、レイアウト）は .toast で定義し、状態ごとの色味だけを別クラスで上書きして管理しています。

/* 共通設定 */
.toast { ... }

/* 状態別の色指定のみを記述 */
.success {
  border: 2px solid var(--color-toast-success);
  background-color: var(--color-toast-bg-success);
  color: var(--color-toast-success);
}

解説: すべてのトーストで共通する「枠の丸み」や「中の並び方」を .toast というベースクラスに集約し、変化する「色（ボーダー・背景・文字色）」だけを .success などのサブクラスに切り分けています。これにより、HTML側で <p class="toast success"> と2つのクラスを併記するだけで、コードの重複を避けつつバリエーションを増やすことができます。

.toast span：余白管理による可読性の向上

ポイント: テキストと「閉じるボタン」の距離を適切に保つため、span 要素に対して個別の余白を設定しています。

.toast span {
  display: inline-block;
  margin: 0 32px 0 8px; /* 右側に大きな余白（32px）を確保 */
}

解説: トースト通知において、メッセージと「閉じるボタン」が近すぎると、誤操作を招いたり視認性が悪くなったりします。ここでは span に display: inline-block を適用することで、インライン要素では不安定な左右の margin を確実に制御できるようにしています。特に右側に 32px という広めの余白を取ることで、デザイン上の「抜け感」を作り、ユーザーが瞬時にメッセージを判別できるようにしています。

Figma
目次