伏せ字機能

articles＞coding

タップで表示する伏せ字機能

更新: 2026/4/9

伏せ字機能使い所:

ネタバレを書きたいときなどに便利です。

設置方法:

以下のコードをコピペするだけ。

【CSS】

/*▼▼伏せ字▼▼*/

/*デフォルトで非表示*/
.fuseji {
  display: none;
}
/*「ネタバレ注意」などの文字*/
.fuseji-warning{
  background-color: #0b1420;
  padding: 5px;
}
/*タップしたとき非表示*/
.fuseji-box.open .fuseji-warning {
  display: none;
}
/*タップしたとき表示*/
.fuseji-box.open .fuseji {
  display: block;
}

/*▲▲伏せ字▲▲*/

【JavaScript】

/*▼▼伏せ字▼▼*/
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".fuseji-box").forEach(box => {
    box.addEventListener("click", () => {
      box.classList.add("open");
    });
  });
});
/*▲▲伏せ字▲▲*/

【HTML】

<!--▼▼伏せ字▼▼-->
<div class="fuseji-box">
  <div class="fuseji-warning">〈ネタバレ注意。ここをタップで表示〉</div>
  <div class="fuseji">ネタバレ内容</div>
</div>
<!--▲▲伏せ字▲▲-->

【デモ】

〈ネタバレ注意。ここをタップで表示。〉

ここにネタバレ内容が表示されます。

君が代は　千代に八千代に　さざれ石の　巌となりて　苔のむすまで

【JavaScript】開閉できるようにしたい場合は、元のjsの代わりにこれを使う

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".fuseji-box").forEach(box => {
    box.addEventListener("click", () => {
      box.classList.toggle("open");
    });
  });
});