小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

ページ全体のどこでも選択を禁止する（パート２）

WEB

昨日、以下のページがＣＳＳで選択を禁止しているらしいと書きましたが、今日、調べてみました。

結論から言うと、以下の４つの条件が揃うと、JavaScriptなしに、選択を禁止することができるみたいです。

  1. ブラウザがＩＥ６であること（他のバージョンではテストしていない）。
  2. ドキュメントタイプがあること（XHTML1.0 Transitional）
  3. base要素があること（href属性の内容は、なんでもいい）
  4. スタイルで、positionをrelativeにし、widthは多めのピクセルにする。

サンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<base href="xxxxhttp://gihyo.jp/" />
<style>
#wrapper {
    position: relative;
    width: 1000px;
}
</style>
</head>
<body>
<div id="wrapper">
<p>aaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbb</p>
</div>
</body>
</html>

上記４つの条件が一つでも崩れると、選択ができるようになります。
ちなみに、firefoxでは、４つの条件でも選択ができます。


とにかく、ドキュメントタイプとbase要素がスタイルに悪影響を及ぼしている感じかな･･･。