忍者CODE

ログイン

13
チェックボックスをカスタムしよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
チェックボックスをカスタムしよう!

見本を動画を参考に作成してください。
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <div class="checkbox">
  <input type="checkbox" name="" id="checkInput" class="checkbox-input">
  <label class="checkbox-parts" for="checkInput">チェックボックスをカスタムしよう!</label>
</div>
¥HTML¥
          
            .checkbox {
    text-align: center;
    color: #79808A;
    margin-top: 60px;
  }
  .checkbox-input{
    display: none;
  }
  .checkbox-parts{
    position: relative;
    padding-left: 38px;
    cursor: pointer;
  }
  .checkbox-parts::before{
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 0;
    width: 23px;
    height: 23px;
    border: 2px solid #79808A;
    border-radius: 4px;
  }
  .checkbox-input:checked + .checkbox-parts::after{
    display: block;
    position: absolute;
    top: -2px;
    left: 13px;
    width: 11px;
    height: 19px;
    transform: rotate(40deg);
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    content: "";
  }
  .checkbox-input:checked + .checkbox-parts::before {
    border: 2px solid red;
  }
¥CSS¥
          
答えのアイコン

解説

check後の挙動を上手く設定しましょう。

これまで初級/中級でやった問題の総集編です。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET