Studencheskie Programmisty

導入したie6-upgrade-warningが実はうまく動いていなかったので、原因を探っていたら、IEのバグらしきものに遭遇した。

具体的には、以下のような感じ。

var input = document.createElement('input');
input.id = "test_i_1";
input.type = "checkbox";
document.body.appendChild(input); //きちんとチェックボックスが追加される

var input = document.createElement('input');
input.id = "test_i_2";
document.body.appendChild(input);
var i = document.getElementById('test_i_2');
i.type = "checkbox";  //エラーがでる

なぜか、getElementByIdしたやつだとDOMがうまく動かないみたい。ちなみに、i.setAttribute("type", "checkbox")でも 結果は同じだった。

やはりIEのDOMはよく分からん...

IE6を使っている人にやんわりアップグレードを勧める8kbの軽量スクリプト『ie6-upgrade-warning』 - IDEA*IDEA ～ 百式管理人のライフハックブログを見て、うちも導入してみることにした。

ただ、私の場合はIEが全般的に嫌いなので全てのバージョンで表示させる方向でｗ

ところどころ改造しています。オリジナル版からの変更点は以下の通り。

• 表示される文
• ブラウザーの選択肢の中からIEを削除
• 「次から表示しない」機能を追加
• 「閉じる」ボタンを追加

「次から表示しない」機能は一応30日間効果（？）が継続するようにしている。動作した時のスクリーンショット。これで少しはIEを使わない人が増えてくれるといいのだけれど。

http://nodaguti.usamimi.info/ にアクセスした時に、単純にリダイレクトするのは面白くないと思ったので「サイト入り口」的な感じにしてみた。

なんとなくフォクすけのロゴを置いてみた。ENTERキーをフォクすけに持たせるのに結構苦労し、かなり時間がかかってしまった。慣れない画像編集なんてしないで素直にそのまま置けば良かった...

本当はふぉくす子を住ませたかったんだけど、画力がだいぶ足りなかったｗ
まあまたそのうちいい画像があったらということで。

鳩丸ご意見番 - なぜ BLOCKQUOTE でインデントしてはいけないのかを読んで、昔からあれだけ言われてることだし blockquote を今どきインデントに使ってる人なんているのだろうかと思い、以下のようなCSSをユーザースタイルシートに入れてここ２，３日過ごしてみた。

blockquote[title]:after{
  content: "\300E" attr(title) "\300F";
}
blockquote[cite]:after{
  content: "(" attr(cite) ")";
}
blockquote[title][cite]:after{
  content: "\300E" attr(title) "\300F(" attr(cite) ")";
}
blockquote{
  border-left: 4px solid !important;
  padding-left: 1em;
  margin-left: 1em;
  background-color: #ccc !important;
}
blockquote:before{
  content: "Quotation: ";
  display: block;
  font-style: italic;
  font-weight: normal;
  text-decoration: underline;
}

すると、 漢検1級挑戦記という酷いサイト（別に中身が酷いとかいうわけではなくて、ソースが酷いということ）に遭遇した。
blockquoteを3重にしてインデントしている。よくよくソースを見てみると、

<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.3.0 for Windows">

というように書いてある。一条戻橋：漢検準１級合格法も、ホームページビルダーを立ち上げてみよう（ホームページは難しくない）も、IBM WebSphere Studio Homepage Builder だった。

上のホームページビルダー11が発売されたのは2006年12月1日だ（「ホームページ・ビルダー 11」が発売--利便性向上、ポッドキャスト対応に:ニュース - CNET Japan）。

それに対し、blockquoteをインデントに使うなということを指摘した冒頭のサイトは2000年3月23日、手持ちの(株)シーズ『改定新版 HTML ポケットリファレンス』(技術評論社,1998年)にも同じようなことが書いてあるから、少なくとも1998年にはblockquoteは正しく使いましょうということが言われていたことになる。

最近のバージョンで直ってるのかどうかは知らないが、自動でHTMLを生成するならせめてきちんと正しいHTMLを出すくらいのことはして欲しいものだ。

CSS3 の target 疑似クラスで脚注を動的に表示する - lucky bagを見て、さんざん既出かもしれないけど、よく長い説明とかネタバレとかを隠すのに使われる、クリックで「表示」と「非表示」をトグルするのをCSSだけで実現できるんじゃないかと思って実験してみた（1文長い..)

結果から言うと、次のような感じでできた。

隠されている文章を表示

現金自動預け払い機（げんきん じどう あずけばらいき／ATM, Automated Teller Machine） は、通常、紙幣（及び硬貨）、通帳、磁気カード等の受入口、支払口を備え、金融機関や貸金業者、現金出納を行う業者の提供するサービスが、顧客自身の操作によって取引できる機械を指す。
元々は都市銀行の店舗に設置され、普通預貯金の預け払いに用いられ出したが、今日、金融機関はもとより、小売店や公共施設などに幅広く設置されている。
また、普通預金以外の取引や現金を介さない取引も広く取り扱うよう進化しており、自動取引装置、自動窓口機などとも呼ばれる。（Wikipediaより） 隠す

<style type="text/css">
#hide-atm{
   display: none;
}
#hide-atm:target{
   display: block;
}
</style>
<a href="#hide-atm" id="title-atm" name="title-atm">隠されている文章を表示</a>
<p id="hide-atm">
現金自動預け払い機（げんきん じどう あずけばらいき／ATM, Automated Teller Machine） は、通常、紙幣（及び硬貨）、通帳、磁気カード等の受入口、支払口を備え、金融機関や貸金業者、現金出納を行う業者の提供するサービスが、顧客自身の操作によって取引できる機械を指す。<br />元々は都市銀行の店舗に設置され、普通預貯金の預け払いに用いられ出したが、今日、金融機関はもとより、小売店や公共施設などに幅広く設置されている。<br />また、普通預金以外の取引や現金を介さない取引も広く取り扱うよう進化しており、自動取引装置、自動窓口機などとも呼ばれる。（Wikipediaより）
<a href="#title-atm">隠す</a>
</p>

hide-atm の要素がターゲットされると display:block で表示されるようになり、ターゲットが外されると再び display:none の状態に戻って隠される、というわけ。id名がアレなのはスルーして下さいｗ

１つ１つにidをふらなきゃいけないのが欠点といえば欠点だが、例えばCSSを

[id^="hide-"]{
   display: none;
}
[id^="hide-"]:target{
   display: block;
}

みたいにすれば、id名の先頭が hide- のものは自動的に開閉するようになるから、そんなに面倒というわけでもないかもしれない。

target疑似クラスが実装されていないのは IEのみ（IE8含む）、E[attr^=val] が実装されていないのは最新版ではOpera10だけで、IE8でも実装されている。 というわけで、IEを切ってもいいのであれば使える技かもしれない（その決断をするのが難しいんだけど）。