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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

checkboxをcheckしたら、imgの背景色を変えたい

DaichiNakajima
nitori-kun

総合スコア53

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0リアクション

0クリップ

346閲覧

投稿2022/07/29 00:48

編集2022/07/29 02:20

前提

htmlとCSS、javaScriptを用いてWebサイトを作っています。ピン留め機能を追加したいと思っています。

実現したいこと

ピン留めの画像は、以下のように中心だけくり抜いたピンの画像を用いています。(CSSでピンの形を作るのが難しかったので、この方法を用いました。)checkboxをcheckする前は、背景色は灰色です。checkboxをcheckしたら、imgの背景色を黄色に変えたいです。CSSをどのように変更すればいいでしょうか?

該当のソースコード

変更済み

試したこと

cssは、
.clip input[type="checkbox"]:checked ~ img{
background-color: #ede327;
}
のように指定してみました。この指定方法が間違っているのか、それともinputの後にspanを用いない方がいいのかと感じています。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>複数モーダル</title> <link href="assets/css/frickty_download.css" rel="stylesheet"> <link href="assets/css/newCars.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> // モーダルが複数ある場合 $(function () { // モーダルのボタンをクリックした時 $('.modal_trigger .modal_btn').on('click', function() { var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得 $('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する }); // ×やモーダルの背景をクリックした時 $('.modal_close , .modal_bg').click(function(){ $('.modal_box').fadeOut(); // モーダルを非表示にする }); }); </script> </head> <body> <div class="js-flickity"> <ul class="modal_trigger"><!--7/27--> <li class="modal_btn" id="matsuda"> <img src="assets/img/matsuda_cx5.png"> <div class="upper_modal"> <div class="modal_txt"> <p>マツダ</p> <p>CX-5 CD(4WD)</p> </div> <div class="favorite"> <div class="favorite_txt"> <p>お気に入りに</p> <p>追加</p> </div> <div class="clip"> <input type="checkbox" checked id="1" name="clip"><span class="clip_img"><img src="assets/img/clip.png" alt=">"/></span> </div> </div> </div> <div class="detail-button"> <a href="history.html"><p>詳細を見る</p><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a> </div> </li> </ul> <!--<script src="assets/js/frickty.pkgd.min.js"></script>flickity--> </body> </html>
#newCars_txt h1{ text-align: center; } #newCars_txt p{ text-align: center; color: rgb(121, 121, 121, 0.5); font-size: 15px; } .modal_trigger { margin: 0 auto; margin-top: 100px;/*0729*/ margin-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal_trigger li { display: inline-block; box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5); border-radius: 5px; cursor: pointer; width: 200px;/*0729 fix*/ height: auto; position: relative; overflow: hidden; } .modal_trigger li::before { content: ''; display: inline-block; width: 100%; height: 100%; background: #336666; -webkit-transform: translateY(-100%); transform: translateY(-100%); position: absolute; left: -20px; top: 100%; z-index: -1; opacity: 0; } .modal_trigger li:hover {/*change the text color*/ color: #FFF; } .modal_trigger li:hover::before{ -webkit-animation: slideRightBg ease .2s forwards; animation: slideRightBg ease .2s forwards; } .modal_trigger li + li { margin-left: 20px; } .upper_modal{ display: flex; justify-content: space-around; } .modal_btn img{ width: 100%; height: auto; } .modal_txt { width: 45% } .modal_txt p{ margin: 0; font-size: 12px; } .favorite{ position: relative;/*specify for .heart parent element*/ box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.7); width: 48%; height: 40px; } .favorite_txt{ width: 100%; margin-left: -10px; } .favorite_txt p{ text-align: center; font-size: 12px; } .clip{ display: flex; } .clip span{ width: 20px; height: 20px; } .clip img{ position: absolute; width: 20px; height: 20px; /*keep .clip inside the #favorite*/ right: 0; bottom: 20%; background-color: #797979; } /*.clip label:before, .clip label:after { position: absolute; content: ""; background: #f88dc8; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; left: 10px; top: 0; width: 10px; height: 15px; } .clip label:after { left: 0; transform: rotate(45deg); transform-origin :100% 100%; }*/ .clip input[type="checkbox"]:checked ~ .clip_img { background-color: #ede327; } /*.clip input + .clip_img:before { content: ""; input[type="checkbox"] position: absolute; background-image: url(assets/img/clip_img);/*絶対違う気がする!*/ /*background-color: #797979; width: 25px; height: 25px; }*/ /*.check-box input:checked + .clip_img:before { background-image: url("ここに「チェック(レ点)の画像」"), url("ここに「ボックスの画像」"); }*/ .clip input{ display: none; } .detail-button{ margin: 20px auto;/*center the box*/ text-align: center;/*center the a elements*/ border: thin solid black; width: 65%; } .detail-button a{ display: flex; justify-content: space-around; align-items: center; text-decoration: none; color: black; } .detail-button p{ font-size: 15px; margin: 0; } .detail-button img{ width: 15px; height: 15px; margin-left: -12px; } @-webkit-keyframes slideRightBg { 0% { opacity: 0; left: -50%; } 100% { opacity: 1; left: 0; } } @keyframes slideRightBg { 0% { opacity: 0; left: -50%; } 100% { opacity: 1; left: 0; } } .modal_box { display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999; } .modal_bg { background-color: rgba(30, 30, 30, 0.9); height: 100%; width: 100%; } .modal_inner { background-color: #fff; left: 50%; padding: 20px 40px 40px 40px; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 900px; } .modal_block ul { padding-left: 0; } .modal_block li { list-style-type: none; } .modal_close { cursor: pointer; position: absolute; right: 10px; top: 0; font-size: 2rem; }

変更後img

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。