背景と文字が同じ色の文書

Web

「教えてはてなダイアリー」経由で知った質問に、「フジテレビ日本語審議会」と「まわりの人は知らないmonami　秘密のmonami」4月24日付の次のようなものがありました。((余談になりますが、HTMLにおいて「<font color=#ededed >」という記述は誤りで、「color="#ededed"」のように引用符をつける必要があります。正確に言うと、HTML4では「英字、数字および、『-._:』」以外の記号が含まれる場合には引用符を省略できません。常に省略しない癖をつけておいた方が安全です。詳しくはSGML の短縮タグ機構を参照下さい。))

日記の一部を白文字（#ededed）で書くにはどうすればいいのでしょうか。

ちなみに今までは、font color=#edededのタグでやっていました。

ここで言うように背景と文字の色を同一にすることによって文字を見えなくする文書を、ここでは「ステルス文書」と呼ぶことにします*1。

すでにある程度解決されているようですが、引用元の記述に沿ってステルス化とすると次のようになりますね。

span.naisho {
 color: #ededed;
}
span.naisho a.keyword {
 color: #ededed;
 text-decoration:none;
 border-bottom: 1px dotted white;
}

span.naisho a.keyword:visited {
 color: #ededed;
 text-decoration:none;
 border-bottom: 1px dotted white;
}

2月27日に私が書いた文章では「特に強調するため赤い文字に」する例を挙げたため、特別な強調を示すstrong要素を用いたのですが、今回は文章を隠すことが目的ですので、strong要素は不適切です。HTMLで強調とは逆に周りより目立たなくする要素というと、強いて言えばsmall要素が該当しそうですが、今回の場合は文字の大きさを小さくするわけではないのでやはり適切とは言えないでしょう。そんなわけで、他に該当する要素がない場合に汎用的に利用できるspan要素を使ってみました。（もし、文の一部だけを隠すとこがないならば、p要素で隠すのも一案です。）

上のようにCSSを設定すれば、あとは次のように書けば「隠し文字」が使えることになります。

<span class="naisho">隠したい文字列</span>

これで質問には答えたことになりますが、実際に書きたかったのは実はもう少し別の部分にあります。個人的な見解としてお読み下さい。

ここで取り上げた「ステルス文書」は本当に文字を隠したいわけではなく、文字を読むにあたってマウスのドラッグもしくはControl+aという操作により選択状態にし、文字色を反転させることにより読んで下さいという意図があるわけです*2。よくあるのは、「ネタばれなので、それでもいい人だけ読んでね」というようなものでしょうか。

そのような機能を求めるとき、「背景と文字を同一の色に揃えるという手段が妥当なのか」というのが私の疑問です。というのも、隠したつもりで隠れていない場合が少なからずあるためです。

読み上げ環境

音声によって情報を伝える読み上げ環境では、当然ながら色が伝わりません。

携帯電話

はてなダイアリーではパソコンからでもhttp://d.hatena.ne.jp/mobileのようなURLにアクセスすれば携帯電話での表示を見ることができます。これでわかるように色指定は反映されません。「隠れてないよ」と言われるだけならまだいいのですが、筆者が隠そうとしていることにすら気付かない可能性も高そうです。

色指定無効

最近のIEなどのブラウザではウェブページで指定された設定を無効にして、ユーザ独自のスタイルを利用することが可能です。IE6の場合は「ツール」→「インターネット・オプション」→「ユーザー補助」→「Webページで指定された色を利用しない」です。したがって、このような設定で閲覧している人にとっては隠されていることがわかりません。

検索エンジンのロボット

ウェブページを見ているのは人間だけではありません。一例を挙げれば、検索エンジンに利用する情報を集めるプログラムも様々なページを見回っています。こうしたプログラムには、当然ながら光学的な目はありませんから、背景と文字が同じ色であろうが関係なく内容を読みとります。

このことを利用して、自分のページを検索結果の上位に位置させようとするページが現れました。頻繁に検索される単語をステルス文書として並べておけば、人間の目に入らずに検索エンジンのロボットにだけその単語と関連する文書であるかのように見せかけることができるわけです。

現在では、このような行為は検索エンジンの信頼性を損ねる行為として、発覚した場合には検索結果に表示されなくするなど厳しいペナルティが課されることになっています。興味ある方は「検索エンジンスパム」で検索してみて下さい。

少し話がそれましたが、言いたいことは見当が付いたかと思います。ステルス文書は上のような行為と混同される危険性があるということですね。個人的には、検索エンジン側は両者を区別する手法を持っていると思っていますが、技術的な詳細が明らかにされていないため大丈夫とは言い切れません。迷惑な限りです。

このような事情があるので、ステルス文書もそれほどステルスではないかなと思います。それをわかった上で使うならいいのですけれども。

背景と文字を同一の色に指定する以外にも、目的を達成する手段はいくつも考えられています。ここでは詳細は述べませんが、どれを取っても一長一短です。

  • テキストボックスを利用して、スクロールしないと文章が見えないようにする。
  • CSSで「overflow: auto;」を指定して、スクロールしないと文章が見えないようにする。
  • JavaScriptを利用して、クリックすると文章が記されたアラートボックスがポップアップするようにする*3。
  • JavaScriptを利用して、クリックすると文章が現れる仕組みを作る。

ほかにもあるかもしれませんが、よく考えてみると、同じページに記された文章を読むのに何らかの追加的な動作を要求すること自体が不自然で好ましくないことなのかもしれません。逆に言うと、追加的な動作をしないと読めないような文章を書きたいなら別のページに書くべきだという気がしてきました。

つまり、直接見せたくない部分は別のページに書いておいてそこへリンクを張れば問題は起きないわけですね。はてなダイアリーなら過去日記を利用すれば多少手間はかかりますが実現は容易です。

*1:google検索：ステルス文書を参照。

*2:Opera6以前だとその操作では読めないので、本当に読めない文書になってしまったりするのですが、ここではおいておきます。

*3:はてなではJavaScriptは利用できません。