css ファイルでまとめたい

解決済

質問者：Boos_
質問日時：2009/04/24 15:55
回答数：2件

以下の HTML タグがありますが、 style="width: 170; height: 20; border: 1px dashed yellowgreen" という行が数行書かれていて、これを id 宣言して、css ファイルにこの Style を記述したのですが、うまくいきませんでした。

どうすればいいのでしょうか？
ご教授よろしくお願い致します。

<body>
<font color="black" id="menu5">MENU: </font><br>
<a onmouseover="this.style.backgroundColor='#27595a'; menu5.innerText='AAAについて'" onmouseout="this.style.backgroundColor='#D9F4E1'; menu5.innerText=''" style="width: 170; height: 20; border: 1px dashed yellowgreen" href="AAA/AAA/" target="I5" onClick="return closeMenu(this)">AAA</A><BR>
<a onmouseover="this.style.backgroundColor='#27595a'; menu5.innerText='BBBについて'" onmouseout="this.style.backgroundColor='#D9F4E1'; menu5.innerText=''" style="width: 170; height: 20; border: 1px dashed yellowgreen" href="AAA/BBB/" target="I5" onClick="return closeMenu(this)">BBB</a><BR>
<a onmouseover="this.style.backgroundColor='#27595a'; menu5.innerText='CCCについて'" onmouseout="this.style.backgroundColor='#D9F4E1'; menu5.innerText=''" style="width: 170; height: 20; border: 1px dashed yellowgreen" href="AAA/CCC/" target="I5" onClick="return closeMenu(this)">CCC</A><BR>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2009/04/24 21:47

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>

- 0
- 件

通報する

この回答へのお礼

だいぶすっきりして見やすくなり、修正しやすくなりました。
このソースで私の希望していることが実現できました。どうもありがとうございました。

通報する

お礼日時：2009/04/26 06:08

No.1

回答者： fujillin
回答日時：2009/04/24 19:25

基本的に同じようになるように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>