どのように作成するか：警告メッセージ

CSSを使用して警告メッセージを作成する方法を学びます。

警告

警告メッセージは、ユーザーに特殊な事項（危険、成功、情報、警告）を通知するために使用できます。

× 危険！危険や負の影響を引き起こす可能性のある操作を示します。
× 成功！成功やポジティブな操作を示します。
× 情報！中性的情報の変更や操作を示します。
× 警告！注意が必要な警告を示します。

自分で試してみる

警告メッセージを作成します

第1歩 - HTMLを追加：

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  これは警告ボックスです。
</div>

警告メッセージを閉じることができるように、 onclick 属性の <span> 要素、この属性は「私をクリックすると親要素を非表示にする」- つまりコンテナを意味します。 <div class="alert">。

ヒント：HTMLエンティティ「×」を使用してアルファベット「x」を作成します。

第2歩 - CSSを追加：

警告ボックスと閉じるボタンのスタイルを設定します：

/* 警告メッセージボックス */
.alert {
  padding: 20px;
  background-color: #f44336; /* 赤 */
  color: white;
  margin-bottom: 15px;
}
/* 閉じるボタン */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
/* 閉じるボタンにマウスを合わせたときに */
.closebtn:hover {
  color: black;
}

自分で試してみる

複数の警告

ページに複数の警告メッセージがある場合、以下のスクリプトを追加して、各警告ごとにスクリプトを使用せずに <span> 要素の onclick 属性の状況で異なる警告を閉じます。

また、警告をクリックしたときにゆっくりとフェードアウトするように、不透明度とトランジションを以下に追加してください alert クラス内：

例

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600 ミリ秒でフェードアウト */
}
</style>
<script>
// class="closebtn"のすべての要素を取得します
var close = document.getElementsByClassName("closebtn");
var i;
// すべての閉じるボタンをループで巡回します Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // すべての閉じるボタンを巡回します
  close[i].onclick = function(){
    // <span class="closebtn">の親要素（<div class="alert">）を取得します
    var div = this.parentElement;
    // div の不透明度を 0（透明）に設定します
    div.style.opacity = "0";
    // 600 ミリ秒後に div を非表示にします（フェードアウトに必要な時間と同じ）
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

自分で試してみる

関連ページ

チュートリアル：便箋を作成する方法