【CSS】checkboxやラジオボタンのcheckedが効かない原因と修正方法マンガでわかるホームページ作成ホームへ【CSS】checkboxやラジオボタンのcheckedが効かない原因と修正方法2020年04月29日フォームを作るときlabelをクリックすることでinputタグにcheckedがつきCSSで調整できると利用しやすいですよね。forが効かない原因と修正方法」を説明します。forが効かないときid、forを間違えているlabelのforとinputのidが一致していないinputのidが2か所あり値が同じになっている【別案】labelの中にinputを含めてしまうまとめ完成形イメージ下記のようにlabelをクリックしたらinputのcheckboxが反応しlabelのデザインが変わるボタンを作りたいとします。for="aaa">クリック</label>このように「クリックされた」ことを条件にする場合「:checked」をつけてCSSを指定できます。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。checkedが効かないときinputにcheckedをつけて確認してみるまず初めにinputタグにcheckedをつけて確認してみましょう。下記のようにinputタグに「checked」を付け加えるだけです。for="aaa">クリック</label>checkedをつけたときに思った通りのデザインになるかならないかで対応が変わります。思った通りのデザインにならなかったときcheckedをつけた結果思った通りのデザインにならなかった場合、CSSを間違えている可能性があります。セレクタの優先度、セレクタの書き方など確認しましょう。セレクタの「+」や「:checked」は普段使う機会が少ないため間違えやすい部分です。このあたりは要確認しましょう。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。:checked」のように空白を入れてはいけません。CSSセレクタ、classにおける半角スペースの意味CSSのセレクタにおいてスペースは重要な意味を持ちます。CSSセレクタ、classにおける空白スペースの意味を解説します。この記事を読むinput以外に「:checked」を指定しようとしている「:checked」は基本的にinputだけが使えます。aタグなどに指定しようとしている場合効きません。思った通りのデザインになったときcheckedをつけた結果思った通りのデザインになった場合、labelがちゃんと押せていないか、labelとinputがきちんと結びついていない可能性があります。forが効かないとき」を確認してください。forが効かないときlabelをクリックしたときにinputがcheckedされるようにするにはlabelとinputを結び付ける必要があります。結び付けるにはinputにidで、labelにforで同じ値を指定する必要があります。forが効かないときは下記のような状態になっている可能性があります。id、forを間違えている下記のようなミスをしていないか確認しましょう。for="aaa">クリック</label>labelのforとinputのidが一致していない基本中の基本ですが、labelのforとinputのidの記述は一致している必要があります。意外とスペルミスしていたり数字がずれていたりするものです。落ち着いてソースを見直してみましょう。for="aaa">クリック</label>inputのidが2か所あり値が同じになっている同じidの指定が2か所あると一方は効かなくなります。for="bbb">クリック2</label>クリック1クリック2上記の場合、下の「クリック2」をクリックしても上の「クリック1」が反応してしまいます。コピペでソースを書いているときに陥りやすいミスです。ソース内で検索をかけて重複している箇所がないかチェックしましょう。radioボタンの場合はnameでも同じ指定になっていると効かなくなります。【別案】labelの中にinputを含めてしまうそもそもforもidも使わない方法にしてしまおうという話です。type="checkbox">クリック</label>クリックlabelの中にinputを含めてしまうことでforもidもいらなくなります。これで「forが効かない!?」と悩む必要がなくなりますし、ソースコードもシンプルになりミスが減ります。forが効かない原因と修正方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。