【初心者向け】CSSでcheckboxのデザインを変えるやり方
「webサイトでcheckboxを作って見たけど、もう少しおしゃれにしてみたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- cssでcheckboxのデザインの変え方が分かる
やりたいことはシンプルなのに、そのちょっとしたやり方が分からずにストレスが溜まる経験は誰しもあると思います。是非本記事をお読みいただき、理解を深めてください。
基本のcheckboxの作り方
まずはHTMLを使った、基本のcheckboxの作り方です。以下が「男性」「女性」を選択するcheckboxのサンプルコードです、コピーアンドペーストでいいので試してみてください。
<label> <input type="checkbox" name="test" value="man"> 男性 </label> <label> <input type="checkbox" name="test" value="woman"> 女性 </label>
cssでcheckboxのデザインを変えてみる
それでは、本題です。先ほどのcheckboxの「男性」を例にして、cssでデザインを変えてみましょう。cssについては、簡単な説明をコードの中にコメントアウトで入れています。
<label class="my-checkbox"> <input type="checkbox"> <span class="checkmark"></span> 男性 </label>
.my-checkbox { display: block; position: relative; padding-left: 35px; cursor: pointer;/* チェックボックスにカーソルを合わせるとポインタになる設定 */ } /* inputは表示しないようにする */ .my-checkbox input { display: none; } /*checkboxの設定 */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; /* checkboxの大きさ */ width: 25px; /* checkboxの大きさ */ border: solid 2px #66cdaa; /* 囲い線の色 */ border-radius: 3px; } /* チェックマークの設定 */ .checkmark:after { content: ""; position: absolute; left: 5px; /* チェックマークの位置 */ top: 1px; /* チェックマークの位置 */ width: 5px; /* チェックマークの大きさ */ height: 8px; /* チェックの大きさ */ border: solid #FFF; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; } /* チェックを入れたときのcheckboxの設定 */ .my-checkbox input:checked + .checkmark { background: #66cdaa; /* チェックを入れた時の色 */ border-color: #66cdaa; /* チェックを入れた時の色 */ } /* チェックを入れたときのチェックマークの設定 */ .my-checkbox input:checked + .checkmark:after { opacity: 1; }
いかがでしょうか。cssは一見コードが長く見えますが、「checkbox自体の設定」「チェックマークの設定」「チェックを入れた時のcheckbox自体の設定」「チェックを入れた時のチェックマークの設定」のように、1つずつ設定をしているためです。
1つずつの設定項目自体はやっていることは難しくないので、是非1つ1つの項目をサイズや色を変えて試してみてください。
まとめ
いかがでしたでしょうか。
意外に簡単にcssでcheckboxのデザインを変えられることがお分かりいただけたと思います。是非本記事を通じて理解を深めてください。
\プログラミングスクールを比較/
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
---|---|---|---|
目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
分割払い | ○ | ○ | ○ |
補助金 | ○ | × | ○ |
転職保証 | ○ | × | × |
受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間(約9カ月)のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
公式HP |
公式HP |
公式HP |