はじめに
HTML&CSSはプログラミング学習を初めた最初の1か月間くらいしか勉強しておらず忘れていることが多いです。
Webアプリ制作していて調べることが多いので、何度も同じことを調べないようにここにまとめておきます。
HTML
✅<table>タグ
参考:【HTML table】表を作成する基本からレイアウトの方法までを解説
✅<input>タグ
参考:【HTML】出来るだけ押しやすいチェックボックスを作る
inputのid属性とlabelのfor属性で紐づけ。テキストの部分もクリッカブルになる。
<label for="sample_checkbox"> <input type="checkbox" id="sample_checkbox" />チェックしてください </label>
CSSでポインタにすると尚良し
label, input[type='checkbox'] { cursor: pointer; }
参考:[JavaScript] 文字に下線/上線/取消し線を引く
チェックに紐づけて打消し線を動作させる。
html
<input type="checkbox" id="chk" onclick="check()"/><span id="lastTask" style="text-decoration: none;"></span>
js(getElementByIdの部分略)
function check(){ if (lastTask.style.textDecoration == "none"){ lastTask.style.textDecoration = "line-through"; } else { lastTask.style.textDecoration = "none"; } }
✅<span>タグ
単体だと意味をなさない。
おわりに
随時追加予定
コメントを残す