Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【アラート編】

おはようございます！社員Aです👩

今年始めての投稿になります🌟

年末年始は南半球で満喫していました！広大な牧場で牛に触れ、馬に触れ、羊に触れ…。１年分パワーチャージ出来たのでブログも仕事も頑張っていきたいと思います！

さて、連載しております「Bootstrapシリーズ」ですが、第3回目になりました！

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第3回目の今回は「アラート編」！Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか？

Bootstrap4のアラート

Bootstrapの「アラート」を使うと、あらかじめ定義された警告メッセージを簡単に作成できます。

用途に合わせて差別化することで、ユーザビリティも向上します。

アラートのルール

アラートのルールを見てみましょう。

1. 要素に、「alert」と各種スタイルのクラスを付与します。
2. 「alert-xx」のxx部分をそれぞれprimary, secondary, success, info, warning, danger, light, darkから選択します。

基本のアラート

まずは基本のアラートから説明していきます。

要素にクラス「alert」と「alert-xx」を付与すると、アラートが適用されます。

表示

ソース

<div class="alert alert-primary"><strong>アラート</strong>Primary：<code>.alert-primary</code> <span class="text-black-50"></span></div>
<div class="alert alert-secondary"><strong>アラート</strong> Secondary：<code>.alert-secondary</code> <span class="text-black-50"></span></div>
<div class="alert alert-success"><strong>アラート</strong> Success：<code>.alert-success</code></div>
<div class="alert alert-info"><strong>アラート</strong>  Info：<code>.alert-info</code></div>
<div class="alert alert-warning"><strong>アラート</strong> Warning：<code>.alert-warning</code></div>
<div class="alert alert-danger"><strong>アラート</strong> Danger：<code>.alert-danger</code></div>
<div class="alert alert-light"><strong>アラート</strong> Light：<code>.alert-light</code> <span class="text-black-50"></span></div>
<div class="alert alert-dark"><strong>アラート</strong> Dark：<code>.alert-dark</code> <span class="text-black-50"></span></div>

アラート内のリンクの色を変更する

アラート内のリンク色もクラス「alert-link」を追加することで変更することができます。

表示

ソース

<div class="alert alert-primary"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>
<div class="alert alert-secondary"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>
<div class="alert alert-success"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>
<div class="alert alert-info"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>
<div class="alert alert-warning"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>
<div class="alert alert-danger"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>
<div class="alert alert-light"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>
<div class="alert alert-dark"><a class="alert-link" href="#">リンク文字</a>　普通の文字</div>

アラートを閉じるアイコンボタンを追加

アラートJavaScriptプラグインを使用すると、アラートをすべて無効にすることができます。

ポイントは下記の4つ。

1. アラートプラグインまたはコンパイル済みのBootstrapのJavaScriptファイルを読み込む。
2. アラートを閉じるときにアラートをアニメーション化するには、必ず .fade と .show のクラスを追加する。
3. 閉じるボタンと.alert-dismissible クラスを追加。これにより、アラートの右側に余白が追加され、.close ボタンが配置される。
4. 閉じるボタンで、data-dismiss=”alert” 属性を追加。これにより、JavaScript機能が起動される。すべてのデバイスで適切な動作をさせるには、必ず <button> 要素を使用。

表示

ソース

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>CHECK!</strong>　バツボタンで閉じてみましょう。
  <button class="close" type="button" data-dismiss="alert" aria-label="閉じる">
    <span aria-hidden="true">×</span>
  </button>
</div>

アラートの応用

アラートの中で、見出し<h1>、段落<p>、水平線<hr>などの追加のHTML要素を入れることもできます。

表示

ソース

<div class="alert alert-success" role="alert">
<h5 class="alert-heading">見出しテスト</h5>
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

<hr />
<p class="mb-0">ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。</p>
</div>

まとめ

今回はアラート編ということで、様々なアラートの設定方法をご紹介しました。

クラス付与だけで、アラートの色変更など柔軟に設定でき、用途に合わせて簡単に変えられるのが魅力ですね。

前回のグリッドレイアウトやテーブルレイアウト・ボタンスタイルと合わせて覚えておくと、便利です。