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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

1回答

1853閲覧

check_boxを選択しかできない、選択解除できない

sooryung

総合スコア22

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

1クリップ

投稿2019/05/03 03:07

編集2019/05/03 13:42

check_boxを選択しかできず、選択解除ができません。

複数選択はできるのですが、選択の取り消しができません。
(選択したものをもう一回押すと選択解除される、という操作です。)

イメージ説明
↑walkをもう一回押しても、変化がない

いろいろ試しましたがわかりません!どなたか分かる方いらっしゃいませんか。

html

1<div class="container"> 2 <div class="checkbox-tile-group"> 3 <div class="input-container"> 4 <input id="walk" class="checkbox-button" type="checkbox" name="checkbox" /> 5 <div class="checkbox-tile"> 6 <div class="icon walk-icon"> 7 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 8 <path d="M0 0h24v24H0z" fill="none"/> 9 <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/> 10 </svg> 11 </div> 12 <label for="walk" class="checkbox-tile-label">Walk</label> 13 </div> 14 </div> 15 16 <div class="input-container"> 17 <input id="bike" class="checkbox-button" type="checkbox" name="checkbox" /> 18 <div class="checkbox-tile"> 19 <div class="icon bike-icon"> 20 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 21 <path d="M0 0h24v24H0z" fill="none"/> 22 <path d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/> 23 </svg> 24 </div> 25 <label for="bike" class="checkbox-tile-label">Bike</label> 26 </div> 27 </div> 28 29 <div class="input-container"> 30 <input id="drive" class="checkbox-button" type="checkbox" name="checkbox" /> 31 <div class="checkbox-tile"> 32 <div class="icon car-icon"> 33 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 34 <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/> 35 <path d="M0 0h24v24H0z" fill="none"/> 36 </svg> 37 </div> 38 <label for="drive" class="checkbox-tile-label">Drive</label> 39 </div> 40 </div> 41 42 <div class="input-container"> 43 <input id="fly" class="checkbox-button" type="checkbox" name="checkbox" /> 44 <div class="checkbox-tile"> 45 <div class="icon fly-icon"> 46 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 47 <path d="M10.18 9"/> 48 <path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/> 49 <path d="M0 0h24v24H0z" fill="none"/> 50 </svg> 51 </div> 52 <label for="fly" class="checkbox-tile-label">Fly</label> 53 </div> 54 </div> 55 </div> 56</div> 57

scss

1* { 2 box-sizing: border-box; 3 font-family: 'Helvetica Neue', sans-serif; 4} 5 6body { 7 background-color: black; 8} 9 10$primary-color: #079ad9; 11 12.container { 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 height: 100vh; 17} 18 19.checkbox-tile-group { 20 display: flex; 21 flex-wrap: wrap; 22 justify-content: center; 23 24 //set dimensions for invisible container 25 .input-container { 26 position: relative; 27 height: 7rem; 28 width: 7rem; 29 margin: 0.5rem; 30 31 //make actual checkbox input invisible 32 // + stretch to fill container 33 .checkbox-button { 34 opacity: 0; 35 position: absolute; 36 top: 0; 37 left: 0; 38 height: 100%; 39 width: 100%; 40 margin: 0; 41 cursor: pointer; 42 } 43 44 //default tile styles 45 .checkbox-tile { 46 display: flex; 47 flex-direction: column; 48 align-items: center; 49 justify-content: center; 50 width: 100%; 51 height: 100%; 52 border: 2px solid $primary-color; 53 border-radius: 5px; 54 padding: 1rem; 55 transition: transform 300ms ease; 56 } 57 .icon svg { 58 fill: $primary-color; 59 width: 3rem; 60 height: 3rem; 61 } 62 .checkbox-tile-label { 63 text-align: center; 64 font-size: 0.75rem; 65 font-weight: 600; 66 text-transform: uppercase; 67 letter-spacing: 1px; 68 color: $primary-color; 69 } 70 71 //active tile styles 72 .checkbox-button:checked + .checkbox-tile { 73 background-color: $primary-color; 74 border: 2px solid $primary-color; 75 color: white; 76 transform: scale(1.1, 1.1); 77 78 .icon svg { 79 fill: white; 80 background-color: $primary-color; 81 } 82 .checkbox-tile-label { 83 color: white; 84 background-color: $primary-color; 85 } 86 } 87 } 88}

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

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

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

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

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

kei344

2019/05/03 03:12

CSSではなくSCSSやSASSでは?
sooryung

2019/05/03 07:46

すみません汗おっしゃるとおりです????
kei344

2019/05/03 07:51

(質問文は編集できます)この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を修正することをお勧めします。また、「SASS」https://teratail.com/tags/Sass ならタグがあるので、もしSCSSで無いならつけることをお勧めします。
sooryung

2019/05/03 13:46

sassではないので、せめてcss3より具体的でないcssに変更しました(消そうかとも思いましたが、htmlだけでは不十分なのに、同じ問題にぶつかっている方が見つけられる可能性が上がるように・・)。 本文中のcssもscssに変更しました。 ご指摘ありがとうございます。
guest

回答1

0

ベストアンサー

こんにちは

ちょっと試して欲しいのですが、スタイルの下のほうで、以下のようなスタイル追加をしてみると、いかがでしょうか?

修正前:

scss

1 //active tile styles 2 .checkbox-button:checked + .checkbox-tile { 3 background-color: $primary-color; 4 border: 2px solid $primary-color; 5 color: white; 6 transform: scale(1.1, 1.1);

上記を、以下の2点で追加、修正します。

  • チェックされている状態の checkbox のスタイルを追加して、 z-index: 1; を指定

  • チェックボックスがチェックされているときの .checkbox-tile に、 z-index: 0; を追加

修正後:

scss

1 // (追加) active checkbox styles 2 .checkbox-button:checked { 3 z-index: 1; 4 } 5 6 //active tile styles 7 .checkbox-button:checked + .checkbox-tile { 8 background-color: $primary-color; 9 border: 2px solid $primary-color; 10 color: white; 11 transform: scale(1.1, 1.1); 12 z-index: 0; // ← 追加

### 補足

以下、確認のため、jsFiddle に上記のコードを作成しました。

   

 

以上、参考になれば幸いです。

投稿2019/05/03 04:28

編集2019/05/03 04:57
jun68ykt

総合スコア9058

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

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

sooryung

2019/05/03 07:45

ありがとうございます!今日中に必ずお返事致します!
jun68ykt

2019/05/03 10:05

承知しました。慌てなくても大丈夫ですよ〜
sooryung

2019/05/03 13:39

とても綺麗に動きました!! こうして初心者に時間を割いてくださって本当ありがたいです。ありがとうございました!
jun68ykt

2019/05/03 13:53

どういたしまして。 解決したようで、よかったです ????
sooryung

2019/05/04 11:58

はい!またよろしくお願いします!????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問