HTML&CSSの備忘録

はじめに

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>

function check(){
  if (lastTask.style.textDecoration == "none"){
    lastTask.style.textDecoration = "line-through";
  } else {
    lastTask.style.textDecoration = "none";
  }
}

✅<span>タグ

単体だと意味をなさない。

おわりに

随時追加予定