- ベストアンサー
style属性を使って擬似クラスを表現することは可能ですか？
CSSの読み込み方には3通りあります。 1)<head>～</head>内にstyle要素をマークアップする。 2)外部CSSファイルをHTMLに読み込ませる。 3)任意のタグにstyle属性を指定する。 そこで質問なのですが、3)のstyle属性で擬似クラスを指定する事は可能でしょうか？ 1)と2)の方法であれば、 div a:link { color : #fff ; background : blue ;} div a:visited { color : #fff ; background : purple ;} div a:hover { color : #fff ; background : aqua ;} div a:active { color : #fff ; background : purple ;} のように指定すればよいだけですが、 3)の方法、つまりstyle属性を用いて擬似クラスの指定の仕方が分かりません。 宜しくお願いします。
- doublebeefcake
- お礼率74% (26/35)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
おそらくCSSだけではできないのでは。 http://www.kanzaki.com/book/html/spec-nofollow.html#inline-style こちらに少し古い時点での草案が載っていますが、この <a href="http://foo.com" style="{color: blue} :hover {color: green}"> と言う書式をIE6とFirefox1.5で試してみたけど駄目でした。 javascriptとかで処理するんじゃないですかね。必要な人は。
その他の回答 (2)
- mognol_n
- ベストアンサー率61% (8/13)
結論から言うと、タグのstyle属性では擬似クラスの指定は不可能だったと思います。 質問者さんが何故そこまでstyle属性にこだわるのかがわかりませんが、 例えば複数のaタグにそれぞれ別々の内容の擬似クラスを指定したい場合は、 class属性やid属性を用いて指定するのが一般的ではないでしょうか？
お礼
普段は外部スタイルシートでclass属性,id属性を使って指定していますが、style属性による指定に関する今回の疑問が解決してすっきりしました。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
なにがしたいかいまいちわかりませんが、 こういうコトでしょうか？ <html> <head> <style type="text/css"> .hidden{ display:none; } </style> <script language=javascript> function redhidden(){ var divs=document.getElementsByTagName("*"); for (var i=0;i<divs.length;i++){ if(divs[i].style.color=="#ff0000") divs[i].className="hidden"; } } </script> </head> <body> <div style="color:#ff0000;">aaa</div> <div style="color:#00ff00;">bbb</div> <div style="color:#0000ff;">ccc</div> <div style="color:#ff0000;">ddd</div> <form> <input type="button" value="赤い段落を隠す" onClick="redhidden()"> </form> <body> </html>
補足
説明不足ですみません。 質問の趣旨は、HTML文書中にstyle属性を記述して、その値に擬似クラスを指定する事は可能かどうか。 可能な場合は、どのような記述をすればよいのかという意味です。 例えば、HTML文中にリンクテキストを記述します。 例） <div> <a href="URI" title="リンクテキスト">リンクテキスト</a> </div> ブラウザで表示すると、画面上に「リンクテキスト」の文字が表示されます。 このリンクテキストにCSSで装飾を施すとします。 CSSの適用方法は、【style属性】を用いることとします。 従って、外部ファイルとしてCSSを読み込む方法は今回は考慮しない事とします。 → <link rel="stylesheet" type="text/css" href="style.css" /> また、style要素による装飾も考慮しない事とします。 ↓ <head> <title>...</title> <style> a:hover { background : silver ; } </style> </head> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ あくまで今回は【style属性】による装飾に限定します。 【style属性】を用いて、仮にリンクテキストの背景を黄色にしたいと思います。 ▼source <div> <a href="URI" title="リンクテキスト" style="background : yellow ;">リンクテキスト</a> </div> 背景は黄色になりました。 では、このリンクテキストに、マウスカーソルが重なっている状態のときにだけ背景をsilverにするにはどうしたらよいか。 ※ただし、JavaScriptを使用せず、CSSのみ用いることとする。 この場合に用いるのが、CSSの擬似クラスだと思います。 しかし、通常の装飾（単に背景を黄色にするなどの）はstyle属性で指定できても、擬似クラス（a:hover,a:active等）をstyle属性の値として指定することが可能かどうか疑問に思いまして、今回質問させていただきました。宜しくお願いします。
関連するQ&A
- 擬似クラスがupできない
こんばんは。どうしても擬似クラスがupできません。 ＝01.css＝ <style type="text/css"> a:hover{ font-weight:bold; text-decoration:none; color:red; } </style> ＝index.html＝ <html> <head> <title>○▲□×</title> <link rel="stylesheet" href="01.css" type="text/css"> </head> どうして擬似クラスがupできないのですか？ どこか打ち間違いでしょうか？ hoverだけ使いたいので、それ以外は打つ必要ないと 思いますし、今後、他のスタイルも加えて行きたくも 思ってます。 どうぞよろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- インターネットエクスプローラー使用による疑似クラスについて
疑似クラスを利用し、「マウスカーソルをもってくると背景色が変わる」ということを、ＣＳＳで行ないました。 firefoxでは、疑似クラスの所にカーソルをもってきて、すばやく上下に動かしたところ、スムーズに背景色が変わりました。 しかし、インターネットエクスプローラーでは、疑似クラスの所にカーソルをもってきて、すばやく上下に動かしたら、背景色が変わるまでに少し時間がかかりました。いろいろと考え、試してみました。 結果、インターネットエクスプローラーでは、疑似クラスの所にマウスカーソルをもってきたら、左下に一瞬ＵＲＬが表示されたあと、「ページが表示されました」と表記されることが原因だとわかりました。firefoxでは、疑似クラスの所にマウスカーソルをもってきても、左下には常にＵＲＬが表示されます。 そして、「ページが表示されました」と表記される原因が、ＣＳＳの“background属性”にあることを突きとめました。 以下に、かんたんなＨＴＭＬとＣＳＳを作成しました。 -------------------------------------------------------------------- ＨＴＭＬ ---------------------------------------------------------------------- <div id="category"> <a href="http://www.～">test1</a> <a href="http://www.―">test2</a> <a href="http://www.＝">test3</a> <a href="http://www.△">test4</a> <a href="http://www.×">test5</a> </div> ------------------------------------------------------------------- ＣＳＳ ------------------------------------------------------------------- #category{ margin:0px; padding:0px; }（マージンとパッディングを0に指定） #category a{ display: block; background-image:url("縦、横１０ｐｘの画像"); background-repeat:no-repeat; background-position:left; padding:5px 12px; width:140px; border: 1px solid red; background-color:blue; text-decoration:none; } （幅１４０ｐｘ。疑似クラスの所にマウスカーソルがのっていない時、外枠は赤。背景色は青。左側に１０×１０ｐｘの画像を表示）。 #category a:hover{ display:block; background-image:url("縦、横１０ｐｘの画像"); background-repeat:no-repeat; background-position:left; background-color:green; border:1px solid black; text-decoration: none; } （疑似クラスの所にマウスカーソルがのっている時、外枠は黒。背景色は緑。左側に１０×１０ｐｘの画像を表示）。 -------------------------------------------------------------------- 「background属性」を消してしまえば話は早いのですが、左下にＵＲＬを表示しつつ「background属性」で画像を埋め込むことは可能でしょうか？ お力添えのほど、よろしくお願いいたします。
- ベストアンサー
- CSS
- クラス属性？
CSSの外部呼出しで、 A:link { color: #0033cc; } A:visited { color: #0033cc; } A:active { color : red; } 上記をdivでまとめたいのですが、記述の仕方がわかりません。 そしてもう１パターン A:link { color: #FFFFFF; } A:visited { color: #FFFFFF; } A:active { color : red; } というものもdivでまとめて、外部呼出しのCSSファイルに記述したいのですが、可能でしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- 外部CSSの記述方法
色々調べたのですが行き詰まってしまったので質問させて下さい。 ＨＰのそれぞれのページの文字色や背景が違う為BODYをクラス分けしてCSSに記述しています。 ページによって違うリンク色等はそれぞれのページの<HEAD>内で指定していますが 外部CSSから指定する場合クラスを定義すれば出来ますが下記のBODYの中には どのように記述すれば良いか解かる方がいらっしゃいましたらご回答宜しくお願い致します。 (説明ベタですみません。要は外部CSSのそれぞれのBODYのクラス内に リンク色等の記述をしたいのです。(;^_^A ) 外部ＣＳＳ BODY.top{ color:#2E8B57;background-color:#FFEAFA; } BODY.menu{ color:purple;background-color:#FFFFFF; } top.htmlの<HEAD>内の下記を外部ＣＳＳのBODY.topの中に入れたい A:visited { text-decoration:none;color:#CD1076;} A:active { text-decoration:none;color:blue;} menu.htmlの<HEAD>内の下記を外部ＣＳＳのBODY.menuの中に入れたい A:visited { text-decoration:none;color:purple;} A:active { text-decoration:none;color:#E1ACDA;}
- ベストアンサー
- CSS
- A:link等の指定をstyle属性でタグへ埋め込みたい
CSSで、 A:link A:visited A:active A:hover の指定をする際、別ファイルのスタイルシートを読み込む等の方法ではなく、 style属性を使って直接タグ内へ埋め込むことはできるのでしょうか。 例えば、 <table style="A:link { font-size: 99 }"> のような使い方をしたいのですが・・・うんともすんともです・・・
- ベストアンサー
- HTML
- HP作成。スタイルの付け方を教えてください。
超初心者です。 cssのコツが理解できずに困っています。 HPの幅800pxで作っています。 <p style="background-color:#1976D2; color: ffffff;">××××</p></div> この文字列の:#1976D2の色のついた背景だけフルサイズで、文字は800pxにしたいのですが、クラス指定がよくわかりません。 どうぞよろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- <Style>～</Style>
<Style>～</Style>を使いたいのですが、 使い方として以下の注意書きを見ました。 </head>タグの直前に<Style>キーワード</ Style> をコピー&ペーストしてください。 CSSは詳細なレイアウトであって文字は入れられるかどうか知りたいのですが。 多分入れられないと思うのですが。 例えば「あけましておめでとう。」の文字を <head> <style type="text/css"> <!-- div{color:#f00} -->あけましておめでとう。 </style> </head> とかできるかどうかと思ったので。 上記の意味として <head>～<Style>単語</ Style></head>で使い方はあっているのでしょうか。
- 締切済み
- HTML
- スタイルシートでアイコン(.ico)を
スタイルシートでアイコン(.ico)を こんにちは。 お気に入りの左側などに、 アイコンを表示させるときは、 HTMLだと<head>～</head>のなかに <link rel="shortcut icon" href="---.ico"> を打てば出来るようなのですが、 全てのページにこれを打つのも手間がかかるので、 スタイルシートで一気にやってしまいたいと思います。 どのように打てばいいのでしょうか。 一応、全てのページに <link rel=styleseet" href="---.css" type="text/css" /> と打ってあるので、全てのHTMLファイルと CSSファイルは連動(?)している状態です。 ちなみに今のCSSファイルは 下のような感じです。 @charset "shift_jis"; body { background-image: url("---.bmp"); font-family: ---; color: #------; text-align: ----; } a:link { color: #------; } a:visited { color: #------; } a:active { color: #------; } a:hover { color: #------; } a:focus { color: #------; } div.box_a { width: ---px; margin-left: auto; margin-right: auto; } div.box_b1 { width: --%; height: ---px; float: left; } div.box_b { width: --%; height: ---px; overflow: auto; } div.box_c { width: ---px; margin-left: auto; margin-right: auto; } img { bprder-style: -----; border-width: -px; } img { border-style: ------; } 上のようなCSSファイルのどこに、どのように書き込めばよいのでしょうか。 ご回答よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシート…
たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので… スタイルシートで、画像を固定し、尚且つ、 リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、 どのようにすればよいのでしょうか？ 一応、 <style type="text/css"> <!-- body { background-image : url("画像のURL"); background-attachment: fixed; background-position: 100% 0%; background-repeat: no-repeat ; } a{text-decoration:none;} a:link {color:#色;} a:active {color:#色;} a:visited {color:#色;} a:hover {color:#色;} --> </style> じゃないかな…？と思って、試してみたのですが、画像は固定できてるんですが、 リンクの文字色は変わりませんでした…。 アドバイスお願いします！
- ベストアンサー
- HTML
お礼
私も <a href="URI" style=":hover : silver ;">リンク</a> とか <a href="URI" style="a:hover : silver ;">リンク</a> など試してみたのですが駄目でした。 普段は外部スタイルシートで全て済ましているので、style要素による指定はしていませんが、cssの復習をしている時に、ふとこの点が疑問に思い、質問させていただきました。 問題点に確信がもてました。ありがとうございました。