CSSについて

質問

CSSのみでフォトアルバムを作りたいと思っており
http://c-brains.jp/blog/wsg/08/06/27-210059.php
を参考に制作しているのですが、何故かChromeやsafariでは上手く表示されません。
（クリックすると一瞬画像は現れますがすぐ消えてしまいます）
:active :focus部分が上手く作動していないのだと思うのですが
対処法が見つかりません。
上手く表示できない理由や良い対処法があればアドバイスお願いします。

回答No.3

think49 · ベストアンサー

#2 です。対応法が見つかりました。

tabindex属性を指定すれば、フォーカスできるようになります。(HTML5 規定)
http://www.html5.jp/tag/attributes/tabindex.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#sequential-focus-navigation-and-the-tabindex-attribute

http://jsbin.com/abewa3/2 にサンプルを置きました。

# もう質問者さんは見ていないようですね…。

お礼

返答が遅くなり申し訳ありませんでした。
対応法ありがとうございます。
おかげさまで改善できることができました。
HTML4.01で作っているので心配だったのですが
調べてみるとHTML4.0以降は　tabindex属性が使えるらしく
無事に動作しました。
何故tabindex属性を入れることによってwebkitで動作できるようになったのか　いまいち理解出来ていないのですが
いろいろと応用も利きそうなので　いろいろと調べてみたいと思います。
本当にありがとうございました。

回答No.2

think49

確かに focus しないですね。
CSS のみで解決するなら 疑似クラスtarget を使ってみてはどうでしょうか？
http://jsbin.com/abewa3/1

補足

返答が遅くなり申し訳ありませんでした。
2回も回答してくださり、ありがとうございます。
一応補足として疑似クラスtargetでは動作しないようです。
同じことで悩んでいる方もいると思いますので参考までに...

回答No.1

tracer

あんまり気にしたことなかったんですが、どうやらwebkit(chrome/safari）では、aタグをクリックしてもフォーカスが移動しない仕様みたいですね。試しにbuttonタグでも試してみましたが、結果は同じでした。雰囲気からするとCSSだけで実装するのは難しいんじゃないんでしょうかね。そともあれ、自分も勉強になりました。

ひとつ提案なんですが、結局JavaScript使うんですが、head内に以下を追加するだけで、webkit(chrome/safari)でも動くようになるはずです。何やってるかっていうと、aタグクリックでfocusを受け取るように改めて指定しているだけです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript">$(function(){$("a").click(function(){$(this).focus();});});</script>

お礼

返答が遅くなり申し訳ありませんでした。
提案ありがとうございます。
JSは使う予定はないのですが最終手段として参考させてもらいます。
はじめてwebkitなるものをしりました。
まだまだ勉強不足なことが良くわかりました。
ありがとうございます。