「夫を成功」へ導く妻の秘訣 座談会

現在ホームページを作成中です。
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」に対応しなくなったのでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

フォーカスについてちょっと調べてみたのですが、


http://msdn.microsoft.com/en-us/library/ie/ms534 …(v=vs.85).aspx
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だけが特殊だと思いますけどね。
(全てのブラウザが異なる仕様のもとで動作しているそれぞれに正しい動作です。)
    • good
    • 0

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だけで良いですよね。これじゃ検索エンジンに意味通じないし・・
    • good
    • 0

>サイト内でとあるサムネイルをクリックした時に、


 ポインターを乗せたときは、: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ですかね。

 ちゃんとしたものを参考にしましょうね。
    • good
    • 0
この回答へのお礼

お返事ありがとうございます。
focusは本来タブキーとかで対象に取った時の挙動なのですね。
参考にしたサイトだとクリックで対象に取った時に表示するような説明でしたので、勘違いしてしまいました。

今後気をつけていきます。

お礼日時:2014/06/22 18:07

キーボードのタブキーを使ってフォーカスを当ててみてください。


chromeは、クリック操作ではフォーカスが当たらないか、clickの後にフォーカスが外れるようです。

代替案はJavaScriptで特定のclassを付けるなどでしょうか。CSSだけでは思いつきません。
    • good
    • 0
この回答へのお礼

お返事ありがとうございます。
そうですね、クリックした時に一瞬だけ大きい画像が表示されるのですが、すぐに消えてしまって何故だろうと思っていました。

CSSだけでは難しいということですので、少し苦手ですがJavaScriptで対応してみます。
ありがとうございました。

お礼日時:2014/06/22 18:12

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QFireFoxでfocus()が上手く動かない

javascriptを使って、
フォームのテキストエリアの入力文字数をチェックし、
オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。
ようにしようとしています。

IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。
どこがまずいのか、教えてください。

コード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function checkText(aText)
{
if (aText.value.length > 1) {
alert('サイズオーバーです');
aText.focus();
}
}
//-->
</script>
</head>
<body>
<form method="post" action="#">
<input type="text" name="fmTitle" onBlur="checkText(this)">
<input type="text" name="dummy">
</form>
</body>
</html>

javascriptを使って、
フォームのテキストエリアの入力文字数をチェックし、
オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。
ようにしようとしています。

IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。
どこがまずいのか、教えてください。

コード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/java...続きを読む

Aベストアンサー

要するに、イベント中に別イベントが発生するのがよろしくないのだと思います。
泥臭い対処ですが、イベントが終了してから実行するような感じでどうでしょうか
----------------------------------------------------------------
var TimeID=null;

function setFocus(fn){
clearTimeout(TimeID);
document.forms[0][fn].focus();
document.forms[0][fn].value +="";
}
function checkText(aText){
if (aText.value.length > 1) {
alert('サイズオーバーです');
//aText.focus();
// TimeID=setTimeout("setFocus('fmTitle')",300);//時間を置いて実行する
TimeID=setTimeout("setFocus('"+ aText.name + "')",300);

}
}

要するに、イベント中に別イベントが発生するのがよろしくないのだと思います。
泥臭い対処ですが、イベントが終了してから実行するような感じでどうでしょうか
----------------------------------------------------------------
var TimeID=null;

function setFocus(fn){
clearTimeout(TimeID);
document.forms[0][fn].focus();
document.forms[0][fn].value +="";
}
function checkText(aText){
if (aText.value.length > 1) {
alert('サイズオーバーです');
/...続きを読む

Qtabキーによるfocusの当たり方を制御したい

こんにちは,よろしくお願いします。
formが設置してあるページで,tabキーを押すとfocusが移動しますが,この挙動が,ブラウザによって違うことに気づきました。
ドリームウィーバーで,レコードの挿入ウィザードを使って簡単にフォームを設置することができますが,たとえば,この単純なページをInternet Explorerで開いて,1回tabキーを押してみると,focusは,ブラウザのアドレスバーに行ってしまいます。しかし,Firefoxでは,フォームの1番目のテキストボックスにfocusが当てられ一番最後にブラウザのアドレスバーなどに行きます。また,OperaではFirefoxと同様にフォームの1番目のテキストから始まって,ブラウザにはfocusが渡りません。
FirefoxやOperaのようにフォームの1番目の項目からfocusがあたるようにしたいのですが,どのようにすればよいのでしょうか?
gooやYahooを上記の3つのブラウザで開いてみると,必ず同じ挙動を示して,同じところからfocusが当たりますから,何らかの方法で制御する方法があるのだと思うのですが…。
tabindexを設定して,フォームの1番目の項目を1として,順に設定してみたりしたのですが,Internet Explorerでは,やはり一番先にブラウザにfocusが渡ってしまいました。
私の希望としては,Opera のように一切ブラウザにfocusが当たらないようにしたいのです。しかし,できないのであれば,Internet Explorerで一番最初にブラウザにfocusが当たらないようにする方法を教えていただきたいです。
当方,JavaScriptとPHPにてホームページを作成中です。よろしくお願いします。

こんにちは,よろしくお願いします。
formが設置してあるページで,tabキーを押すとfocusが移動しますが,この挙動が,ブラウザによって違うことに気づきました。
ドリームウィーバーで,レコードの挿入ウィザードを使って簡単にフォームを設置することができますが,たとえば,この単純なページをInternet Explorerで開いて,1回tabキーを押してみると,focusは,ブラウザのアドレスバーに行ってしまいます。しかし,Firefoxでは,フォームの1番目のテキストボックスにfocusが当てられ一番最後にブラウザのア...続きを読む

Aベストアンサー

ページ開いたときにtabindex=1のやつへフォーカスさせておくとか・・・

window.onload = function() {
document.getElementById('フォーカス先のID名').focus();
}

Qウインドウの後ろに隠れているページを前面に出したいんです。

「呼び出し元ページ」をA
「呼び出されるWINDOWページ」をB
と例えます。

「A」のリンクをクリックすると「B」がNEW WINDOWで開き、既に開いている「B」のリンクをクリックすると背面「A」が手前に来るjavascriptに挑戦しているのですが、うまく動作しないんです。
逆の順序「B」→「A」→「B」もです。
WIN IE6.0では成功しましたが、FIREFOX、ネスケ、Mac safariの最新verではダメでした。
すみません、誰か教えて頂けないでしょうか。

現在「A」「B」のページには下記の記述をしてます。
IEでは大丈夫でした。
別の方法でも良いのでお願いします。

■「呼び出し元ページA、test1.com」
<script language="javascript">
<!--
window.focus();
//-->
</script>

<A href=http://www.test2.com/ target=test>リンク</A>

■「呼び出されるWINDOWページB、test2.com」
<script language="javascript">
<!--
window.focus();
//-->
</script>

<A href=http://www.test1.com/ target=test>リンク</A>

「呼び出し元ページ」をA
「呼び出されるWINDOWページ」をB
と例えます。

「A」のリンクをクリックすると「B」がNEW WINDOWで開き、既に開いている「B」のリンクをクリックすると背面「A」が手前に来るjavascriptに挑戦しているのですが、うまく動作しないんです。
逆の順序「B」→「A」→「B」もです。
WIN IE6.0では成功しましたが、FIREFOX、ネスケ、Mac safariの最新verではダメでした。
すみません、誰か教えて頂けないでしょうか。

現在「A」「B」のページには下記の記述をしてます。
IEでは大丈...続きを読む

Aベストアンサー

簡潔すぎてすいませんでした。
子画面から親画面を呼んで前面に出すようにするには
window.opener.document.focus();
というシンタックスでできます(windowは省略可)。
また、window.opener.focus();という書き方でも可。
コードを書くことにはなれていらっしゃるようですので
やってみてください。

>WIN IE6.0では成功しましたが、FIREFOX、ネスケ、
>Mac safariの最新verではダメでした。

IEとMozillaやその他のブラウザでは仕様のちがいから
振るまいがおなじではありません。たとえば、IEでは
window.openerが読み取り専用プロパティではありませんが、他の仕様はちがいます。したがって、IEはヘンスク
リプトを組むとヘンなことになる可能性があります。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qモーダルダイアログウィンドウの改修方法

現在メンテナンスを担当しているWebアプリが
モーダルダイアログウィンドウ(showModalDialog)を多用しています。

このシステムは画面は jsp と javascript で、後ろはJavaです。


特に、伝票の入力処理では各行の商品IDを入力するときにモーダルダイアログウィンドウ
が開いて商品一覧が表示され、その中から商品を選択すると親画面に戻って商品情報が
表示される、という仕組みになっています。

親画面自体は開かれたままなので、画面遷移の考慮をしないで済む、という点では
シンプルなプログラムになっています。

ところがこの「showModalDialog()」、ブラウザによって若干挙動が異なったり、
将来廃止されるらしい、とのことで改造を迫られています。

モーダルダイアログウィンドウを使わない設計がいいとは思うんですが、
どのような仕組みに変えた方がよいでしょうか。

例えば画面遷移で商品を選択して戻るような仕組みにすると、途中まで入力した伝票情報を
すべて保持したまま遷移しなければなりません。

どのような仕組みがよいかご意見をお願いします。

現在メンテナンスを担当しているWebアプリが
モーダルダイアログウィンドウ(showModalDialog)を多用しています。

このシステムは画面は jsp と javascript で、後ろはJavaです。


特に、伝票の入力処理では各行の商品IDを入力するときにモーダルダイアログウィンドウ
が開いて商品一覧が表示され、その中から商品を選択すると親画面に戻って商品情報が
表示される、という仕組みになっています。

親画面自体は開かれたままなので、画面遷移の考慮をしないで済む、という点では
シンプルなプログラムになって...続きを読む

Aベストアンサー

以下サンプルとして超雑にかいておきます。
あくまでフローをみるサンプルなのではしょっているので
そのままでは実用には耐えないと思います
(たぶんjQueryあたりを使えばもう少しらくにいけるとおもいます)

<html>
<head>
<script>
function test(){
var list={"":"選んでね!","x":"x","y":"y","z":"z"};
var nWin=document.createElement("div");
nWin.id="nWin";
var n=document.createTextNode("test");
nWin.appendChild(n);

var s=document.createElement("select");
for(var i in list){
var o=document.createElement("option");
o.setAttribute("value",i);
o.appendChild(document.createTextNode(list[i]));
s.appendChild(o);
}
s.onchange=function(){
document.getElementById("hoge").value=this.value;
nWin.parentNode.removeChild(nWin);
};
nWin.appendChild(s);

document.getElementsByTagName("body")[0].appendChild(nWin);
}
</script>
<style>
#nWin{
height:300px;
width:300px;
background-Color:red;
z-index:2;
position:absolute;
top:100px;
left:100px;
}
.testarea{
width:100%;
height:100px;
}
.yellow{background-Color:yellow;}
.lime{background-Color:lime;}
.aqua{background-Color:aqua;}
</style>
</head>
<body>
<div class="testarea yellow">test</div>
<div class="testarea lime">
<input type="text" name="hoge" id="hoge">
<input type="button" value="test" onclick="test()">
</div><div class="testarea aqua">test</div>
</body>

nWinをwindow.openで処理しても同じような感じになると思います

以下サンプルとして超雑にかいておきます。
あくまでフローをみるサンプルなのではしょっているので
そのままでは実用には耐えないと思います
(たぶんjQueryあたりを使えばもう少しらくにいけるとおもいます)

<html>
<head>
<script>
function test(){
var list={"":"選んでね!","x":"x","y":"y","z":"z"};
var nWin=document.createElement("div");
nWin.id="nWin";
var n=document.createTextNode("test");
nWin.appendChild(n);

var s=document.createElement("select");
for(...続きを読む

Qwindow.Openをモーダルにできますか?

こんにちは。

表題のように、Window.Openをモーダルにしたいのです。

親フォームからサブフォームを開き、
そこでクリックで選択された値を親フォームに展開させる
という処理をしたいのです。

ShowModalDialogだと、そのサブフォームで入力された値を親フォームに表示することができないのではないか・・・と思っています。

どなたかいい方法をご存知の方、
どうか教えてください。
よろしくお願いします。

Aベストアンサー

> ShowModalDialogだと、そのサブフォームで入力された値を親フォームに表示することができないのではないか

IE依存でかまわない、ということですね。

showModalDialog() は、表示したダイアログから、戻り値を返すことができます。

ダイアログの方では、window.returnValue という window オブジェクトの
プロパティがあるので、これに値を設定します。

親の方では、

ret = showModalDialog(…);

として、その値を受け取ります。

複数の数値のやり取りがあるのであれば、その window.returnValue に設定
するものを Object や Array にすれば良いですね。


因みに表題の

> Window.Openをモーダルにしたい

はやめておいた方が良いです。

あるウィンドウを常に一番上に表示することは可能ですが、そのウィンドウが
複数あると破綻します。

モーダルなウィンドウが、動作として必要なのであれば、新しくウィンドウを
開くのではなく、切り替えるようにインターフェースを考え直すべきだと
思います。

# もしくは applet を作るか

> ShowModalDialogだと、そのサブフォームで入力された値を親フォームに表示することができないのではないか

IE依存でかまわない、ということですね。

showModalDialog() は、表示したダイアログから、戻り値を返すことができます。

ダイアログの方では、window.returnValue という window オブジェクトの
プロパティがあるので、これに値を設定します。

親の方では、

ret = showModalDialog(…);

として、その値を受け取ります。

複数の数値のやり取りがあるのであれば、その window.return...続きを読む

Qリンク時、親ウインドウを最前面に表示させたい。

子ウインドウのURLをクリックすると、親ウインドウのフレーム内に内容を表示させています。その際に、子ウインドウが最前面に来ているため、全画面表示していると親ウインドウのフレーム内が変わったことがわかりません。リンクの時に親ウインドウを最前面に表示させたいのですが、何か良い方法はありますか?

Aベストアンサー

小ウィンドウ側のリンクに、クリックイベントで親ウィンドウにフォーカスを与える指定を追加するのではいかがでしょうか。

<a href="hoge.html" target="main" onClick="opener.focus()">hoge</a>

このように、小ウィンドウのa要素に「onClick="opener.focus()"」を追加してやると、このリンクがクリックされた時に親ウィンドウにフォーカスを移すようになると思います。

参考まで。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSSでreadonlyの機能はありますか?

ASPにてCSSを使用しています。
inputタグを読取専用(readonly)にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。


人気Q&Aランキング