現在ホームページを作成中です。
cssで擬似クラス「:focus」を使った時の挙動について困っているので質問させて頂きます。
CSSを使って、サイト内でとあるサムネイルをクリックした時に、そのサムネイルの横に大きく画像を表示させようと思っています。
http://c-brains.jp/blog/wsg/08/06/27-210059.php
こちらのサイトを参考にして作ったところ、FirefoxやIEでは期待したとおりに動いてくれたのですが、chromeでは残念ながら反応がありませんでした。
そこで何が原因かを調べるために、簡単なところから解決していこうと思い
htmlに
<a href="#">あいうえお</a>
と記載し、cssに
a:link {
color:black;
}
a:focus {
color:white;
background:blue;
}
と、記載してみた処、リンクをクリックすればFirefoxやIEでは期待したとおりに文字色や背景色が変わりますが、chromeでは反応がありませんでした。
chrome自体が「:focus」に対応してないのかと思い、色んなサイトで調べてみましたが、数年前の記事では対応しているように見えました。(最近の記事は見つかりませんでした)
そこで質問です。もしかして、バージョンが上がって、chromeでは「:focus」に対応しなくなったのでしょうか。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
フォーカスについてちょっと調べてみたのですが、
http://msdn.microsoft.com/en-us/library/ie/ms534 …
MSDNによると、<a>要素は「focus可能」と「tabStop可能」の2つのプロパティを持ち、「<a>はデフォルトで両方がyes」になっています。
MDNでは言及されていないようです。
Webkitはどこに書かれているのかわかりません。。。 http://trac.webkit.org/wiki
W3Cのドキュメントにも、<a>や<input>などをクリック操作、タブキー操作したときのデフォルト動作として、focusについての言及はないようです。
http://www.w3.org/TR/1999/REC-html401-19991224/i …
推測ですが、Webkitのみ「<a>はデフォルトでfocus可能要素であり、クリックではfocusしないがtabキーでfocus可能」となっていて、
Webkit以外が、「<a>はデフォルトでfocus可能要素であり、クリックでもtabキーでもfocus可能」となっているようです。
<input>は全てのブラウザで、デフォルトでfocus可能要素であり、クリックでもtabキーでもfocus可能となっているようでした。
W3Cの言語仕様にも書かれていないため対処療法(今後のブラウザアップデートで動作が変わる可能性がある)となりますが、tabindexを指定してみてください。
この方法なら、JavaScriptではなくHTMLで指定できるようです。
<a href="#" tabindex="0">
tabstopの操作を指示する物ですが、多くのブラウザがtabstopとfocusを連動しているようです。
また、webkitに関しては、<a>をクリックをした時のフォーカス処理をどう扱うかが変わるようです。
tabindexを0にすると、HTMLに書かれている順番通りにtabstopの順番が決定されます。(tabstopの動作はtabindexを書かない時と同じままで、focusの動作のみが変わる。)
===============
検証
<a href="#" tabindex="0">anchor-0</a>
<a href="#" tabindex="0">anchor-1</a>
<a href="#">anchor-2</a>
<a href="#">anchor-3</a>
<a href="#">anchor-4</a>
anchor-1をクリックしてtabキーを押すとanchor-2がフォーカスされるので、anchor-1のクリックによりanchor-1にフォーカスが当たった事が確認できます。
しかし、anchor-3をクリックしてtabキーを押すとanchor-0がフォーカスされるので、anchor-3のクリックではanchor-3にフォーカスが当たっていない(全ての要素からフォーカスが外れる)ことが確認できます。
スタイルシートで a:focus{} を指定しておけば、フォーカスに合わせてスタイルが適用されることも確認できます。
-----------
Netscape、Gecko(Firefox)、Trident(IE)、Presto(旧Opera)、フィーチャーフォンなどの動作から考えれば、Webkitだけが特殊だと思いますけどね。
(全てのブラウザが異なる仕様のもとで動作しているそれぞれに正しい動作です。)
No.3
- 回答日時:
No.2です。
ですからactiveだけに指定すれば良いです。
同じ優先順位、詳細度でしたら後出のもので上書きされます。chromeはactiveだとfocusでないと排他的に解釈しているだけです。
a{display:inline-block;width:10em;text-align:center;}
a:link{background-color:red;}
a:visited{background-color:yellow;}
a:focus{background-color:lime;}
a:hover{background-color:aqua;}
a:active{background-color:black;}
とすると、キーボードでタブやショートカットキー(ALT+A)などで移動したりして試すと良いでしょう。
<p><a href="./A.html" accesskey="A" tabindex="1">A</a></p>
<p><a href="./R.html" accesskey="J" tabindex="2">J</a></p>
<p><a href="./J.html" accesskey="R" tabindex="3">R</a></p>
<p><a href="./W.html" accesskey="W" tabindex="4">W</a></p>
スタイルシートを身につけるときは、プロパティなどよりまず先に
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
を徹底的に身につけましょう。
だったら、そもそも、
<div id="album">
<ul>
<li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li>
そんなHTML書かなくてもCSSだけで良いですよね。これじゃ検索エンジンに意味通じないし・・
No.2
- 回答日時:
>サイト内でとあるサムネイルをクリックした時に、
ポインターを乗せたときは、:hover、クリックでアクティブなときは:active擬似要素ですよ。focusはキーボードなどで対象となったときです。
よって、ナビゲーション内のリンクでしたら
nav ol li a:visited{}
nav ol li a:link{}
nav ol li a:focus,nav ol li a:hover{}
nav ol li a:active{}
とこの順番、(:linkと:visitedは排他的ですから順不同)
で記述します。HTML4の場合はdiv.nav ol li:linkですかね。
ちゃんとしたものを参考にしましょうね。
お返事ありがとうございます。
focusは本来タブキーとかで対象に取った時の挙動なのですね。
参考にしたサイトだとクリックで対象に取った時に表示するような説明でしたので、勘違いしてしまいました。
今後気をつけていきます。
No.1
- 回答日時:
キーボードのタブキーを使ってフォーカスを当ててみてください。
chromeは、クリック操作ではフォーカスが当たらないか、clickの後にフォーカスが外れるようです。
代替案はJavaScriptで特定のclassを付けるなどでしょうか。CSSだけでは思いつきません。
お返事ありがとうございます。
そうですね、クリックした時に一瞬だけ大きい画像が表示されるのですが、すぐに消えてしまって何故だろうと思っていました。
CSSだけでは難しいということですので、少し苦手ですがJavaScriptで対応してみます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a href="#" …>の意味を教えて...
-
URLでEXEを呼出した際の、引数...
-
html メールリンクにて自動ファ...
-
ある一定時間操作していない場...
-
HTMLソースからURLだけを抜き出...
-
コードの意味がわからないです。
-
過去ログのタグを作りたいので...
-
リンクを選択すると現れる点線枠
-
下線(アンカー)の表示を特定...
-
javascriptとApacheの設定
-
bodyにidをつける理由は何ですか?
-
ウィンドウ名の設定
-
base64encodeでの文字化けについて
-
openerの関係が崩れてしまった...
-
iframeの中から親ページをスム...
-
cssにjavascriptを入れる?呼び...
-
ウインドウの後ろに隠れている...
-
HTML文でiframe srcで参照表示...
-
JavaScriptでiframeの内容を「...
-
日替わりメッセージの表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a href="#" …>の意味を教えて...
-
相対パスと絶対パスの速度
-
フレームだけ閉じる方法ありま...
-
pythonのWebスクレイピングでfi...
-
html メールリンクにて自動ファ...
-
HTMLソースからURLだけを抜き出...
-
個別にハイパーリンクの色を指...
-
<a href>での背景色について。
-
リンクに飛ばない・・・
-
プルダウンメニューからリンク...
-
mailto + 変数名
-
target="_blank"
-
ある一定時間操作していない場...
-
一つの行にURLが複数ある場合の...
-
ページ全体にリンクを設定する...
-
時間によってリンク先を変える...
-
リンクを選択すると現れる点線枠
-
HTML内に記載された画像のURLを...
-
次のHTMLが表示されたものについて
-
アンカーをクリックしても遷移...
おすすめ情報