BODY内でa:hoverのCSSを使用する方法とは？
- CSSを使いたい条件下で、BODY内でa:hoverのCSSを使用する方法を教えてください。
- <style type='text/css'>宣言をBODY内に記述した場合の現象や挙動についても教えてください。
- オンマウスした時にフォント色と画像の変化をするために、BODY内でa:hoverのCSSを設定したいです。他にも可能な方法があれば教えてください。
- ベストアンサー
BODY内にCSS「a:hover」を使いたい
「HEAD内の書き換えは不可」 「スクリプト（JavaScriptなど）言語使用不可」 という条件がある中で、 オンマウスした時にフォント色と画像の変化をしたいのです。 BODYタグ内で、スタイルシートの「a:hover」を設定する方法、 その他でも可能になる方法があれば教えてください。 また、<style type="text/css">宣言はHEAD内にということですが、 無理やりBODY内に<style type="text/css">宣言した場合 どのような現象が起きるのでしょうか？ （実際にIE6でこの方法をやってみましたが、レイアウトのくずれやおかしな挙動はありませんでした） よろしくお願いします。
- peche_moon
- お礼率83% (5/6)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> 「HEAD内の書き換えは不可」 body要素内しか編集できないのですね。 > 「スクリプト（JavaScriptなど）言語使用不可」 これはどういう制限でしょうか。 イベント属性すら利用できないと考えてよいのでしょうか。 :hover 疑似クラスに相応する効果を実現するには、 :hover 疑似クラスを指定できる形でスタイルシート指定をする ⇒ つまりセレクタを用いた指定（style 要素、外部スタイルシート）を行うか、 onmouseover, onmouseout などのイベント属性を指定する必要があります。 style 要素は head 要素内、外部スタイルシート参照も link 要素あるいは style 要素内記述となるので head 要素内記述ができないと実現できません。 しかしながら、以下に示すような実態もあります。 > また、<style type="text/css">宣言はHEAD内にということですが、 > 無理やりBODY内に<style type="text/css">宣言した場合 > どのような現象が起きるのでしょうか？ 多くのUAは、たとえ style 要素が body 要素内にあったとしても、style 要素を無視せずに解釈して適用します。 ※ この表現は厳密なものではありません。 つまり、 > （実際にIE6でこの方法をやってみましたが、レイアウトのくずれやおかしな挙動はありませんでした） 適用されることが多いです。 これはあくまでUAが拡大解釈しているだけに過ぎないので保証されることではありません。 ただし、大抵のモダンブラウザでは現在、実際に適用されるので、何らかの理由で head 要素内を編集できない場合には body 要素内に style 要素を記述するような妥協策もあります。 たとえば、私が以前カスタマイズを依頼された「したらばBBS」において、結果的に body 要素内に style 要素を記述する形で対応したケースもあります。 別件ですが、XHTMLで style 要素や script 要素の内容をコメントアウトした場合、仕様上は内容を無視するようになっていますが、実際はUAが拡大解釈して、無視されずに適用されることがあります。 文書型定義に反することは必須ですが、body 要素内に style 要素を記述するのも妥協策のひとつではあります。 その場合は、もしも body 要素内の style 要素が適切に解釈されなかったときを考慮し、style 要素の内容をコメントアウトすべきです。 仮にXHTML文書であっても、上記の通り、実際には適用される場合が多いのでどうしてもという状況であれば妥協策に転じるのもアリだと思います。 本来は、 > 「HEAD内の書き換えは不可」 > 「スクリプト（JavaScriptなど）言語使用不可」 > という条件 を改善することを考えるべきなのですが。
関連するQ&A
- CSSのA:hoverについて
次のようなXHTMLを、IEで表示すると、問題ないのですが、 FireFox2やオペラで表示すると、○○○○○の部分にマウスを乗せると 赤く反転してしまいます。 なぜでしょうか？ test.html－－－－－－－－－－－－－－－－－ <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>テスト</title> <style type="text/css"> <!-- body { font-family:'ＭＳ 明朝','明朝','ＭＳ ゴシック'; background-color:#FFFFFF; } A:link,A:active,A:visited { text-decoration:underline; color:#0000FF; } A:hover { text-decoration:underline; color:#FF0000; } --> </style> </head> <body> <div align="left"> <b>（タイトル）</b></div> <b>見出し１</b><a name="見出し１"/> ○○○○○○○○○（<a href="#">▲▲▲▲▲▲</a>××××××<br/> </body> </html>
- ベストアンサー
- HTML
- テーブル内a:hoverでちらつく[html]
テーブルにテキストを書き、そのテーブルにマウスが当たったらテキストの文字位置をずらすという方法でホームページを作っているのですが、テーブル内をマウス移動させると、文字がちらついてしまいうまくいきません。 ソースは以下です。 <HEAD> <style type="text/css"> <!-- .box a{display:block;} .box a:hover {position: relative; top: 5px; left: 5px;} --> </style> </HEAD> <BODY> <table> <tr> <td class="box"><A href="#">テスト1</A></td> </tr> </table> </BODY> 何が間違えているのかわからず困っています。 ご回答お待ちしております。お願いします。
- 締切済み
- ホームページ作成ソフト
- a:hover時のみ、divの背景を変えたい
index.htmlで、ロゴにオンマウスした際に、ページの背景の透明度を変えたいのですが、どう記述していいか分からず困っております。 イメージとして、まずロゴは縦横300pxくらいの大きさで、上下左右センタリングされた位置にあるのですが、ロゴにオンマウスした時に、画面いっぱいの背景が半透明から不透明に変わる…といったものを作りたいです（画像添付しましたが、分かりにくかったら申し訳ないです）。 同じ要領で、ごく簡単に書いたタグがこちら（↓）なのですが、 <html> <head> <style type="text/css"> div{ background-color: #CCCCCC; width: 100px; height: 100px; opacity: 0.5; filter: alpha( opacity=50 ); /* IE */ } a:hover{ opacity: 1; filter: alpha( opacity=100 ); /* IE */ } </style> </head> <body> <div><a>リンク</a></div> </body> </html> div内のa領域にオンマウスした時にだけ、背景の透明度を変えたいのですが、動きません…。しかし、上記の例ですと、たとえ動いてもこれではa要素の背景の透明度しか変わらない気もします。 また、div :hoverは、div領域にオンマウスした時から背景が変わってしまうので、こちらは避けたいです。 今回は子要素から親要素の変更を指定する際の問題だと思ったので、セレクタを組み合わせて色々試したり、検索等もしましたが、どうしても分からないので質問させてください。
- ベストアンサー
- CSS
- HPの文字の大きさを変えるCSSがうまくいきません
ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- IE7でのhoverについて
IE7からhoverがa以外の要素にも適用できるようになったという情報を見たのですが 以下のような記述だとhoverが機能しませんでした。 （Firefoxでは以下の記述で機能しました） <html> <head> <style type="text/css"> .test {width: 120px; height: 120px; background-color: #FFFFFF;} div.test:hover {background-color: #FF0000;} </style> </head> <body> … <div class="test"> 文章がここに書いてあります。 </div> … </body> </html> IE7では機能しないような何かマズイ記述方法をしてしまっているのでしょうか？ ちなみにサイトの仕様上htmlの構造はいじることができません。 足りない部分は別途補足させて頂きますのでご教授の程よろしくお願いします。
- ベストアンサー
- HTML
- a:hoverの下線指定が反映されない
htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。 <style type="text/css"> <!-- img { vertical-align: bottom; } img { border-style:none; } a:hover img{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: “alpha( opacity=80 )”; } a{ text-decoration:none;} a:hover { text-decoration:underline;} --> 当方初心者でして詳しい方にご教授いただきたいです。 宜しくお願いいたします。
- 締切済み
- HTML
- :hoverで他の要素の値を変更できますか？
CSSで擬似要素「:hover」をつけることで従来Javascriptで行なわれていたオンマウス処理を実現することができますが、オンマウスした要素以外の要素に別のスタイルを適用することって可能でしょうか？ ＜html＞ <div id="one">one</div> <div id="two">two</div> ＜CSS＞ #one:hover { color: red; } 上の例では#oneがオンマウスすると文字色がredに変化しますが、同時に#twoの文字色をblueにしたいのです。無理ならJavascriptで代用しますが、オンマウス処理みたいにCSSでできた方がスマートかなと思うので、可能であればその方法を使いたいです。
- 締切済み
- CSS
- 外部ＣＳＳをかくには。
ＨＰのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部ＣＳＳでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY { letter-spacing:7px; line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。
- ベストアンサー
- HTML
- 特定の画像リンクだけhover時の文字色を変更
特定の画像リンクにだけスタイルを適用したいと思っています。 特定の画像リンクにクラス名“diet”と付けて、そのリンクにだけ hover 時の文字の色を赤色にしようと考えています。 その場合の記述の仕方を教えてください。 次のように記述しているのですが、うまくいきません。 HTMLに直接書き込む方法にしています。 <head> <style type=”text/css”> <!- a.diet :hover {color: red;} -> </style> </head> <body> <a href="アドレス"><img src=画像のアドレス></a> </body> （必要なところだけ抜粋しています） どこが間違っているのでしょうか？ 何度やってもうまくいません。 クラスの書き方がよくないのでしょうか？ できれば、HTMLに直接書き込む場合と、CSSを利用する場合の、２つの書き方を教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- HTML
- CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- ベストアンサー
- HTML
お礼
なるほど、大変勉強になります。 イベント属性も利用できないといった条件でしたので、 実際のケースもいただけて非常に助かりました。 スマートで丁寧なご回答どうもありがとうございました！