スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
ストリクトな HTML を記述しようと、font 要素をやめ、table レイアウトをやめしていて、属性をいう属性をとっぱらってスタイルシート記述に移行。そうやって、細かいトコロまで互換をたもちつつ仕様にそって記述しようとして、なかなかイウコトがきかない場面に遭遇する。table の属性記述だとか、form だとか、HTML4.01 でかいて、モトの見栄えはともかく、スタイルかませればいいんだとがんばってもブラウザ毎に反映状況が違ったりするわけで。と、そういう点について、気づいたらメモしておこうと思ってやってるこのサイトなんだけど、言葉にして説明することが面倒くさい（笑）
さて、このページでは、リンクのときに別ウインドウを開いたり、フレームを使ったときにフレーム指定したりするときに使っている（いた） target 属性のハナシ。この属性は HTML4 自体で、使用を推奨していないものなんだけど、その代替えは「例えばスクリプト等で制御する」ということになったもの。「じゃあ、スクリプトでどうやるの？」ということで、これ使ったら、target 属性はいらなくなって、Transitional なページを Strict にできるっちゅう。自分は他はなんとかなってもココの変更が面倒でつい最近になってからやりはじめた。ま、別に「Strict じゃないとダメ」なんて作業を発注されることはないのだが。
あ、この対処する前に「ナンで target 属性が推奨されないのか？」という点は、ちゃんとわかってるべきです。簡単にいうと、アクセシビリティ、ユーザビリティの観点から、ウインドウをいくつも開くことをページ側で強要するべきではない、というものです。それ以前にハイパーリンクの記述はいろいろきぃつけるべきな訳ですが、ウインドウを開くとかそういうのはユーザーエージェント側の機能として持ち、ユーザーの判断でどうするかきめることができるべきだとゆーことでしょう、きっと。別窓ひらくメニューがないブラウザもあるとは思いますが。それは「ブラウザが悪い」
この点をキッチリ把握した上で以下をどうぞ。
まず「別窓で開きたいページへのハイパーリンク」を「普通のリンク」で記述します。
<ul>
<li><a href="http://www.ichiro.to/" title="ウェブデザインのわな〜">The Trap of WEB Design</a></li>
</ul>ハイパーリンクに、onclick イベントを追記します。
<ul>
<li><a href="http://www.ichiro.to/" title="ウェブデザインのわな〜" onclick="window.open(this.href);return false;">The Trap of WEB Design</a></li>
</ul>以上。簡単だし、リンク先によって記述変更なんかはいりません。ここでは JavaScript をインライン記述してしまいましたが、JS ファイルをリンクさせて、そこに自前 function として書いておくほうがよりよいと思います。別窓のサイズ指定やらもできます。JavaScript ですから。
function wopen(url) {
if (url) {
opwin = window.open(url);
opwin.focus();
}
}この場合は、イベント属性のトコがチョコっと変わります。
<ul>
<li><a href="http://www.ichiro.to/" title="ウェブデザインのわな〜" onclick="wopen(this.href);return false;">The Trap of WEB Design</a></li>
</ul>window.open に付加するオプション指定などのやり方は、JavaScript の解説サイト等でしらべませう。
あと、JavaScript を使うんで、head 内に meta 指定が必須です。ストリクトな記述のためなんで当然です。忘れないように。
<meta http-equiv="Content-Script-Type" content="text/javascript" />XHTML のトキって、なんでもかんでも小文字、なのかと思ったら、ここの http-equiv はそーでなくてもいいみたいですね。って、実はよくわかってないぞオレ。知ってる方教えてください。
ストリクトなページだとすれば、もともとフレームを使うということはありません。なので、Transitional として、target 使えばよいのです。これオカシなハナシで、フレーム枠自体は frameset の DTD がありますが、そのフレーム枠内のページがストリクトということになったっていいわけです。と思いますが「フレーム使うなら全部 Transitional で統一する」のがいいんだろうとは思います。
フレーム利用の際に注意することはそのうちまとめるとして、結果、フレーム枠指定リンクで target 属性を使わない（使うべきではない）場合もないわけではないので、オマケとしてかきます。ようは「JS の window.open で、target に該当するフレーム枠名を指定」します。
フレーム枠の frame で指定した name は、JS上で「ウインドウネーム」としてはいっているので、target と同じく、window.open する先を name にすればよいということ。
<ul>
<li><a href="http://www.ichiro.to/" title="ウェブデザインのわな〜" onclick="window.open(this.href,'ウインドウ名称');return false;">The Trap of WEB Design</a></li>
</ul>'ウインドウ名称' という「フレーム名」んとこにリンク先を表示します。（たぶん。実は最近ほとんどフレーム使ってないから）
また、フレーム解除（_top）、親フレーム（_parent）といった指定をしたいときにも、ウインドウ名称のトコにそのキーワードいれれば target 指定と同じになります。
便利な JavaScript を覚えるとついついつかってしまいがちですが、例えば、
<ul>
<li><a href="javascript:window.open('http://www.ichiro.to/');" title="ウェブデザインのわな〜">The Trap of WEB Design</a></li>
</ul>でも同様に別窓リンクできますが、いけません、これは。
なぜかといえば、最初の説明のヤツは「JavaScript が動作しない場合でもリンクする」ようになってます。href 自体での JavaScript 起動は（ことハイパーリンク箇所においては）JavaScript 非動作環境で、ユーザーはその先に進めないことになりますのでダメということです。onclick 等のイベントを使うのが正しい。
「フレームのページで JavaScript を切っていた場合」では、リンクのあるページがはいったフレームでそのまま開いてしまいます。て、これは問題！...ではなくて、だから「フレームつかったときは、フレーム内ページは Transitional にする」わけです。そして、target 属性を使います。そんなこんなで「ストリクトなフレームページ」というのは無いということで落ち着きました。
2004年10月28日 08:23
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto
コメント
きっとくだらない質問だと思うのですが、どうしても理解できないので聞いてよいでしょうか。
このページのテクニックですが、Javascriptに頼って、ほんとはやるべきでないtargetを指定してまで、Strictでページを作る意義って何なんでしょうか？
そこまでするのなら素直にTransitionalで良いのでは…。
（どうしても後戻りできない場合に使うハックのようなものだとしたら、意義は無いと思うのでスルーしていただいて結構です。）
一時期私も正しいhtmlを書かなきゃ！という観念に捕らわれていましたが、そういうことってユーザー側には全く意味の無い話ですよね。
テーブルレイアウトなどはもちろん論外ですが、何だか最近の風潮は「正しくある」ことにこだわりすぎているのでは、と思ってしまうのです。
Takeさん（で良いでしょうか？）のようなWeb業界の最先端で活躍されている方のご意見を是非伺いたいです。
古いエントリーを掘り返してしまい、失礼いたしました。
2006年12月25日 16:42 末端デザイナ
2006年12月25日 16:48 末端デザイナ
本当は何故別ウインドウ開きが望ましくいないのか、という点を少しでも意識していただければよいかな、と。これ読んでそういうことに気づく方はそもそも使わないでしょうけどね。使わないでください（笑）
2006年12月25日 20:56 ichiro