“更新”ボタンを押すまではリンクの色が青→紫色になりません。

Question

リンクを以下のように記述するとIE6,7及び8において、リンクをクリック後に“ブラウザーの「更新」ボタンを押すまでは”リンクの色が青→紫色になりません（“ブラウザーの「更新」ボタンを押すと”リンクの色が青→紫色になります。）。
<a href="http://www.yahoo.co.jp/index.html" onClick="window.open('http://www.yahoo.co.jp/index.html');return false;">テストです。</a>

どのように記述すると、IE6,7及び8において、リンクをクリック後に“ブラウザーの「更新」ボタンを押さなくても”リンクの色が青→紫色になるでしょうか?

これは、仕方がないことなのでしょうか?
グーグルのトップページには「Googleニュース」などの項目があり、各ニュースをクリックすると別ウィンドウが開きますが、“更新”ボタンを押さなくてもアクセス済みのリンクの色が青→紫色になりますね。あれって、とても高度な技術が必要ですか（リンクの色の変化だけの話です。）？

<a href="http://www.yahoo.co.jp/index.html" target="_blank">テストです。</a>
のようなやりかたもあるようですが、XHTML 1.1 や XHTML Basic等ではもう採用さていないため、お勧めではないと読んだ記憶があります。

関連サイト等あれば、URL教えて下さい。

think49 · Accepted Answer

> テストです。 return false; でデフォルトの動作をキャンセルしてますね。この影響で「リンクされなかったもの」として解釈されてしまっているのだと思います。ブラウザの動作として納得できるので、回避しようがないんじゃないでしょうか…。 > グーグルのトップページには「Googleニュース」などの項目があり、各ニュースをクリックすると別ウィンドウが開きますが、 Googleのトップページというと http://www.google.co.jp/ を思い浮かべますが、該当しそうなリンクは見あたりませんでした。 URLは何でしょうか？ > XHTML 1.1 や XHTML Basic等ではもう採用さていないため、お勧めではないと読んだ記憶があります。「お勧めではない」ことを避けるスタンスなら、target="_blank" も window.open もお勧めではないです。 target="_blank" が非推奨属性なのは、「タブを開く挙動をユーザに選ばせよう」とする思想に反するから。(ユーザビリティの低下を避けるため) もし、「target="_blank" が非推奨属性だから window.open で代替しよう」というのであれば、手段が目的化しています。新しいタブで開かせたいのなら、Transitionalにして target="_blank" にする方が妥当だと思います。それを認識した上で window.open で実装する理由があるのなら、仕方のないことだと思いますが…。

noname#119957 · Answer

ぜひ、「W3C バリデータ」を使用してみてください。そうすれば、HTMLの記述をチェックしてくれますよ。便利ですよ^^
link:visitedに関しては、おっしゃることの意味が良く理解できません。
これらは、ブラウザの機能ですよね。ブラウザの表示は、HTMLを上から下に解釈して表示するだけなのですよね。そして、HTMLを読み込むタイミングも決まっていますよね。
個人的には、HTML4.0もxhtml1.0 も1.1もxmlもいずれを選択するかは、現在のところそれほど問題ではないと思います。

think49 · Answer

#3さん、フォローありがとうございます。

> すみません、ご本人の投稿と数分で被ってしまった様です。
気になさらないでください。
私だけのアドバイスでは偏りが出ることもありますし、様々な意見が寄せられるのは有意義なことだと思います。

RE: 質問者さん
もうちょっと自分で調べることはしてもいいんじゃないかな、とは私も思いました。
「お勧めかどうか」になってくると宗教的な要素も絡んでくるので、必ずしも一つの解が導き出されるわけではないですが、
ユーザビリティ、アクセシビリティ、としてこうすべき、という判断基準はあります。
そうしたものは仕様書として公開されていたり、先人達がブログに書かれていたり、と既に多くの情報があります。

- 仕様書を見る
- キーワードをGoogle検索してみる
- 自分でHTML,CSSを書いて実験してみる
- 回答を得たら、その情報を元に自分で調べ、実験してみる (回答内容を自分で検証する時間が必要です)

このように、自分で調べてみるっていうのがどうしても必要になります。
そこで調べてみた中で「このブログの人は～と書かれていますが、自分は～だと思うのですが」という質問になれば、
もうちょっと回答しやすいんじゃないかと思います。

abril · Answer

すみません、ご本人の投稿と数分で被ってしまった様です。
失礼をご容赦下さい。
＃iGoogle…納得しました。

abril · Answer

横から失礼しますが。

> 「return false;」を削除するわけにはいかないのでしょうか？以前からなぜ「return false;」が必要なのか分かりませんでしたが、「return false;」はつけておいたままのほうがいいですか？

"return false;"のキーワードでググれば1ページ目で答えが得られると思いますが。

> http://www.google.co.jp/です。
> キーワード入力欄下の左横に「Googleニュース」という項目があり、
> （省略）
> ニュースへのリンクがあります（このリンクのことを言っています。）。

昨日質問を見た時点で私も「その」コンテンツの挙動を確かめましたが、「各ニュースをクリックすると別ウィンドウが開き」はせず普通に同ウィンドウ内での画面遷移が起きるだけですので、「“更新”ボタンを押さなくてもアクセス済みのリンクの色が青→紫色に」なるのは不思議でも何でもないです。
＃多分、No.1様も私と同様の検証結果だったので「該当しそうなリンクは見あたりませんでした。」と仰っていたのだと思います。
＃念の為そのコンテンツのソースもちらっと見ましたけど、各リンク部分は「target="_self"」と指定されてます。

それから、以下の様な補足が出てくるのを見る限り、No.1様の仰っている事が基本的にわかってらっしゃらない様です。

>> 「お勧めではない」ことを避けるスタンスなら、target="_blank"
>> も window.open もお勧めではないです。
> target="_blank"又は window.open以外で、おすすめは何ですか?

「ユーザの意志を無視して新しいウィンドウやタブで開かせる事自体が推奨されていない」のです。そういう意味では「（新規ウィンドウ・タブで開かせる）おすすめはない」もしくは「新規ウィンドウ・タブで開かせる様な仕様を設けない事をおすすめする」です。

> think49さんの「Transitionalにして」とは、以下のうち（又はそれ以外の記述）のどれのことを指しておられますか?　

HTML4.01だろうがXHTML1.0だろうが、Transitionalならどれでもです。それぞれの文法をチェックすれば”この件に関しては”同じである事が理解できる筈です。

> なぜ、think49さんはtarget="_blank"を使用する場合、Transitionalにすることを推薦されていますか？

Transitionalではtarget指定が「非推奨」ではないからです。それに「推薦」してるわけではなく「妥当」だと仰っています。その意味は随分違うと思います。

> <a href="http://www.yahoo.co.jp/index.html" onClick="window.open('http://www.yahoo.co.jp/index.html');return false;">テストです。</a>
> の代わりに推薦される記述の例を“具体的に記載”してもらえますか？それがないと、おっしゃっていることがストレートに伝わってきません。

理解力不足ですね。ちゃんと順序立ててこの様に仰っているじゃないですか。

1. ユーザの意志を無視して新しいウィンドウやタブで開かせる事自体が推奨されていない.。「お勧めではない」ことを避けるスタンスなら、その様な仕様自体を使わないのが望ましい。
2. target="_blank" がストリクトなDOCTYPEでは非推奨属性だかといってJavaScriptで代替するのは、単に「文法上エラーにならない」というだけで、本来ユーザビリティの面で非推奨である実装をしている事自体に何らかわりはない。
3. target="_blank"を使うなら、それが「非推奨」ではないDOCTYPEを選ぶのが妥当であろう。
4. 諸々承知してるけど、それでもどうしても新しいウィンドウを開いてウィンドウのサイズやらなにやらまでコントロールしたいんだったら、JavaScriptでも何でもご自由にどうぞ。それは制作者が決めること。

think49 · Answer

> 「return false;」はつけておいたままのほうがいいですか？

return false; を外してみてください。挙動が実感できると思います。
あと、「window.open return false」でぐぐってみてください。

> キーワード入力欄下の左横に「Googleニュース」という項目があり、「トップニュース」、「社会」、「国際」、「経済」、「政治」等のタブがあります。例えば、今なら「トップニュース」タブにの一番上に「米GMが10日に破産法管理下から脱却、新生GMの誕生へ」ニュースへのリンクがあります(このリンクのことを言っています。)。
おそらくiGoogleを使ってますね。
Googleアカウントにログインするとトップページが個人用のものに変化します。
Firebugでも使用して、HTMLソースを覗いてみてください。
ZDNetのガジェットを追加してみたところでは、普通に target="_blank" を追加してるだけでした。

> target="_blank"又は window.open以外で、おすすめは何ですか?
何も指定しない、です。

<a href="http://www.yahoo.co.jp/index.html">テストです。</a>

> 「Transitionalにして」とは、DOCTYPEスイッチを...
「システム識別子あり」でHTML/XHTMLはお好きなのでいいんじゃないかと。
XML宣言はIE6サポートするなら、標準準拠モードで動作させるために「なし」です。

> なぜ、think49さんはtarget="_blank"を使用する場合、Transitionalにすることを推薦されていますか？
#1にも書きましたが、ユーザビリティが低下するからです。
訪問者はタブを開く挙動を自分で選択したいと思っています。
「target=_blank ユーザビリティ」でぐぐってみてください。

> できれば、width、height等を指定してタブブラザでウインドウを開きたいのですが (それ以外の対象方法もあれば、お教えください。)。
不可能です。
タブで開くか、ウインドウで開くか、はブラウザの設定が常に優先されます。
width, heightの指定でさえ、ブラウザの設定によっては無視されます。(ちなみに、私の設定だと常にタブで最大化して開きます)
その挙動はユーザが選ぶものだからです。
「window.open ユーザビリティ」でぐぐってみてください。中でも、MDCの「ユーザビリティの問題」がわかりやすいと思います。

わからない内容はキーワードを元にいろいろ検索してみるいいと思います。

“更新”ボタンを押すまではリンクの色が青→紫色になりません。

> <a href="

この回答への補足

ぜひ、「W3C バリデータ」を使用してみてください。

#3さん、フォローありがとうございます。

すみません、ご本人の投稿と数分で被ってしまった様です。

横から失礼しますが。

> 「return false;」はつけておいたままのほうがいいですか？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング