- ベストアンサー
CSSファイルでHTMLタグのスタイルをまとめたい
- CSSファイルを使用してHTMLタグのスタイルを一括で管理したい場合、うまくいかない場合があります。
- HTMLタグに直接スタイルを記述する方法とCSSファイルを使用する方法がありますが、指定したStyleが適用されないことがあります。
- 具体的に問題がある場合は、HTMLタグの属性にスタイルを直接指定する方法を試してみるか、CSSファイルでの記述方法に誤りがないか確認してください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No1です。 ご提示のHTMLにはいくつかの機能が設定されています。単純化すると 1）マウスオン、オフでの背景色の変化 2）マウスオン、オフでの文字列の表示/非表示（MENU部への表示） 3）クリック時の処理（これは質問文には明示されていません） になるかと思います。 ＞JavaScript はできれば使いたくないのですが～ ご提示のソースでは上記の1）～3）の全ての処理をjavascriptで行っています。 （ 3）の内容が不明ですが、多分、javascriptと推測されます） それなので、回答はそのままスクリプトを利用したものとしました。 さて、 1）は通常ロールオーバーと言われているもので、CSSでも可能ですが、マウスオフ時は元の表示状態に戻ります。 一方、ご提示のものは初期状態→オン（#27595a）→オフ（#D9F4E1）と元には戻らない仕組みです。 初期状態とオンの2通りの変化でよければCSSで可能です。 2）をCSSで行うのは、なかなか難しそうです。（私が知らないだけかも） 3）は質問文にないため内容が不明なので、CSSで可能な処理なのか判断できかねます。 というわけで、1）の機能のみなら、以下のようにすればCSSで可能になります。 （マウスオフ時の背景色はCSSで設定している初期の色（現状は白？）に戻ります） <html> <head> <style type="text/css"> a.item2 {display:block; width:170px; height:20px; border:1px dashed yellowgreen;} a.item2:hover{background-color:#27595a;} </style> </head> <body> <a href="AAA/AAA/" target="I5" class="item2">AAA</a> <a href="AAA/BBB/" target="I5" class="item2">BBB</a> <a href="AAA/CCC/" target="I5" class="item2">CCC</a> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
基本的に同じようになるようにstyleをまとめました。 一部、ブラウザによって違うかも知れないところを、変えています。 同じ様式でよさそうなものは、仮にitem1というクラスにしてあります。 ついでにスクリプト部もまとめてしまいました。表示用の文字列はtitle属性を利用して定義しています。closeMenu()の動作が不明（質問文にないので）でしたので、そのままにしてあります。 ちなみに、styleもscriptも外部ファイル化が可能です。 ＜参考として＞ <html> <head> <style type="text/css"> #menu5 {color:black;} a.item1 {display:block; width:170px; height:20px; border:1px dashed yellowgreen;} </style> <script type="text/javascript"> window.onload=function(){ var a=document.getElementsByTagName('A'); for (var i=0; i<a.length; i++){ if (a[i].className=='item1'){ a[i].onmouseover = function(){change(this,1);} a[i].onmouseout = function(){change(this,0);} a[i].onclick = function(){return closeMenu(this);} }}} function change(e,f) { e.style.backgroundColor=f?'#27595a':'#D9F4E1'; document.getElementById('menu5').innerHTML=f?e.title:''; } </script> </head> <body> <span id="menu5">MENU: </span><br> <a href="AAA/AAA/" target="I5" class="item1" title="AAAについて">AAA</a> <a href="AAA/BBB/" target="I5" class="item1" title="BBBについて" >BBB</a> <a href="AAA/CCC/" target="I5" class="item1" title="CCCについて" >CCC</a> </body> </html>
お礼
きれいにまとめてくださり、ありがとうございます。 JavaScript はできれば使いたくないのですが、css のみで記述できないものでしょうか？
お礼
だいぶすっきりして見やすくなり、修正しやすくなりました。 このソースで私の希望していることが実現できました。どうもありがとうございました。