- ベストアンサー
CSS実行条件
チェックボックスがオンになったらCSSを実行するようにしたいので いろいろ調べたんですが、下のようなCSSがないんです。 |||ボックスがオフなら要素で囲まれている文字を隠す |||オンなら囲まれている文字を表示する。 <input id="checkbox1" type="checkbox"> <label for="checkbox1" class="c1">テスト</label> <div class="a"> 表示したり隠したりする部分 </div> <div class="a">で囲まれている部分を隠したり表示したりします。 どなたかお願いします。
- CSS
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#checkbox1 ~ .a {display:none;} #checkbox1:checked ~ .a {display:block;} Android4.0以下のAndroidブラウザ（標準ブラウザ）では動的な変化が対応していないようです。 https://groups.google.com/forum/#!topic/html5-developers-jp/RbAznmIGWaw Android4.2は実機では動的変化に対応していますが、エミュレーターでは対応していません。 ------- 追伸。 細かな言い回しにこだわりは持ってませんので。 ただし表現によっては、見当違いな回答をするかもしれません。 たとえばアニメーションで「回転」させる方法（回転の概念）は４種類（以上）ありますしね。
その他の回答 (1)
- play_with_you
- ベストアンサー率37% (112/301)
確かに表示/非表示の切り替えは「スタイルの変更」だから、CSSでそういうことができたらいいなという気持ちは分かります。 HTMLやCSSはプログラム言語じゃないんだから無理。「実行」するもんでもないし。 そういうのはJavaScriptでやるものです。ありがちな用途ので、検索すればいくらでも例が転がってます。
お礼
CSSだけでは無理ですか・・・ :checkedやdisplayなどでいけると 思ったのですが… 検索で調べて見つけたのは チェックをするとラベルの背景色が変わったりする サイトとかで… どうも、回答ありがとうございました。
関連するQ&A
- HTML･CSS 目次を閉じている時のみ不具合
HTML･CSS超初心者です。 この方のブログ https://webwork-plus.com/content/design/open-area.html#2 を参考にして、目次の開閉を作成しました。 が、目次を開いている時は問題ありませんが、目次を閉じている場合のみ、その目次直下の文章をクリックすると同じページ内のまったく違う場所に飛んでしまいます。 ソースコードは ■HTML■ <div class="open-box"> <input type="checkbox" id="switch" class="on-off" /> <label for="switch" class="open-label"></label> <div class="open"> <p> <ol class="numbering"> <li><a href="#1">imgにposition:absoluteで文字を重ねる</a> <ol> <li><a href="#2">文字を中央に重ねる</a></li> <li><a href="#3">文字を左上に重ねる</a></li> <li><a href="#4">文字を左下に重ねる</a></li> </ol> </li> <li> <a href="#5"> まとめ</a></li> </ol> <p> </div> </div> ■CSS■ /*inputを非表示*/ input[type="checkbox"].on-off{ opacity: 0; } /*ラベル（「開く」ボタン）*/ .open-label{ width: 200px; margin: 0 1.5em; padding: 0.8em; display: block; color: #ffffff; font-weight: bold; text-align: center; box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */ border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ } /*エフェクト*/ .open-label:active{ box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ } .open-label:hover{ background: -webkit-linear-gradient(bottom, #fff4e0 1%,orange 80%); background: #ffb8b3; } /*ラベルに表示するテキスト*/ .open-label::after{ content:'※目次［開く］'; } .on-off:checked ~ .open-label::after{ content: '※目次［閉じる］'; } /*開閉エリア*/ .open{ padding: 0 1em; height: 0; opacity: 0; transition: .5s; width: 500px; box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ background: #ffeff9; border: 2px solid #ff95d5; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ } /*「開く」をタップで表示*/ .on-off:checked ~ .open{ padding: 1.5em 1em; height: auto; opacity: 1; } よろしくお願いいたします。
- ベストアンサー
- CSS
- 動的に作ったチェックボックスが選択できません！！
こんにちは 閲覧ありがとうございます。 タイトルの通り、HTMLのcheckboxをjQuery/javascriptで動的に作ったのですが、動かなくて困っています。 単純に一つ一つcreateElement()で作った場合は大丈夫なのですが、作りたいものが入れ子になった状態です。 まず、作りたいものをHTMLで書くと以下になります。 <div class="input-checkbox"> <span class="kintoneplugin-input-checkbox-item"> <input type="checkbox" name="checkbox" value="value*****" id="id*****"> <label for="id*****">チェックボックス１</label> </span> </div> そして、次にこの形を動的に作ろうとしたものが以下です。 上のHTMLの<div class="input-checkbox">はあるという前提で、その子に動的に作った要素を入れようとしています。 arrayとあるのは、この内容をfor文で回すためです。 //1.span要素作成 var checkSpan = document.createElement('span'); checkSpan.className = "input-checkbox-item"; //2.checkbox作成 var viewCheckBox = document.createElement('input'); viewCheckBox.type = "checkbox"; viewCheckBox.name = "checkbox"; viewCheckBox.id = array2[k]; viewCheckBox.value = array2[k]; viewCheckBox.disabled=""; //3.ラベル作成 var viewLabel = document.createElement("label"); viewLabel.for = array2[k]; viewLabel.id = "label_"+k; viewLabel.innerHTML = array[k]; 4.//追加 $('.input-checkbox').append($(checkSpan).append(viewCheckBox).append(viewLabel)); 上記の内容で実行すると、チェックボックスとそのラベルは表示されるのですが、チェックボックスが編集不可というか、、チェックできないのです。 disabledの指定などもしてみたのですが、うまくいきませんでした。 どうやったらチェックをできるようになるでしょうか＞＜ プログラミング初心者なので、変なところとかがあったらすいません。。。 よろしくお願いします！！
- 締切済み
- JavaScript
- チェックボックスでCSSを表示切替はどうすればいいですか？
チェックボックスにチェックを入れると、現在表示されている箇所が非表示になり、display:none;で非表示にしていたものを表示させる。といった形です。 <input type="checkbox" name="checkbox" id="checkbox" /> <div class="kirikae"> 最初に表示させる項目 </div> <div class="hyouji" style="display:none;"> チェックを入れると切り替わる。 </div> すいませんが、ご教授の程をよろしくお願い致します。
- ベストアンサー
- JavaScript
- 隣接セレクタの適用範囲について。
http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/ 上記のサイトを参考に、CSSで開閉式のリストを作りました。 そのサイトのHTMLの1行目～10行目は下記の様になっています。 <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> それに対応したCSSは、下記の様になっています。 input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + ul{ height: 200px; } つまり、 <input type="checkbox" id="Panel1" class="on-off" /> の後ろの <ul>タグに働きかける構造になっています。 それを改良して、<ul>タグの部分だけでなく、幅広い範囲に働きかける構造にしたいです。 そこで、対応しているCSSの隣接セレクタ「+」の後ろの「ul」を「span」にして、HTMLも「span」タグで括りました。 input[type="checkbox"].on-off + span{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + span{ height: 200px; } <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <span> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> </span> しかし、上手く動作しません。 要するに、「ボタン１」で開閉できる範囲を「リスト1」だけでなく「リスト１」「リスト２」の両方に効かせたり、「ul」タグに囲まれた範囲だけでなく、他のタグも含めた範囲にも効かせたいです。 要点を得ない質問になりましたが、アドバイスをお願いします。
- 締切済み
- CSS
- jQueryのアニメーションについて
jQueryのアニメーションについて聞きたいです。 チェックボックスと連動してボックスが表示されるアニメーションはわかりましたが、表示される際のアニメーションはどうすればいいかわかりません。 フロートで横並びになった一番・二番・三番の三つのボックスがあり、三番のみが表示されている場合、三番のボックスが一番左に表示されています。 そこで二番のチェックボックスにチェックをして、二番のボックスを表示ると、二番が左で三番がその右に表示されます。 その際、三番が右にずれるときにアニメーションでスライドできないでしょうか。 現在のソースです。 【CSS/Script】 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> input{margin:80px 0 0 80px;} div{ display:none; margin:25px; padding:25px; background:#eee; width:200px; height:150px; float:left; } </style> <script type='text/javascript'> $(window).load(function(){ $('#check1').click(function() { $("#box1").slideToggle(this.checked); }); $('#check2').click(function() { $("#box2").slideToggle(this.checked); }); $('#check3').click(function() { $("#box3").slideToggle(this.checked); }); }); </script> 【HTML】 <p> <label><input type="checkbox" id="check1">一番</label> <label><input type="checkbox" id="check2">二番</label> <label><input type="checkbox" id="check3">三番</label> </p> <div id="box1">一番を押してでるのです</div> <div id="box2">さては二番を押したから</div> <div id="box3">どれかと思えば三番でした</div> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSS目次開閉でチェックボックスが現れる
CSSで目次開閉を作成したのですが、左上に四角いチェックボックスが現れてしまいます。 このチェックボックスを消す方法はありますでしょうか。 HTML <div class="open-menu"> <input id="open-1" type="checkbox"> <label for="open-1">≡目次</label> <div class="open-menu-inside"> <ol class="numbering"> <li><a href="#1"> </a></li> <li><a href="#2"></a></li> <li><a href="#3"></a></li> </ol> </div> </div> CSS .open-menu input { display: none; } .open-menu label { width: 180px; color: #000000; font-size: 20px; line-height: 2; font-weight: bold; text-align: left; margin: 20px; box-shadow: 5px 5px 5px #aaa; padding: 20px; cursor: pointer; position: relative; display: block; } /* ここから追加 */ .open-menu label { border: 2px solid #ff0000; border-radius: 20px; } .open-menu label:hover { background: #ffb8b3; opacity: 0.5; } .open-menu label:after { position: absolute; right: 10px; top: 50%; -webkit-transform : translateY(-50%); transform : translateY(-50%); content: "［開く］"; } .open-menu input:checked ~ label::after { content: "［閉じる］"; } .open-menu div { height: 0; overflow: hidden; opacity: 0; transition: 0.3s; } .open-menu input:checked ~ div { height: auto; max-width: 80%; opacity: 1; padding: 20px; background: #ffeff9; border: 2px solid #ff95d5; box-shadow: 5px 5px 5px #aaa; border-radius: 20px; overflow: hidden; } .open-menu-inside { color: #333333; font-size: 15px; line-height: 2; } チェックボックスを消す方法があれば、教えていただきたいです。 よろしくお願いいたします。
- 締切済み
- CSS
- CSSについて教えてください。
携帯向けのサイトを作っています。 contentの文字列が画面からはみ出るので指でスワイプした分だけ スクロールしたいのですがCSSでできますでしょうか？ スクロールバーは表示させたくないのでCSSで無効にしてあります。 どうかよろしくお願いいたします。 <div class="box"> <div class="content"> あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ </div> </div>
- ベストアンサー
- CSS
- jquery リンクを付与しながら文字列を表示
はじめまして、jqueryでの質問です。 下記内容のhtmlを作成しています。 <body> <div class="main-wrap"> <div class="main-left"> <ul class="box_sample"> <li><input type="checkbox" id="list-a" name="list-a">「サンプル会社A」 <label for="list-a" class="light">aaa@aaa.com</label></li> <li><input type="checkbox" id="list-b" name="list-b">「サンプル会社B」 <label for="list-b" class="light">bbb@bbb.com</label></li> <li><input type="checkbox" id="list-c" name="list-c">「サンプル会社C」 <label for="list-c" class="light">ccc@ccc.com</label></li> </ul> </div> <div class="main-right"> <div id="show"><p></p></div> <p class="send">メール送信</p> </div> </div> <script type="text/javascript"> var $c = $('input[type="checkbox"]'); $c.bind('change', function(){ var add = ''; $c.each(function(index, value) { if (this.checked){ //チェックと同時にlabelのfor属性の値をテキストとして表示する add += ($('label[for="' + this.name + '"]').html() + '; '); } }); //id="show p"内に挿入 $('#show p').html(add); }); </script> </body> ・チェックボックスにてメールアドレスをチェック → チェックしたメールアドレスをdiv#showに表示 上記まではできたのですが、表示したメールアドレスに<a href="mailto:aaa@aaa.com;bbb@bbb.com;・・・"></a>を付与したいのですがどういった記述をすればいいでしょうか。 動的に変化するメールアドレスを取得する方法がうまくいかず悩んでおります。 ぜひご教示お願いいたします。 ※mailtoは個別ではなく、全体にかけたいと思います。（チェックしたアドレスすべてに同時送信するため） ・理想は<p class="send">メール送信</p>をクリックした際に、mailtoを起動したいです。 ・上記が難しければ、mailtoで囲んだ状態で表示させられればと思います。→アドレスクリックでメーラー起動。 よろしくお願いいたします。
- ベストアンサー
- Java
- 特定の<input >タグ及び<label>タグの部分をCSSで非表示にしたい。
下記コードの<input >タグ及び<label>タグの部分をCSSで非表示にしたいのですが、 <div class="image-size-item"> <input id="image-size-thumbnail-142" type="radio" value="thumbnail" name="attachments[142][image-size]"/> <label for="image-size-thumbnail-142">サムネイル</label> <label class="help" for="image-size-thumbnail-142">(96 × 96)</label> </div> 問題はimage-size-thumbnail-142の最後の番号及び桁数が出力ごとに変化します（例：image-size-thumbnail-154、image-size-thumbnail-2223等）。このような場合、CSSはどのように記述すればよいのでしょうか？ CSSは、システムの関係上、同ページのヘッダー内に記述する必要があり、タグ内に直接記述することはできません。 以下のようなCSSコードを<head>内に記述しましたが、 <style type="text/css"> [id~="image-size-thumbnail"] { display: none; } [for~="image-size-thumbnail"] { display: none; } </style> 上記コードの<input >タグ及び<label>タグの部分を非表示にすることができません。どこが間違っているかご指摘いただけると幸いです。また、もっと良い方法があれば、教えてください。 なお、同ページには他の部分において<input >タグ及び<label>タグが使用されている箇所が複数ありますので、<input >タグ及び<label>タグ部分を全て表示にするというCSSの記述は使用できません。 参考サイト等ありましたら、教えて下さい。 よろしくお願いします。
- 締切済み
- HTML
- CSSの段組で要素がかけてしまいます
いつもお世話になります。 今CSSで段組をしています。 #content{ width:780px; height:auto; } #content{ float:left; width:440px; padding-left:20px; padding-right:20px; } #menu{ float:right; width:440px; padding-right:20px; } で左右のボックスを作り、 それぞれにテキストや画像などの子要素を入れていきます。 html <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> <div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> <div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </html> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんとおさまるのですが、 IE（６，７とも）右の3番目(sub5)の要素が欠落し、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 どうしたらいいでしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。
- 締切済み
- HTML
お礼
ありがとうございます！ 回答通りにCSSを入力すると出来ました。 回答ありがとうございました！