HTML | 隠しテキストや黒塗り文字を実装する方法
HTMLだけで隠しテキストや黒塗り文字を実装する方法とサンプルコードを紹介しています。
HTMLで隠しテキストにする方法
HTMLだけで隠しテキストにするにはいくつかのパターンがあります。
ブラウザの表示上から完全にテキストを隠す場合はコメントアウトや「hidden」属性の利用、「style」属性で「display:none」を指定します。
<!-- 隠しテキスト -->
<p hidden>隠しテキスト</p>
<p style="display:none">隠しテキスト</p>上記の隠しテキストは、ブラウザ上には表示さえませんが、HTMLソースコード内で確認する事が可能です。
「hidden」属性、「style」属性を使った場合、JavaScriptなどのプログラムで取得する事ができます。
隠されているけど、テキスト選択はできるようにするには、「style」属性で「color:transparent」を指定します。
文字色に背景色と同色を指定したり、「opacity:0」も可能ですが、多くの場合「color:transparent」の方が有用です。
<p style="color:transparent">このテキストは非表示です</p>↓ここに隠しテキストを設置しています。
このテキストは非表示です
HTMLで黒塗り文字を実装する方法
隠しテキストは完全に消えていますが、例えばクイズで黒塗り部分を作ったりする方法もあります。
HTMLにはテキストを黒塗り（単色塗りつぶし）にする属性は用意されていませんが、テキストの背景色と文字色を同色に設定する事で実装する事ができます。
<p>この<span style="background-color:#000;color:#000">テキスト</span>は黒塗りです</p>テキストのいち部分を黒で塗りつぶしています。
このテキストは黒塗りです
いずれの方法でも、文字列の視認性を落とす事になり、検索エンジンの評価を上げるためのSEO施策的には文章として評価されない事になっています。