スタイルシートの変更方法
- 簡単にスタイルシートを変更する方法について教えてください。
- div要素のスタイルをクリックで変える方法を知りたいです。
- 外部スタイルシートを使用している場合に、部分的にスタイルを変更することは可能でしょうか。
- ベストアンサー
スタイルシートの変更
お世話になります。 サンプルページ作成とかで、ボタンなり文字リンクなりで簡単にスタイルを部分的に変更したいと思うのですがどうしたらいいんでしょうか？ divで囲まれた箇所のスタイルを■をクリックすることで変えられるようにしたいです。 よくある、onClicでバックカラーを変えるようなスクリプトはなんとなくわかるんですけど、div自体のスタイル変更？となってしまってどうしたらいいものかわからなくなってしまったので。 一応外部スタイルにしているので、部分的に変えるのは無理？なのかなとか思ったり。 ご教授よろしくお願いします。 例：たとえば <div id="xxx"> テスト </div> <br> <br> ■スタイル1 | ■スタイル2 | ■スタイル3
- armstrong-us
- お礼率51% (107/206)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style> div.c1{color:black;} div.c2{color:red;} div.c3{color:green;} </style> <script type="text/javascript"> function F(n){ document.getElementById('xxx').className='c'+n; } </script> </head> <body> <div id="xxx" class="c1"> テスト </div> <br> <br> <a href="#" onclick="F(1);return false">■スタイル1</a> |<a href="#" onclick="F(2);return false"> ■スタイル2</a> | <a href="#" onclick="F(3);return false">■スタイル3</a> </body> </html>
関連するQ&A
- 同じIDのスタイルをまとめて変更したい
JavaScriptでスタイルを変更しようと思ったのですが、なかなかうまくいきません。 <html> <head> <script language="JavaScript"> function change(obj) { document.getElementById(obj).style.color="#ff0000"; } </script> </head> <body> <div id="a">要素A</div> <div id="b">要素B</div> <div id="a">要素A</div> <input type="button" value="変更" onClick="change('a')"> </body> </html> 変更ボタンを押すとIDが"a"のフォントカラーが赤色になるはず、と思ったのですが、これだと1段目の「要素A」だけが赤色になり、3段目の「要素A」に変化がありません。getElementById()メソッドは上から1番目のIDしか参照しないのでしょうか。どうすれば1段目と3段目の両方のフォントカラーを変更できるでしょうか。
- ベストアンサー
- JavaScript
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- アップするとスタイルシートが反映されない
現在メモ帳で外部CSSの段組レイアウトを制作しています。上下に二つ、その間に縦に分かれたローカルでは問題なく見られるのですが、ネットにアップすると全く反映されず、HTMLのみの状態になってしまい大変困っています。初心者ゆえ全く原因が分かりません。 htmlに問題があるんじゃないかなと思い下にhtmlタグを書き込みました。どこに問題があるか、それとも他の原因か、またどうすれば解決されるのかをご教授願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja> <head> <body> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>タイトル</title> <link rel="stylesheet" type="text/css" href="ファイル名.css"> <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = "";} else {id.style.display = "none";} window.event.cancelBubble = true;} // --> </script> <style type="text/css"> *.grad { width:100%; color: #000099; filter: Alpha(opacity=100,finishopacity=0,style=1); } </style> <div id="wrapper"> <div id="header"> ヘッダーの内容</div> <div id="container"> <div id="main"> メインの内容</div> <div id="menu"> メニューの内容</div> </div> <div id="footer"> フッターの内容</div> </div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- ネットスケープでも動せるスクリプト
失礼します。 現在ホームページ作成で、リンクの色を変える方法で悩んでいます。 テストで下記のようなスクリプトをテストで組んでみたのですが、 色々と調べたところNNでdocument.allという部分が未対応のようで NNでだけ、表示をすることができません。 自分は、ジャバスクリプトを１から組むことができず、 色々なサイトで調べてまわり、サンプルをさわってみたのですが うまくいかずにこまっています。 なんとか、IE,NN、firefoxの３ブラウザで見られるようにするには どうすればよいでしょうか？ 宜しくお願いします。 ※ソースをみていただけるとわかるとおもうのですが、できれば任意で ID等ををふって、好きなだけリンクが作れると助かります。 ～HTML～ <html> <head> <title>リンクカラーテスト</title> <script Language="JavaScript"> <!-- function test(ID,col) { document.all[ID].style.color = col; } // --> </script> </head> <body> <a href="#" onMouseover="test('id1','red')" onMouseout="test('id1','black')">リンク元1</a ><br> <a href="#" onMouseover="test('id2','orange')" onMouseout="test('id2','black')">リンク元2</a > <p><br> </p> <p id="id1">リンクカラー1</p> <p id="id2">リンクカラー2</p> </body> </html>
- 締切済み
- JavaScript
- スタイルシート（CSS）の外部リンク方式を使用したテキストリンクの色変更
お手数ですが、webページ作成に詳しい方は回答お願いします。 webページを作成しております。 スタイルシート（CSS）を外部リンク式でhtml文書に適用して、テキストリンクの色を変更しようとしています。 未訪問リンクは青色、訪問済みリンクはグレー、マウスオーバーリンクは赤色が希望ですが、うまくいきません。 未訪問、訪問済み、マウスオーバー時に関わらず常に赤色です。 ちなみに内部埋め込み式ではうまくいきました。 以下html及びスタイルシート詳細です。 （外部リンク式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK rel="stylesheet" href="css/body.css" type="text/css"> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> </HEAD> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> |<a href="sitemap.html">サイトマップ</a> <br /> </div> （外部リンク式スタイルシート） a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} （埋め込み式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} #footer { color:#ffffff; font-size: 100%;} --> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> <a href="sitemap.html">サイトマップ</a> <br /> </div> </TD> </TR> </TABLE></TD> よろしくお願いします。
- 締切済み
- HTML
- スタイルシート 外部ファイルについて質問です。
スタイルシート 外部ファイルについて質問です。 レイアウト用のスタイルシート <style type="text/css"> <!-- .outer { width:; background-color:; padding:15px; margin:0 auto 0 auto; } .menu { float:left; width:20%; background-color:; height:100%; } .main { float:right; width:70%; background-color:; height:100%; } .clears{ clear:both; } --> </style> を、外部ファイルに移したいのですが、やり方が分かりません。 現在ページ内で <div class="outer"> <!-- 左スタイル 開始 --> <div class="menu"> 文章など </div> <!-- 右スタイル 開始 --> <div class="main"> 文章など </div> <!-- 右スタイル おわり --> <br class="clears"> </div> <!-- 左右スタイルシート おわり --> という方法で表記しています。 外部ファイルへの移し方、外部ファイルの中身をどうしたらいいか、 お手数ですが、教えていただけると幸いです。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートの読み込みについて
はじめまして。 最近業務でスタイルシートを使うことになったのですが、 外部ファイルとしてスタイルシートを保存して、 HTMLの中にリンクの部分を書いておいても、 IEで表示したときに読み込んでくれません。（IEのバージョンは6.0です。） インターネットオプションのユーザー補助のところで、ホームページを見る場合は自分のスタイルシートを適用する、という設定にすれば読み込んで表示されるのですが、それをしないと、表示されませんし、 その設定にしてあっても、外部シートの上書きをした場合、更新ボタンをおしただけでは画面が変わらず、 いちいちインターネットオプションのところで 更新をしないと、外部シートの変更が反映されません。 どこがおかしいか分からず困っています。 「XPのせいでは？」とも言われましたが、 そうなのでしょうか？ ぜひご回答よろしくお願いいたします。 下はソースでリンクを書いてある部分です <html lang="ja"> <head> <title>SAMPLE</title> <link rel="stylesheet"href="detail_2.css" type="text/css"> <script type="text/javascript"> </head>
- ベストアンサー
- HTML
- ホームページ作成 スタイルシートを使用して画面を３分割したい。
ホームページ作成 スタイルシートを使用して画面を３分割したい。 下のようなソースを作成しました。 head と body と foot に画面を３分割してます。 footを高さ30pxにしてますが、これをウィンドウの一番下にくっつけて 画面解像度、ウィンドウサイズを変更してもhead部分は一番上へfoot部分は一番下に表示したいと思ってます。 どのような指定をすれば出来ますでしょうか？ご教授願いします。 -------------------------------------------------- <html> <head> <style> * { padding: 0; margin: 0; } #head { height: 100px; width: 100%; background-color: #FFFF00; } #body { width: 100%; } #foot { height: 30px; background-color: #000000; color: #FFFFFF; } </style> </head> <body> <div id="head"> タイトル </div> <div id="body"> テストページ </div> <div id="foot"> copyright(c) </div> </body> </html>
- ベストアンサー
- CSS
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 ＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
お礼
お礼が遅くなりました。 ありがとうございました。