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

Bootstrap

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

2019年01月11日 8:00 2019年09月06日

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

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

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

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

さて、連載しております「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」を付与すると、アラートが適用されます。

表示

アラートPrimary:.alert-primary
アラート Secondary:.alert-secondary
アラート Success:.alert-success
アラート  Info:.alert-info
アラート Warning:.alert-warning
アラート Danger:.alert-danger
アラート Light:.alert-light
アラート Dark:.alert-dark

 

ソース

 



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

 

表示

リンク文字 普通の文字
リンク文字 普通の文字
リンク文字 普通の文字
リンク文字 普通の文字
リンク文字 普通の文字
リンク文字 普通の文字
リンク文字 普通の文字
リンク文字 普通の文字

 

ソース

 

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

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

ポイントは下記の4つ。

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

 

表示

 

 

ソース

 



アラートの応用

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

表示

 

ソース

 

 

まとめ

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

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

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

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!