HTML・CSS・JavaScriptのコピペでできる表示・非表示の切り替え注意喚起表示のスニペット

注意をユーザーに喚起する場合、ページ内のどこかに設置する必要がありますが、常時その場所に表示されていてもあまり意味がなく、ユーザーにストレスを与えてしまいます。

この注意喚起表記のUIは、通常ユーザーの目につきやすい位置に設置し、見た後はユーザーが消去できるような仕組みのものを多く見かけます。

かかかず
かかかず

必ず見せたい場合は「モーダル」など、注意を引きたい度合いによって使い分けされています。

今回の記事のUIは強制的に見せるのものではなく、ユーザーが任意で非表示にもできるUIで、コピペしてカスタマイズも結構簡単にできるので、使ってみてください。

注意喚起表示のサンプル

早速サンプルですが、以下のように個数は特に上限はなく表示することができ、中の文言もHTMLで簡単に変更可能です。

表示を消す場合、一個一個のブロックの右端にある「✖️」を選択することで、ほんわりと消えてくような仕様です。

かかかず
かかかず

一旦消したものは、ページの再読み込みで復活します。

× これは注意内容を表示する赤色のBOXです。
× これは注意内容を表示する青色のBOXです。
× これは注意内容を表示する緑色のBOXです。
× これは注意内容を表示する黒のBOXです。

flexboxでのサンプル

これはコピペ用コードには記載していないですが、注意喚起BOXの並びはflexboxでももちろん表示可能です。

  • × これは注意内容を表示する赤色のBOXです。
  • × これは注意内容を表示する赤色のBOXです。
  • × これは注意内容を表示する赤色のBOXです。
  • × これは注意内容を表示する赤色のBOXです。
かかかず
かかかず

注意喚起に限定せず、応用すれば色々とインタラクティブなものが作れます。

コピペの手順

注意喚起表示のスニペットはそれぞれ以下の手順で実装可能です。

かかかず
かかかず

簡単な3つのSTEPで完了です。

HTMLをコピペ

以下のHTMLを、表示したい場所にコピペします。

HTML

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <i class="fas fa-exclamation-circle"></i> これは注意内容を表示する赤色のBOXです。
</div>

複数のアラートを表示させたい場合は、その個数分コピペすればOKです。

CSSをコピペ

次にCSSをコピペします。WordPressの場合は、管理画面メニューの「外観」→「カスタマイズ」の追加CSSか、使用しているテーマのCSSファイルに記述します。

CSS

/* アラート */
.alert {
  padding: 20px;
  background-color: #FF0000;
  color: white;
  margin-bottom: 15px;
  opacity: 1;
  transition: opacity 0.6s; /* 600ms to fade out */
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 25px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

JavaScriptをコピペ

JavaScriptのコードを、コピペしたHTMLの記述のある body のクロージングタグの前に記述します。

JavaScript

// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;

// Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // When someone clicks on a close button
  close[i].onclick = function(){

    // Get the parent of <span class="closebtn"> (<div class="alert">)
    var div = this.parentElement;

    // Set the opacity of div to 0 (transparent)
    div.style.opacity = "0";

    // Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}

JavaScriptのコードは、外部ファイルを使わずに記述する場合は、<script>〜〜〜〜</script> の中に記述すればOKです。

コピペ用コード一式

注意喚起表示のHTML・CSS・JavaScriptのコピペ用コード一式です。

CSSのコードは必要最低限しか書いていません。その為、複数のBOXを設置する場合、HTMLのalert のclassに、違うクラスを追加で付与するなどして利用ください。

コードを表示する

HTML

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <i class="fas fa-exclamation-circle"></i> これは注意内容を表示する赤色のBOXです。
</div>

CSS

/* アラート */
.alert {
  padding: 20px;
  background-color: #FF0000;
  color: white;
  margin-bottom: 15px;
  opacity: 1;
  transition: opacity 0.6s; /* 600ms to fade out */
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 25px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

JavaScript

// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;

// Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // When someone clicks on a close button
  close[i].onclick = function(){

    // Get the parent of <span class="closebtn"> (<div class="alert">)
    var div = this.parentElement;

    // Set the opacity of div to 0 (transparent)
    div.style.opacity = "0";

    // Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}