重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【6/2終了】教えて!gooアプリ版

CSSを使ったスライドパネルのカスタマイズ

解決済

  • 質問者：16164le_tai
  • 質問日時：
  • 回答数：2件

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
https://www.webcreatorbox.com/tech/js-to-css

この記事の中のスライドパネルをカスタマイズしたいと思っています。

<div class="box">
<div class="left">
<label for="check2">NO</label>
<input id="check2" type="checkbox">
<div class="panel2">
<p>ちがうよ</p>
</div>
</div>
<div class="right">
<label for="check3">YES</label>
<input id="check3" type="checkbox">
<div class="panel3">
<p>そうだね</p>
</div>
</div>
</div>

.box {
display: flex;
}

ほかのCSSは基本的に参考サイトと同じです。（check*の部分は変えました）
フレックスボックスで横並びにして、クリックすることでパネルを開くことはできます。

やりたいことは、「NO」あるいは「YES」をクリックすることで片方のボタンを非表示にしたいのです。これが、CSSだけで実現できるのでしょうか。あるいは、他の方法があれば教えてください。

質問者からの補足コメント

  • 回答ありがとうございます。

    ＞YESをクリックしてNOを消すと、NOはずっと消えたままになっちゃう

    消えて欲しいのです。

    用途としては、チャート表で利用しようと思っています。YES、NOに答えていくと結果が出るみたいなものです。全体図を載せるのではなく、質問がありそれに対してYES、NOを選択すると次の質問とYES、NOの選択肢が出てくる（これが繰り返される）イメージです。選択した質問と選択肢が残って結果が最後に表示されるイメージです。

    No.1の回答に寄せられた補足コメントです。 補足日時：2018/04/20 17:14
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No1です



補足でご説明のような内容だと状態を保持する必要がありそうですが、No1で示した:targetを利用する方法では状態を保持できません。targetが外れれば元の表示に戻ってしまいます。
これに関しては、ご提示の参考サイトのチェックボックス利用の仕組みでも同じです。
再度クリックすると元の状態に戻ってしまうことをご確認ください。

無理やりやるなら、ラジオボタンにして他方を消すことで状態を維持することはできますが、誤操作でクリックした場合でも訂正はできないということになります。

CSSでユーザのアクションに対応できる仕組みは限られている上に、セレクタで指定できる内容は子孫要素か兄弟要素で祖先には遡れないという限界があるかと思います。
なぜ、CSSのみなのかがわかりませんが、素直にスクリプトを利用なさった方が良いのではないでしょうか？
無理やりということで以下のようなものを試みてみましたが、CSSのための文書構造みたいになってしまい本末転倒の感があります。

以下、CSSはかなり適当ですが・・・
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
.top, .Q { width:600px; overflow:hidden; }
.Q {
margin-left:-600px; opacity:0;
padding-top:10px;
transition: opacity 1s 0.3s;
}

.top p:first-child {
width:75%; min-height:50px;
float:left;
margin:0 30px 0 0;
border:1px solid #DDD;
}
.top input { display:none; }

.top .lbl {
display: block; float:right;
width:50px; height:50px;
margin-right:5px;
}
.top label {
display:inline-block;
width:100%; height:100%;
text-align:center; line-height:50px;
border-radius: 4px;
color: #FFF; background: #0BD;
transition: 0.5s;
}

.top input:checked + .lbl label { transform: scale(0, 0) rotate(360deg); }
.top input:checked ~ div.Q { margin-left:0; opacity:1; }
</style>
</head>

<body>
<div class="top">
<p>質問その1</p>
<input type="radio" name="Q1" id="Q1n" />
<span class="lbl"><label for="Q1y">NO</label></span>
<input type="radio" name="Q1" id="Q1y" />
<span class="lbl"><label for="Q1n">YES</label></span>
<div class="Q">
<p>質問その2</p>
<input type="radio" name="Q2" id="Q2n" />
<span class="lbl"><label for="Q2y">NO</label></span>
<input type="radio" name="Q2" id="Q2y" />
<span class="lbl"><label for="Q2n">YES</label></span>
<div class="Q">その次</div>
</div>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
動作としては思った通りのものになっています。ただ、YES、NOで質問を出し分ける方法がわたしには思いつかないので、これをもとにカスタマイズは断念します。
質問にも書いてありますが、CSSにこだわっているわけではありません。（たまたまCSSで作られているコードがあったのでその応用はできないかと……） jQueryとか使えればいいのでしょうが……。

通報する
お礼日時：2018/04/23 13:48

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞「NO」あるいは「YES」をクリックすることで片方のボタンを非表示にしたいのです。
え～っと。YESをクリックしてNOを消すと、NOはずっと消えたままになっちゃうので、クリックした方のボタンを消すということで良いのでしょうか？
（自分自身が非表示になる）

参考に挙げられたサイトのように隣接セレクタを利用するというよりは、自分自身（または親要素）を操作することになってしまうので、別の方法で実現してみました。
（リンクの:targetを利用した方法です）

「そうだね」「ちがうよ」の文字部分も非表示の対象なのかよくわかりませんでしたが、HTML5ではリンク要素でもブロック要素を包含できるようになったので、そこまでも含むものとして包含させてあります。
互いに相手をtargetにすれば相手側が非表示になりますが、今回は、上記のように自分を消すものと解釈しましたので、自分自身がtargetになるように設定しています。

非表示の方法は、ひとまずopacity:0にしているだけなので、見えなくなってはいますが要素は存在する状態です。それなので、クリックもできるはずです。
（完全に非表示になさりたい場合は、この辺りを調整してください）

以下、テスト例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
.box { display: flex; }
.label {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background: #0bd;
color: #FFF;
}
.label:hover { background: #0090aa; }

/** 今回の仕組みのCSS　**/
.box a { display:block; transition:0.5s; }
.box a:target { opacity:0; }

</style>
</head>
<body>
<div class="box">
<div class="left">
<a href="#check2" id="check2">
<span class="label">NO</span>
<div class="panel2">
<p>ちがうよ</p>
</div>
</a>
</div>

<div class="right">
<a href="#check3" id="check3">
<span class="label">YES</span>
<div class="panel3">
<p>そうだね</p>
</div>
</a>
</div>
</div>
</body>
</html>
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

通報する
お礼日時：2018/04/23 13:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報