takumart.net link

takumart.net - Takuma saitou Art works |  Art Works  |  Photo Works  |  Profile  |  Download  |  Mail  |  Blog  |  Link  |  Sitemap  

2007年9月27日木曜日

「新規ウィンドウの小技」

サイト制作好きです。
WEB標準めんどいです。
Takumaです。

【WEB標準】
W3Cが勧告しているWWW関連の規格のことである。
特にウェブサイト製作に関わるHTMLやCSS、DOM、WCAG等のことを言う。


http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E6%A8%99%E6%BA%96
(by ウィキペディア)

今回はWEBの制作ネタのお話です。

みなさま
■Another HTML-lint gateway
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
というサイトはご存知でしょうか?

W3Cが勧告している「正しいとされているhtml記述」をチェックできるサイトです。

Takumaも以前、公共機関のサイトを作ったことがあるのですが、
こちらのサイトで全ページ「80点以上(←たしか)」という営業からの無茶振りを受けなきながらお世話になったことがあります。

あの頃、cssによる分離型コーディングも走り出しで
高級品感覚だったのに3年もたてば、いまや常識となってしまいました。
と前置きはコレぐらいにして今回は、

■WEB標準対応(?)の新規ウィンドウの出し方
のお話です。

Takumaもコーディング業務から離れて久しいのですが、
そんな私でも、お勉強のために作品サイトを活用しております。
(↑コーディングのスペシャリストには、かなり適わないですけど。。。)

そんな中、「Another HTML」でソースコードをチェックした際に
こんな警告をされました。

tag.jpg



簡単に訳すと
「何年も前から使うなっていってるだろ!
 いい加減、使うのやめろよ!!(怒)」

というないようです。

タグの「TARGET属性」は「_blank」と指定すると
リンク先を新規ウィンドウで開いてくれます。
(↑外部リンク等に有効なリンクのしかたなのです。)

しかしながら、使うなとおっしゃる(号泣)。。。
というわけで回避策を探していたところ、
素敵な解決法が紹介されていたので、作品サイトでも一部反映してみた。

●javascriprを使用
外部jsファイルを用意し、aタグ内にclassを指定することにより別ウィンドウリンクを設定。

・外部jsファイルの内容
window.onload = function() {
var node_a = document.getElementsByTagName('a');
for (var i in node_a) {
if (node_a[i].className == 'newwin') {
node_a[i].onclick = function() {
window.open(this.href, '', '');
return false;
};
}
}
};

▼元ネタ:mikiさん
http://bodytalk.girly.jp/

▼紹介/解説:REDLINEさん
http://blog.livedoor.jp/red_line/archives/50765597.html

この方法でやんないと
リンクごとにjavascriptを直接記述しなくてはならなそうで、困ってたのです。

というわけで「Another HTML」のご機嫌をとるのに、
一つ大きなハードルを超えたと思ったのですが、
(↑「Safari」では正常動作しないらしい。)
お仕事ではちょっと厳しいかも。。。


� ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄

Takuma Saitou Works site - 私的展示・アトリエ空間(PC)
[
http://www.geocities.jp/takuma_saitou/ ]
ブログ(PC・モバイル)
[ http://takumasaitou.blog114.fc2.com/ ]

http://app.blog.livedoor.jp/red_line/tb.cgi/50765597