3種類のアラートパターン

アラートは、ユーザーに重要な情報を伝えるために欠かせないUIコンポーネントです。このレッスンでは、シンプルなものから機能的なものまで、3つのアラートパターンを作成します。

シンプルなカラーアラート

最もベーシックなアラートデザインです。成功、エラー、警告、情報の4種類を色で区別します。Bootstrapと同じクラス名を使用しているため、直感的に利用できます。

HTML

<div class="alert alert-success">
    シンプルなアラートデザイン
</div>
<div class="alert alert-error">
    シンプルなアラートデザイン
</div>
<div class="alert alert-warning">
    シンプルなアラートデザイン
</div>
<div class="alert alert-info">
    シンプルなアラートデザイン
</div>

CSS

.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: white;
}

.alert-success {
    background-color: #7CC6A5;
}

.alert-error {
    background-color: #F09FA1;
}

.alert-warning {
    background-color: #f4d275;
}

.alert-info {
    background-color: #AACDED;
}

このアラートの特徴

シンプルな構造 HTML要素とCSSクラスだけで構成され、JavaScriptは不要
色で区別 成功(緑)、エラー(赤)、警告(黄)、情報(青)の4種類を色分け
Bootstrapライク .alert-successなどの親しみやすいクラス名を採用
レスポンシブ対応 パディングとマージンで適切な余白を確保

コードのポイント

基本スタイルの設計

.alert {
    padding: 1rem;              /* 内側の余白 */
    margin-bottom: 1rem;        /* 下方向の外側余白 */
    border: 1px solid transparent;  /* 透明なボーダー */
    border-radius: 0.25rem;     /* 角を少し丸く */
    color: white;               /* 白文字 */
}

.alertクラスで共通のスタイルを定義し、コードの重複を防ぐ
padding: 1remで内側に余白を作り、テキストが窮屈にならないようにする
border-radius: 0.25remで角を少し丸くし、柔らかい印象に

モディファイアクラスでの色分け

.alert-success {
    background-color: #7CC6A5;  /* 成功は緑系 */
}

.alert-error {
    background-color: #F09FA1;  /* エラーは赤系 */
}

.alert-successなどのモディファイアクラスで色を変更する設計
各状態に適した色を使い、視覚的に意味を伝える
柔らかいパステルカラーを使用し、目に優しいデザインに

アイコン付きアラート（左ボーダー強調）

アイコンを追加し、左側にボーダーを配置することで、より情報を伝えやすいデザインにしています。閉じるボタンも付いており、実用性が高いパターンです。

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

HTML

<div class="alert alert-success">
    <i class="fas fa-check-circle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>
<div class="alert alert-error">
    <i class="fas fa-times-circle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>
<div class="alert alert-warning">
    <i class="fas fa-exclamation-triangle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>
<div class="alert alert-info">
    <i class="fas fa-exclamation-circle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>

CSS

.alert {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 5px #999;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #333;
    gap: 0.5rem;
    line-height: 1.5;
}

.alert i {
    font-size: 1.3rem;
}

.alert>a {
    cursor: pointer;
    color: #D4D4D4;
    margin-left: auto;
}

.hide-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 1s;
}

.alert-success {
    border-left: 5px solid #5CBD9D;
}

.alert-error {
    border-left: 5px solid #E74C3C;
}

.alert-warning {
    border-left: 5px solid #F29C33;
}

.alert-info {
    border-left: 5px solid #3998DB;
}

.fa-check-circle {
    color: #5CBD9D;
}

.fa-times-circle {
    color: #E74C3C;
}

.fa-exclamation-triangle {
    color: #F29C33;
}

.fa-exclamation-circle {
    color: #3998DB;
}

このアラートの特徴

アイコンで視認性向上 FontAwesomeアイコンで一目で状態を判別可能
左ボーダー強調 左側の太いボーダーで視覚的なアクセントを追加
閉じるボタン付き ユーザーが不要な通知を消せる実用的な機能
フェードアウト 閉じる際の滑らかなアニメーション効果

コードのポイント

Flexboxレイアウトの活用

.alert {
    display: flex;          /* フレックスボックスレイアウト */
    align-items: center;    /* 縦方向中央揃え */
    gap: 0.5rem;           /* 要素間の間隔 */
}

.alert>a {
    margin-left: auto;      /* 閉じるボタンを右端に配置 */
}

display: flexでアイコン、テキスト、閉じるボタンを横並びに配置
align-items: centerで縦方向の中央揃えを実現
margin-left: autoで閉じるボタンを右端に自動配置

左ボーダーでの強調表現

.alert-success {
    border-left: 5px solid #5CBD9D;  /* 左に太いボーダー */
}

border-leftで左側だけに太いボーダーを配置
状態に応じた色を使い、視覚的な区別を強化

JavaScriptによる閉じる機能

<a onclick="this.parentNode.classList.add('hide-box');">
    <i class="fa fa-times"></i>
</a>

.hide-box {
    opacity: 0;             /* 透明に */
    visibility: hidden;     /* 非表示に */
    transition: opacity 0.5s, visibility 1s;  /* アニメーション */
}

クリック時に.hide-boxクラスを追加し、フェードアウト
opacityとvisibilityを組み合わせて滑らかに消える

背景塗りつぶし型アイコンアラート

背景全体を塗りつぶし、白文字で表示する、より目立つデザインです。重要度の高いメッセージに適しています。

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

HTML

<div class="bx-alert bx-alert-success">
    <i class="fas fa-check-circle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>
<div class="bx-alert bx-alert-error">
    <i class="fas fa-times-circle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>
<div class="bx-alert bx-alert-warning">
    <i class="fas fa-exclamation-triangle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>
<div class="bx-alert bx-alert-info">
    <i class="fas fa-exclamation-circle"></i>
    <p>CSSアイコン付きアラート</p>
    <a onclick="this.parentNode.classList.add('hide-box');"><i class="fa fa-times"></i></a>
</div>

CSS

.bx-alert {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 5px #999;
    color: #fff;
    gap: 0.5rem;
    line-height: 1.5;
}

.bx-alert i {
    color: #fff;
    font-size: 1.5rem;
}

.bx-alert>a {
    cursor: pointer;
    margin-left: auto;
}

.hide-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 1s;
}

.bx-alert-success {
    background-color: #5CBD9D;
}

.bx-alert-error {
    background-color: #E74C3C;
}

.bx-alert-warning {
    background-color: #F29C33;
}

.bx-alert-info {
    background-color: #3998DB;
}

.fa-check-circle {
    color: #5CBD9D;
}

.fa-times-circle {
    color: #E74C3C;
}

.fa-exclamation-triangle {
    color: #F29C33;
}

.fa-exclamation-circle {
    color: #3998DB;
}

このアラートの特徴

高い視認性 背景全体を塗りつぶし、白文字で強調表示
重要度の表現 より目立つデザインで、重要なメッセージに最適
統一された配色 アイコンも白色にして全体の調和を保つ
影の追加 box-shadowで奥行きを演出し、存在感を高める

コードのポイント

背景色と文字色の対比

.bx-alert {
    color: #fff;            /* 白文字 */
}

.bx-alert-success {
    background-color: #5CBD9D;  /* 背景を塗りつぶし */
}

背景色を濃くし、白文字にすることで高いコントラストを実現
視認性が向上し、重要なメッセージを確実に伝える

アイコンの統一デザイン

.bx-alert i {
    color: #fff;        /* アイコンも白色に */
    font-size: 1.5rem;  /* 少し大きめに */
}

すべてのアイコンを白色に統一し、デザインの一貫性を保つ
サイズを1.5remに設定し、視認性を向上

まとめ

アラート作成のポイント

状態を色で表現 成功、エラー、警告、情報の4種類を色で直感的に区別
アイコンで視認性向上 FontAwesomeアイコンで一目で状態を判別可能に
閉じる機能の実装 ユーザーが不要な通知を消せる実用的な機能を追加
デザインの使い分け シンプル型、左ボーダー型、背景塗りつぶし型を用途に応じて選択
CSSクラスの命名 Bootstrapライクな親しみやすいクラス名で開発効率を向上

アラートはユーザーとのコミュニケーションの要です。適切なデザインと機能を選び、重要な情報を確実に伝えましょう。

シンプルなカラーアラート

このアラートの特徴

コードのポイント

基本スタイルの設計

モディファイアクラスでの色分け

アイコン付きアラート（左ボーダー強調）

このアラートの特徴

コードのポイント

Flexboxレイアウトの活用

左ボーダーでの強調表現

JavaScriptによる閉じる機能

背景塗りつぶし型アイコンアラート

このアラートの特徴

コードのポイント

背景色と文字色の対比

アイコンの統一デザイン

まとめ

学習チェック