質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

4035閲覧

チェックボックスにチェックを入れた時に要素に変化を付ける方法

aba623ky

総合スコア63

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/04 07:48

編集2016/10/05 05:19

下記のコードをもとに、チェックボックスにチェックを入れた時に要素に変化を付ける方法を模索しています。
下記のコードを<table>要素に変えたいのですが、<table>要素に変えると写真のような状態になります。また、<div>部分(変えたバージョンは<table>です)は初期は非表示になっていません。

今回の悩みは「Toggle Button」をクリックすると、
要素が表示/非表示にしたいです。

イメージ説明

イメージ説明

<table>要素に変換したバージョンが上記のコードです。

```css
<style> table.ff { border:1px solid #ccc; -webkit-border-radius:4px; -mozborder-radius:4px; border-radius:4px; background:#fcfcfc; padding:20px; } input[type=checkbox]:checked ~table.ff { display:none; } ``` ```html <tr> <td> <label for="toggle"> <input type="checkbox" id="toggle"> Toggle Button </label> </td> </tr> <table class="ff"> <tr> <td> hello </td> </tr> </table> ``` ```css <style> div.changed { border:1px solid #ccc; -webkit-border-radius:4px; -mozborder-radius:4px; border-radius:4px; background:#fcfcfc; padding:20px; } input[type=checkbox]:checked ~ div.changed { display:none; } </style>
```html <input type="checkbox" id="toggle"> <label for="toggle">Toggle Button</label> <div class="changed">「Toggle Button」をクリックすると、 要素が表示/非表示になります。</div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

毎回同じことを書いているような気がしますが

HTML

1<style> 2input[type=checkbox]:checked ~ table.ff { 3display:none; 4} 5</style> 6<table> 7<tr> 8<td> 9<input type="checkbox" id="toggle"> 10<label for="toggle"> 11Toggle Button 12</label> 13<table class="ff"> 14<tr> 15<td> 16hello 17</td> 18</tr> 19</table> 20</td> 21</tr> 22</table>

投稿2016/10/04 08:08

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/10/05 05:10

写真のようになってしまいます。 Toggle Buttonの中にチェックボックスを収納したいのですが・・・ つまり、チェックボックスをクリックしたら表示されるのではなく、 Toggle Buttonをクリックしたら表示される方にしたいのです。なお、チェックボックスを使ってです。 また、初期は表示されており、クリックしたら非表示になります。
aba623ky

2016/10/05 05:28

あと、table.ffをクリックで非表示にすると、元のtable(つまり、ffではないtable)が少し右にずれるのですが・・・
aba623ky

2016/10/05 05:42

どうやら、tableの幅が短くなるようです。
yambejp

2016/10/05 05:43

>Toggle Buttonの中にチェックボックスを収納したいのですが・・・ javascriptを使わない前提ですよね? labelにcheckboxが収納されているとcheckboxとtableの関係がsiblingでなくなるので無理です。 だめならjavascriptでやるよう頭を切り替えてください >Toggle Buttonをクリックしたら表示される方にしたい >初期は表示されており、クリックしたら非表示 私のソースでそうなっていますよね? >table.ffをクリックで非表示にすると、元のtable(つまり、ffではないtable)が少し右にずれる ブラウザのレンダリングエンジン次第かなと、気になるならテーブルの位置やサイズをcssで明示的に指定してください
aba623ky

2016/10/05 06:04

要素の表示・非表示処理の部分です。
aba623ky

2016/10/06 09:23

input[type=checkbox] { position: absolute; top: 15px; left: 20px; } を入力し実行すると、一つのtableしか非表示になりません。 position:absolute;だけだと問題が起きません。
guest

0

ベストアンサー

「Toggle Buttonの中~」という表現がよくわからないので推測で作成してみましたが、下記でどうでしょう? ※提示された参考サイトのコードを一部利用しています。

HTML

1<style> 2input[type=checkbox] { 3position: absolute; 4top: 15px; 5left: 20px; 6} 7label { 8display: block; 9width:200px; 10text-align:center; 11font-weight: bold; 12color: #fff; 13background: #e54040; 14border:1px solid #dd0000; 15-webkit-border-radius:4px; 16-mozborder-radius:4px; 17border-radius:4px; 18padding: 5px; 19cursor:pointer 20} 21input[type=checkbox]:checked ~ table.ff { 22display:block; 23} 24table.ff { 25display:none; 26} 27</style> 28<table> 29<tr> 30<td> 31<input type="checkbox" id="toggle"> 32<label for="toggle"> 33Toggle Button 34</label> 35<table class="ff"> 36<tr> 37<td> 38hello 39</td> 40</tr> 41</table> 42</td> 43</tr> 44</table>

投稿2016/10/05 06:57

dodragons

総合スコア81

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/10/05 09:21

Toggle Buttonをクリックしたら表示される様式ですか? また、table.ffをクリックで非表示にすると、元のtable(つまり、ffではないtable)が少し右にずれるのですが・・・
dodragons

2016/10/05 09:40 編集

最初から表示させるなら、 input[type=checkbox]:checked ~ table.ff {display:none;} table.ff {display:block;} にすればいいかと思います。 Tableが右にずれるとのことですが、私の環境では再現できないのでなんともいえないです。あしからずすいません。
aba623ky

2016/10/05 10:32

ありがとうございます。
aba623ky

2016/10/05 10:34

少し話が逸れますが、table-layout:autoだと、tableがズレたりすることはありますか? table-layout:fixedだとズレないですか?
dodragons

2016/10/06 00:23

基本的には、正確な設定をしていればどちらのプロパティもズレることはありません。「ズレる」というのが、テーブルの幅が可変するのか、レイアウトが崩れるのか…、詳細を見てみない事にはなかなかアドバイスは難しいですね。すいません。
aba623ky

2016/10/06 02:18

説明不足でした。 テーブルの幅が可変します。
aba623ky

2016/10/06 02:19

チェックボックスを入れると、幅が短くなります。 table-layout:auto;に設定しているのが原因でしょうか?
dodragons

2016/10/06 03:07

提示頂いた情報だけでは原因を特定するのは難しいです。 あてずっぽうになりますが、table-layout:auto;を設定してるセレクタに、width:100%;を入れてみてください。どうなるでしょうか。
aba623ky

2016/10/06 06:26

すみません、治りませんでした。 また、input[type=checkbox] { position: absolute; top: 15px; left: 20px; } を入力し実行すると、一つのtableしか非表示になりません。
dodragons

2016/10/06 10:20

そうでしたか。tableは複数なのですね…。頂いた情報だけはサポートは難しいのでここまでにさせてください。詳細をまとめて、改めて全体のコードを提示頂いたほうがよろしいかもです。以上、宜しくお願いします。
aba623ky

2016/10/06 15:23

すみません。丁寧に教えてくれてありがとうございます。
guest

0

何でしょうか、Javascriptを無効にした人でもできるようにしたい。とか明確な目的があればいいのですが、cssだけでやるのは限界が来るのでjavascriptを検討したらどうですか?

この提案にjavascriptがわからないという理由は無しで
javascript jquery 例

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 7<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> 8<script> 9$(function(){ 10$('#toggle').change(function(){ 11 if ($(this).is(':checked')) { 12 $(".ff").show(); 13 } else { 14 $(".ff").hide(); 15 } 16}); 17}); 18</script> 19<style> 20.ff{ 21 display:none; 22} 23</style> 24</head> 25<body> 26 <table> 27 <tr> 28 <td> 29 <label for="toggle"> 30 <input type="checkbox" id="toggle"> Toggle Button 31 </label> 32 <table class="ff"> 33 <tr> 34 <td>hello</td> 35 </tr> 36 </table> 37 </td> 38 </tr> 39 </table> 40</body> 41</html> 42

投稿2016/10/05 06:11

編集2016/10/05 07:06
date

総合スコア1820

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

date

2016/10/05 06:19

聞いてません。提案は受け入れられなかった。とみなします。
退会済みユーザー

退会済みユーザー

2016/10/05 06:28

この質問者、こういうわけのわからん受け答えが非常に多いですよね…。答えばかりを求めるわりに、聞かれたことに答えない…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問