20px}.radiobutton:checked+.label{background-color:pink}ホームCSSCSSだけでボタン風のラジオボタンを作る方法【クリックで色が変わる】CSSTwitterFacebook0はてブ0Pocket0LINE2020.01.14スポンサーリンク今回はクリック時に色が変わるボタン風のラジオボタンをCSSだけで作る方法を紹介します。ラジオボタン3スポンサーリンク目次コードコードの解説HTMLCSSボタンをdivで囲むまとめコードともあれまずはコードを見てみましょう。pink;}コードの解説HTML<input>のidと<label>のfor属性を一致させて紐付けましょう。noneにするのできちんと紐付けしておく必要があります。<label>の中に<input>を書いて紐付ける方法だとボタン風のラジオボタンは作れないので注意しましょう。<input>にチェックが入ったら<label>に処理をするので、中に書いてしまうと階層構造の関係でCSSだけでは実装できなくなります(jQueryを使えばできます)また、<input>→<label>の順番で書かないとチェックが入った時に処理ができないのでこの順番で書くようにしてください。あとは<input>と<label>を同じ階層にひらすら並べるだけです。none;で非表示にします。<label>に背景色を入れておくとクリックした時の変化がわかりやすいと思います。labelはいわゆる隣接セレクタですね。.radiobuttonがチェックされた時の隣にあるlabelにスタイルを当てます。ラジオボタンにチェックが入ったらスタイルを指定ボタンをdivで囲むここからは好みによりますが、<input>と<label>をただ並べるだけだとバラバラしているので、<div>で囲ってあげるとまとまりのあるコードになります。for="radio1">ラジオボタン2</label></div></div><div>で囲っておくと何かと融通が効きやすいのでオススメです。まとめこうしてみると結構簡単そうですが、<input>と<label>を同じ階層に書くことや、<input>→<label>の順番で書くことは意識しないとハマりポイントになります。焦っている時ほど変なミスでコードが動かないことはよくあるので注意してくださいね。今回はCSSで円を作る方法と、円の中に中央揃えで文字を書く方法を紹介します。今回はWordPressでグローバルメニューを設置する方法を紹介します。今回はCSSだけで三角形を作る方法と、なぜ三角形が作れるのかという原理を解説します。最後に三角形を使い道も紹介します。CSS...CSS【レスポンシブ対応】HTMLとCSSで作る!はてなブログのグローバルメニュー10選+(調整可能)今回ははてなブロガーに向けて、HTMLとCSSだけで作れるグローバルメニューのデザインを10+個紹介します。レス...CSS【jQuery不要】CSSだけ!途中から追従するスティッキーヘッダーを簡単に作る方法(サンプル付)スティッキーヘッダーはjQueryで実装するのが定番ですが、知らない間にCSSだけでも簡単に作れるようになっていたみたいなので紹介します。今回はCSSを拡張した言語「Sass」について解説します。Macの使い方を解説!ダウンロードからインストールまで海外ノマドするならVPNを入れておこう!オススメのVPNを紹介プロフィールwagashi2000年生まれ。大学を中退し、フリーランスのウェブデザイナーとして活動しています。寿司と桜が大好きだけど同調圧力が苦手。