どのように作成するか：タグ

CSSでタグのスタイル設定の使用方法を学ぶ。

成功 情報 警告 危険 その他

自分で試してみる

タグのスタイル設定の設定方法

第1歩 - HTMLの追加：

<span class="label success">Success</span>
<span class="label info">Info</span>
<span class="label warning">Warning</span>
<span class="label danger">Danger</span>
<span class="label other">Other</span>

第2歩 - CSSの追加：

.label {
  color: white;
  padding: 8px;
}
.success {background-color: #04AA6D;} /* 緑色 */
.info {background-color: #2196F3;} /* 青色 */
.warning {background-color: #ff9800;} /* 橙色 */
.danger {background-color: #f44336;} /* 紅色 */
.other {background-color: #e7e7e7; color: black;} /* 灰色 */

自分で試してみる