テキストをぼかし文字にしておきクリックで表示されるHTML＆CSS

2021年8月21日

多くは語りません。↓ をタップしてください。PCの人はクリック！

動作サンプル

上のと全く同じですが、一応動作サンプル。

クリック or タップで表示され、もう一度押すとぼかしが入り非表示になります。

HTML / CSSコード

<div class="bokashi">
  <label for="switch">
    <input type="checkbox" id="switch">
    <div>
      <p>ぼかす内容</p>
    </div>
  </label>
</div>

.bokashi label {
  cursor: pointer;
}
.bokashi input {
  display: none;
}
.bokashi input+div {
  color:transparent;
  transition:0.8s; // アニメーション速度（デフォは0.8秒設定）
  text-shadow:0px 0px 10px #000;
}
.bokashi input:checked+div {
  text-shadow:0px 0px 0px #000;
}

transitionの部分がクリックしたときのアニメーション速度。好きな数値に変更してお使いください。ゆーっくり変化させたいときは数値を大きくすればOK。デフォルトでは0.8s、つまり0.8秒にしあり〼。

あと、#000の部分二箇所を書き換えてサイトの文字色に合わせてください。いまどきフォントカラーが真っ黒なサイトもあまりないはず。

ぼかした部分の前に表示ボタンをおく場合

冒頭で紹介した例ではぼかしたテキスト部分をクリックでぼかし状態と表示を切り替えます。

が、HTMLを少し変えるだけで切り替えスイッチを別にすることも可能。

下記HTMLをご利用ください。CSSは上記のものと同じで大丈夫です。

<div class="bokashi">
  <label for="switch">ここをクリック or タップで表示、再度押すと非表示</label>
  <input type="checkbox" id="switch">
  <div>
    ここにぼかす文字を入力
  </div>
</div>

ぼかした部分前の表示ボタンの動作サンプル

仕組み

テキスト自体は透明にして非表示にし、CSSの text-shadow で最大限ぼかした状態の影をつけてい〼。

で、クリックをすると影のぼかしを0にして文字とまったく同じ形にすることで、ぼかしていた文字が表示されるってわけです。実際に表示されているのは影で文字は非表示のままですけれど。

クリックごとの切り替えには非表示状態のチェックボックスを利用。で、隣接兄弟結合子、いわゆる隣接セレクタで個々のinput要素の次にあるdiv要素そのものをトリガーにしてい〼。

使用上の注意

表示上はボケていて判別不能ですが、テキスト自体は存在してい〼。テキストを隠す方法としては簡易的なものとお考えください。思いつくなかでは下記に注意。

• 環境によってはドラッグなどでテキストを選択すると文字が見えることがある。
• GoogleやBingなど検索サイトの検索結果には普通に抜粋されそう
• 環境によっては対応せず普通に表示される可能性がゼロではない
• めちゃくちゃデカい文字だと判別できちゃうかも？（現実的ではないけど）

特に上2つはよくありそう。残る2つはそうそうないのでそこまで気にしなくて大丈夫。最近のiPhone / AndroidスマホやiPadといったタブレットならまず問題ないはずです。

PCはChromeとかFirefoxとかEdgeとかモダンブラウザならまずセーフかと思います。IEなんぞ使ってるヤツには忖度せんでよろしい。文句言われたらIEなんぞ窓から投げ捨てるように言ってやってください。

IEよはよ滅べ。

応用：クリックで交互に切り替わるCSS

.bokashi label {
  cursor: pointer;
}
.bokashi input {
  display: none;
}
.bokashi input+div {

  // ①クリック前のCSS

}
.bokashi input:checked+div {

  // ②クリック後のCSS

}

上記で紹介したコードを応用して、クリックで切り替わるCSSを組み込むことが可能です。ぼかし以外のナニかで使いたいときご利用ください。HTMLは共通なので割愛。

（どちらかといえばぼかしによる非表示＆表示がこのCSSの応用なんですけど）

①が最初に表示されるCSSで、クリックすると②になり、その後はクリックごとに①と②が交互に切り替わり〼。

まとめ：ぼかし文字がクリックで見えるようになるHTML＆CSS

実際のところlabel要素のなかにinputを入れているのでfor属性とid属性での紐付けは不要。

ですが、あとで紹介した表示ボタンを前におく場合とコードを揃えるためにつけっぱなしにしてい〼。