- ベストアンサー
CSSを無効に出来ますでしょうか？
よろしくお願いします。 サイト内で、ある一部のページのみにCSSをON/OFFに切り替えれる ボタン？を設置しようとしているのですが、色々とサンプルなどを 探して設置してみるのですがうまくいきません・・・。 CSSの定義自体、何か特殊な方法で切り替える場合には指定を 行わないといけませんでしょうか？ どなたか、これを実現できる方いらっしゃいましたら アドバイスいただけると助かります。 よろしくお願いいたします。
- yuyukina
- お礼率66% (251/380)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
一応３行でそのまま動く物でしたが、イメージが掴みにくかったようですね。具体的な目的が分からなかったので、プルダウンの選択ごとにCSSを切り替えるサンプルにしてみました。 以下の例では、プルダウンを選択するたびに、同じフォルダーの中の「a.css」「b.css」が交互に読み込まれます。 ---- <html> <head> <link rel="stylesheet" type="text/css" href="a.css"> <script type="text/javascript"> function changecss(val){ var csssource = val + ".css"; var linklist = document.getElementsByTagName("link"); linklist[0].href = csssource; } </script> </head> <body> <select name="housing_type_def" onchange="changecss(this.value)"> <option value="a">cssa</option> <option value="b">cssb</option> </select> </body> </html>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSはdocument.styleSheetsに格納されてます。（link,head内の記述共に） これらのdisabledを切り替える事で簡単にon/offできます。 （ただし、style属性で書かれたスタイルはこれでは切り替えできません） 以下、サンプルです。 (style構文が一つなので手抜きでdocument.styleSheets[0]を直接参照しているが、複数ある場合はforで回す、とかしないと。) <html> <head> <title></title> <style type="text/css"> body{background-color:black;color:white;} h1{font:normal bold medium serif;} </style> <script type="text/javascript"> function sample(obj){ if(obj.value.match(/off/)){ obj.value = obj.value.replace(/off/,'on'); document.styleSheets[0].disabled = true; } else { obj.value = obj.value.replace(/on/,'off'); document.styleSheets[0].disabled = false; } } </script> </head> <body> <h1>サンプル</h1> <p><input type="button" value="CSS-off" onclick="sample(this)"></p> </body> </html>
- wynnjp
- ベストアンサー率71% (5/7)
以下のような感じでCSSを切り替えられると思います。 //切り替え条件に応じて値を入れる var csssource = "/xxx/aaa.css"; //<link タグを探す var linklist = document.getElementsByTagName("link"); //<linkタグの１つ目（条件に応じて変えてください）にcssを入れる linklist[0].href = csssource;
お礼
ご回答有難うございます！！！ すみません、初心者なもので・・・。 もし可能であれば具体的な記述方法をお教えいただけないでしょうか？ 一度サイトのほうで試してみたいと思います！ ちなみにCSSの定義は、head内に普通に行っているのですが これ自体は、問題ないのでしょうか？？ すみません！よろしくお願いいたします。
関連するQ&A
- 【CSS】ヘッダ固定
CSSを使ってヘッダを実現したいです。 検索サイトで探したところ、以下URLが実現したい事に近いです。 http://css.alsacreations.com/modeles/modele13.htm 上記サンプルはヘッダとボディーの比率をheight: 20%; height: 80%;で指定してますが、私が実現したい事は、ヘッダのサイズを一行（文字の高さ）としたいのです。 どうしたらよいでしょうか？
- 締切済み
- HTML
- CSSを外部に設置したいのですが大問題が
サイト製作中に詰まってしまいました…。 CSSを外部に設置したいなと思い、やってみたのですが、 私のホームページスペースはリフェラ（？）を遮断しているようで、 Norton等を導入している方には、外部CSSを読み込んでくれず、 CSS抜きのページが表示されてしまいます。 外部CSSはNorotonをOFFにしないと読み込まないので困っています。 何かいい方法はないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- 画像にオンマウスして他の場所のCSSを操作するには？
もしかしたらJavaScriptになるのかもしれませんが・・・ 例えば、ページの右には説明文、左には図を載せます。 図の一部にオンマウスした時に、右側の説明文の一部を強調したいと思うのですが、その際にCSSで作った枠線、背景を変更したいと考えています。 それを実現するには、どうしたらいいのかわかりません。 参考になるサイト、サンプルなどありましたら教えていただけませんでしょうか？
- 締切済み
- HTML
- CSSの定義の方法
CSSの定義の方法で混乱しています。 以下サイトで見たサンプル http://www.geocities.jp/eijispace/2011/0810.html dl#sample1 dl,dt,dd { margin: 0; padding: 0; } dl#sample1 dl,dt,dd { これがわかりません。 dl,dt,dd が l#sample1の子クラスのようなものなのはわかりますが dl#sample1が不明です 通常定義は ．class{ や #id { など ．や# で始まるはずですが、上の方法はどういった意味なのでしょうか また、 aa．bb { のような形も見かける気がします。 cssの本を見ても書いていないし、こういう定義の文法がわからないのでお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ページごとにBGMを貼りたい
フレームを使用したページで、子フレームごとに設置したBGMを（＝子フレームごとに設置、ではなく、子フレームこどにBGMの指定が出来ればOKです）、親フレーム（メニューなどを表示した、ページ切り替えを行なわないページ）にBGMのON・OFFのボタン（？）を設置したいのですが、再現方法がありましたら御教示下さい。出来ればjavascriptでお願い致します。 または、上記のBGMの貼り付け方を簡単に（＝サンプルがある程度で構いません）説明しているサイトがあれば、教えて下さい。 使用するBGMは.mid、環境はMac9.2+IE5.2になります。
- 締切済み
- その他（インターネット・Webサービス）
- jspでcssが読み込まれません。。
練習で簡単なwebアプリケーションを作成しているのですが,jspでcssを読み込みたいのですが、なかなか読み込めません。 サイトなどを参考にしながら、コードを書いてみたのですがなかなか読み込まれず困ってます。 開発環境 OS fedora11 eclipse3.5 Tomcat 5.5.27 struts1.3.10 ブラウザ Firefox3.5.4 Eclipse内のプロジェクト構造 sample(プロジェクト名) aaaaaa（パッケージ／java） bbbbbb (ファイル) cccccc (ファイル) WEB-INF（WEB-INFの配下にはlib,pages,xmlファイルがあります） lib pages（pagesの配下にはcss,jspファイルがあります） css（cssの配下のcssファイルを読み込みたい） sample.css jsp (jspの配下にsampleファイルがあります) sample(sampleの配下にはsample.jspがあります) sample.jsp sample.jspの中には下記のように書いてあります。 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="pages/css/sample.css" type="text/css"/> </head> sample.cssはhttp://www.stylish-style.com/csstec/basic/b-table-deco.htmlの２をそのまま書いています。 参考にしたサイト http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1313643858 http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=36945&forum=12 Firefoxで確認するとエラーも特になく表示されるのですが tableで指定した枠が表示されなくて困っています。 よろしくお願いします。
- ベストアンサー
- Java
- 誰か安くCSS作ってくれませんか？
■依頼内容：CSS作成＆サンプルページ作成 例：http://catfrog.net/PHP/AV/AV.php 「そのサイト用のCSS」と「そのCSSを扱う上でどこに何を置けばいいのかがわかるサンプルページ」を作成して欲しい。実際のページ作成はそのサンプルをみて自分で行うつもりです。 現在はhatenaダイアリー用に別の人に作ってもらったものを適当に自分でいじっている。現状のCSSをもう少しまともなものにしてほしい。 ■希望CSS構成 「ヘッダー・メイン部分・サイドメニュー（ひとつ）・フッター」という感じ。特に画面遷移とか必要なく、１ページがシンプルかつ綺麗にでればそれでOK。 こういう依頼で作業してくれる最安値業者はどこですか？もしくは誰かやってくれる個人の方教えてください。
- 締切済み
- CSS
- css定義でこんなものを…
Dreamweaver2004MX 添付画像のようなレイアウトをcssで定義してみたいのですが、 可能でしょうか？ css関連のサイトを色々と検索し、やってみましたが、 css初心者としては、難しくて満足のいくものが出来ませんでした。 宜しくお願いします…。 ※添付画像の「画像」とその下にある「ＳＡＭＰＬＥ」が途中で 切れてしまってますが作成したいものは、つながっています。 わかりずらくて申し訳御座いません。
- ベストアンサー
- HTML
- HTML5＋CSS3 でしかできないこと
長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML５＋CSS３ が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5＋CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 ３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
有難うございます。 ご指導いただいた通り試してみたのですが やはりうまくいきませんでした・・・。 ちなみに、CSSはページ内ではなく外部ファイルに全て 記述しているのですが、これが問題となっているのでしょうか？？ 何度もすみませんが、こちらに関してもご存知であれば アドバイスいただけると助かります・・・。 どうぞ、よろしくお願いします。