「HEAD内の書き換えは不可」
「スクリプト(JavaScriptなど)言語使用不可」
という条件がある中で、
オンマウスした時にフォント色と画像の変化をしたいのです。
BODYタグ内で、スタイルシートの「a:hover」を設定する方法、
その他でも可能になる方法があれば教えてください。
また、<style type="text/css">宣言はHEAD内にということですが、
無理やりBODY内に<style type="text/css">宣言した場合
どのような現象が起きるのでしょうか?
(実際にIE6でこの方法をやってみましたが、レイアウトのくずれやおかしな挙動はありませんでした)
よろしくお願いします。
No.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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1から100までの自然数のうち、2...
-
超音波で洗脳。
-
CSSのセレクタに指定するbodyと...
-
smallにtext-allignが効かない
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
aの中にspan
-
リンク付き画像を右よりに表示...
-
aタグ 中央寄せ
-
cssで好きな位置に好きなボック...
-
<div>でレイアウトすると上下に...
-
html5で右揃え、方法は?
-
初歩的な質問です。<div>のwidt...
-
あるタグが反応しません...
-
HTMLで <p>~</p>内で2回以...
-
border: noneでボタンの境界線...
-
<object>
-
<br />と<br>は同じ意味ですか?
-
Bootstrap レスポンシブ textarea
-
imgタグをそのまま使うことは正...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報