書き方を、
すぐに引く。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>ページの題名</title>
  <meta name="description" content="ページの説明">
  <link rel="stylesheet" href="stylesheets/style.css">
  <script src="javascripts/main.js" defer></script>
</head>
<body>
  <h1>見出し</h1>
  <p>本文</p>
</body>
</html>

/* コメント */
.card {
  padding: 1.5rem;          /* プロパティ: 値; */
  background-color: white;

  h3 { font-size: 1.25rem; }    /* .card の中の h3 */
  &:hover { translate: 0 -4px; } /* .card 自身に、条件を足す */
}

/* 横方向の中央に、最大の幅を決めて置く */
.wrap {
  inline-size: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

/* 上下左右の中央に置く */
.center {
  display: grid;
  place-items: center;
}

/* hidden 属性を付けた要素は、一番後ろの層で必ず隠す */
@layer utilities {
  [hidden] { display: none; }

  /* 動きを減らす設定のときは、動きをすぐに終わらせ、繰り返さない */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms;
      animation-iteration-count: 1;
      transition-duration: .01ms;
    }
  }
}

if (score >= 80) {
  console.log("合格");
} else if (score >= 60) {
  console.log("もう少し");
} else {
  console.log("再挑戦");
}

for (let i = 0; i < 3; i++) {
  console.log(i);
}

for (const hand of HAND_IDS) {
  console.log(hand);
}

class ScoreBoard {
  #scores = { player: 0, computer: 0 };   // # はクラスの外から触れない

  static from(value) { … }                 // ScoreBoard.from(…) とクラスから呼ぶ

  add(winner) {                            // メソッド
    this.#scores[winner]++;
  }

  get scores() {                           // board.scores と読める（ゲッター）
    return { ...this.#scores };
  }

  toJSON() {                               // JSON.stringify(board) で使われる
    return this.scores;
  }
}

const board = new ScoreBoard();

// 消して、描いて、次の回を予約する
function frame(now) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // now（ページを開いてからのミリ秒）から、位置や大きさを求めて描く
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

// 押した場所を、Canvas の座標に直す
canvas.addEventListener("pointerdown", (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = (event.clientX - rect.left) * (canvas.width / rect.width);
  const y = (event.clientY - rect.top) * (canvas.height / rect.height);
});

// 高精細な画面でぼやけないようにする。座標は SIZE × SIZE のまま書ける
const ratio = window.devicePixelRatio || 1;
canvas.width = SIZE * ratio;
canvas.height = SIZE * ratio;
ctx.scale(ratio, ratio);