javascript+CSS - お手軽もんたメソッド

もんたメソッドも高校の学習指導計画書に乗ったそうですし、ここらで高校生どころか中卒でも簡単にもんたメソッドをお届けするのもよかろうかと思いまして。

実践例

痛いニュース(ﾉ∀`):【ＴＢＳ捏造疑惑】 ＴＢＳ社長ら「不二家報道、捏造というのはどうか」「みの氏の『不二家、廃業しろ』は励ましの言葉」より拝借

みの氏は不二家報道の翌日の番組冒頭で、不二家について「もうはっきり言って、廃業してもらいたい」と言い放っているが、ＴＢＳは「『廃業を覚悟して不退転で臨んでください』という励ましの発言だったのでは」としている。

レシピ

1. まずは以下のCSSを用意しておきます。お好みにあわせてカスタマイズしておいてください。

   <style>
   div.mino  { border: outset 1px; padding: 0.5em; color: #000 }
   span.monta { background-color: #000 }
   </style>
   

2. 次にもんたメソッドを適用したい文章を<div class="mino">でくるみ、該当部分を<span class="monta">で囲みます。
3. あとは、以下のScriptを最後に付け加えます。onloadイベントにhookしてもよいでしょう。

   <script>
   function minomonta(){
      var spans = document.getElementsByTagName('span');
      for (var i = 0, l = spans.length; i < l ; i++){
         var span = spans[i];
         if (span.className != 'monta') continue;
         span.setAttribute('title', 'ここをクリックすると...');
         span['onclick'] = function(){ this.style.backgroundColor = "transparent" };
      }
   }
   minomonta();
   </script>
   

ちょっと簡単すぎましたかね。

HTMLもわからないという人は、以下もどうぞ。

• 最速インターフェース研究会 :: もんたメソッドなプレゼン作成ツール

Dan the Mino Monter -- Whatever That Means

追記:TBのひろさんとcommentのgSwingさんの添削を反映させました。ありがとうございます。

element['on' + event] = function(){...}は、Crockfordも言っていたのに失念してましたorz。

Comments

背景色を指定するときは文字色も一緒に指定するのがベターです。

span.monta { color: #000; background-color: #000; }

ところで素朴な疑問なのですが、
for (var i = 0, l = spans.length; i < l ; i++)
これってあまり見ない書き方なのですが、
for (var i = 0 ; i < spans.length ; i++)
と書くのと比べてメリットあるのかな？？？

Posted by gSwing at 2007年03月30日 10:28

gSwingさん、
添削ありがとうございます。反映させました。
for (var i = 0, l = elem.length; i < l ; i++){}
は、amachangとmalaの両ハッカーにどこかで教わったように覚えてます。elem.lengthへのアクセスは以外と重いということで、一次変数を用意して格納しているわけですね。
Dan the Careless Javascripter

Posted by 弾 at 2007年03月30日 14:23

これってIE限定ですか？
FireFoxでは動かないみたいですが・・・

Posted by ticzoo at 2007年03月30日 16:45

うちのFirefoxではちゃんと動作するよ
IEviewでも同じような動作だったから多分ちゃんとだと思うけど。

Posted by へたれ at 2007年03月31日 16:52

まず範囲選択して中身を見た俺は負け組。

Posted by 通りすがり at 2007年04月02日 14:13