忍者CODE

ログイン

10
チェックしたら文字をハイライト化

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
チェックボックスと文字を横に並べて
チェックボックスにチェックが入ったら文字のボーダーを
蛍光ペンのようなハイライトカラーで塗ってみよう。

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

解答ソースコード

            <input id="text" type="checkbox" />
<label for="text">チェックしたらこの文字のボーダーをハイライトにしてください</label>
¥HTML¥
          
            input:checked + label{
    background: linear-gradient(transparent 70%, yellow 0);
  }
¥CSS¥
          
答えのアイコン

解説

チェックボックス + テキストパターンの実装をする際は
inputタグとlabelタグをしっかりと連結させる癖をつけましょう。

チェックボックスがcheckdになった時のセレクタの指定は
input:checked のように指定することができます。
そうすることで、チェックボックスにチェックがついてる時のパターンと
ついていない時のパターンが指定できます。

蛍光ペンのようなハイライトカラーをつけたい時は
linear-gradient で好きな色を合わせてみましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

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

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

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