CSSファイルでHTMLタグのスタイルをまとめたい
- CSSファイルを使用してHTMLタグのスタイルを一括で管理したい場合、うまくいかない場合があります。
- HTMLタグに直接スタイルを記述する方法とCSSファイルを使用する方法がありますが、指定したStyleが適用されないことがあります。
- 具体的に問題がある場合は、HTMLタグの属性にスタイルを直接指定する方法を試してみるか、CSSファイルでの記述方法に誤りがないか確認してください。
- ベストアンサー
css ファイルでまとめたい
以下の 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>
- Boos_
- お礼率42% (16/38)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （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 のみで記述できないものでしょうか？
関連するQ&A
- cssファイルへリンクできないです。
今回からCSSファイルでホームページを作り出している超初心者なので、 専門用語の使い方など間違っているかも分かりませんが知恵を貸してください。 Dreamweaverを使用して、上部に固定ヘッダーのソースをhtmlファイル内に打ち込んで作業をしてます。ヘッダーの下部分の作業をし始めてDreamweaverのデザイン部分の画面で、ヘッダー画像の下に載せる画像や文字が入り込んで隠れてしまうので、作業がしにくいです。 そのため固定ヘッダーデータをcssファイルにした方がいいのかなと思い、 リンクさせようとしたのですが反映されないです。リンクした方がいいのか、その他より効率がいい方法があるのか分からないのでよろしく御願いいたします。 htmlファイルには <body> <link rel="stylesheet" type="text/css" href="banner.css"> と入力してます。 cssファイルには <div id="header"> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../house/img/b01-.gif" onmouseout="this.src='../house/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../house/img/b02-.gif'" onmouseout="this.src='../house/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../house/img/b03-.gif'" onmouseout="this.src='../house/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../house/img/b04-.gif'" onmouseout="this.src='../house/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../house/img/b05-.gif'" onmouseout="this.src='../house/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../house/img/b06-.gif'" onmouseout="this.src='../house/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../house/img/b07-.gif'" onmouseout="this.src='../house/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../house/img/b08-.gif'" onmouseout="this.src='../house/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../house/img/b09-.gif'" onmouseout="this.src='../house/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../house/img/b10-.gif'" onmouseout="this.src='../house/img/b10.gif'"> </div> と入力してます。 よろしく御願いいたします。
- ベストアンサー
- HTML
- cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
- テーブルリンクに付いて
下記のテーブルリンクを作成しましたがクリックしても説明文が表示されません どなたか教えて下さい <p align="center"> <TABLE HEIGHT=30 BORDER=1 BGCOLOR="#FFFFFF" CELLSPACING=0> <TR> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728074105.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">特典サービス</TD> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728075504.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">車検費用</TD>
- ベストアンサー
- その他([技術者向] コンピューター)
- 外部ファイルの記述の仕方
HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>
- ベストアンサー
- JavaScript
- 条件にあったテーブルのセルを数える
テーブルを作り、それぞれのセルをonmouseoverすると背景が変わるようになっています。そして、背景が変わった後に、何個のセルの背景が変わったのかを知りたいのですが、どうもうまくいきません。alertで確認してもいつも「０」として出てきます。お手数ですが、ご指導お願いします。 <script type="text/javascript"> function bgSwap(TD) { if(window.event.shiftKey == true) { if(TD.style && TD.style.backgroundColor){ TD.style.backgroundColor = ''; } else{ TD.style.backgroundColor = '#000000'; } } } function sendToparent(){ var count=0; var i; var tdname = document.getElementById('F1table').getElementsByTagName('td'); for (i=0; i < tdname.length; i++) { if(tdname[i].style.backgroundColor == "#000000"){ count = count+1; }else { count = count; } } alert(count); } </script> <body> <input type='button' value='set' onclick='sendToparent()'> <table id='F1table' border="0" bordercolor = '#000000' > <tr> <td onmouseover="bgSwap(this)" width="35" height="35"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> </tr> </table> </body>
- 締切済み
- JavaScript
- この部分をスタイルシート書きには？
1台のPCをサーバ＆クライアントにしています。 ただ今PHPとPostgresqlの勉強をしています。 いつも質問に答えてくれてありがとうございます。 以下のソースは、他の質問を参考にして テーブル上でカーソルをのせると その行の色が変化するものです 問題なのは print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); の部分をスタイルシートで書きたいのですが どのようにすれば宜しいですか？ －－－－－－－－－－－－－－－－－－－－－－－－－－－ <?PHP print("<table border=1 width='90%' cellpadding=3 cellspacing=0>"); この部分をスタイルシートで書きたい print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); ・ ・ ・ print("</table>"); ?>
- ベストアンサー
- HTML
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- onmouseoverはCSS参照に含められるか？
<div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか？ a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。
- ベストアンサー
- CSS
- このCSSどこが間違ってる？中央揃えで二段組みみするには？
お世話になります。 CSS初心者なのでもしかしたら基本的な質問をしているかもしれませんがどうかお許しください。 現在、中央揃えコンテンツのサイトを作ろうとしているのですが、各コンテンツをdiv分けして内容部分となるコンテンツ（leftmenu/centermenu）を二段組みにしたいと思っています。ところが何故かcentermenuがleftmenuの下に表示されてしまいます。これがCSSのどこがおかしいのでしょう？一応本を読みながら書いたのですが、おかしいところがあったらどうか教えてください。 div#header{width:800px; margin-left:auto; margin-right:auto; } div#container{width:800px; margin-left:auto; margin-right:auto; } div#contens{width:800px; margin-left:auto; margin-right:auto; div#leftmenu{width:157px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF} div#centermenu{width:643px; float:right; margin-left:auto; margin-right:auto; background-color:#FFFFFF} } div#footer{width:800px; margin-left:auto; margin-right:auto; clear:both; } body{background-attachment: scroll; background-color: #990000; background-image: url(bg-photo.jpg); background-repeat: repeat-y; background-position: center; } ＨＴＭＬものせておきます。 </head> <body onLoad="仮.jpg')"> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="133"> <param name="movie" value="top.swf"> <param name="quality" value="high"> <embed src="toonie-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="133"></embed> </object> </div> <div id="container"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','home02.jpg',1)"><img src="home01.jpg" name="Image1" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','news02.jpg',1)"><img src="news01.jpg" name="Image2" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','company02.jpg',1)"><img src="company01.jpg" name="Image3" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','work02.jpg',1)"><img src="work01.jpg" name="Image5" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','result02.jpg',1)"><img src="result01.jpg" name="Image6" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','contact02.jpg',1)"><img src="contact01.jpg" name="Image4" width="133" height="53" border="0"></a> </div> <div id="contens"> <div id="leftmenu"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','vuk109-bottom2.jpg',1)"><img src="vuk109-bottom.jpg" name="Image7" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','blog2.jpg',1)"><img src="blog.jpg" name="Image9" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','link2.jpg',1)"><img src="link.jpg" name="Image8" width="157" height="69" border="0"></a></div> <div id="centermenu"> <div align="left"><img src="index-bar.jpg"></div> </div> </div> <div id="footer"> <div align="center"> <p><img src="line.gif" width="800" height="5"><br>Copyright (C) 2007 株式会社未定. All Rights Reserved.</p> </div> </body> </html>
- ベストアンサー
- ブログ
- このtableタグのサイズ変更の仕方を教えてくださ
<Table border="1" bordercolor="#d4d4d4" cellspacing="0" style="border:thick ridge #d4d4d4;"> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー１</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー２</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー３</a> </Td></Tr> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー４</a> </Td><Td align="center" bgcolor="#ffff80" valign="middle" width="150" height="150" style="color:7f7f7f;"> WELCOME </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー５</a> </Td></Tr> 書ききれませんでした。 このテーブルをミニサイズで表示したいのですが、width等を使っても小さくなりません。 どうしてですか？ 上手く説明出来ないので、絵を書きました。 下手でごめんなさい。 誰かわかる人いたら教えてください。
- 締切済み
- HTML
お礼
だいぶすっきりして見やすくなり、修正しやすくなりました。 このソースで私の希望していることが実現できました。どうもありがとうございました。