スクロールして契約条項を確認後に同意ボタンが有効になるHTMLの解説

(Sample)

今回は、Webフォームにおける「契約条項に同意」のチェックボックスを全文を読まないと押せないようにするインタラクティブな実装について解説します。

実務でもよく登場する構成なので、Webエンジニアとしての基本スキルを養ううえでとても良い題材ですよ！

目的をざっくり言うと？

このコードは、「契約書の全文を読んだ人だけが同意チェックを入れられる」仕組みを作っています。

たとえば、よくあるWebサービスの登録時、「利用規約を最後までスクロールしないと同意できない」というの、見たことありませんか？

その実装を、HTMLとJavaScriptを使ってシンプルに再現しています。

どんな構成になってる？

構成はシンプルです：

契約文を入れるスクロールボックスとは？

<div class="terms-box" id="termsBox">...</div>

この部分は、CSSで高さを200pxに固定し、スクロールできるようにしています：

.terms-box {
  height: 200px;
  overflow-y: auto;
}

これにより、契約条項が長くても画面内に収まるコンパクトな表示になります。

例えるなら、契約書を閉じたまま読み飛ばして同意するのを防ぐ「ふた付き契約ボックス」みたいなものです。

チェックボックスが最初は押せない理由

<input class="form-check-input" type="checkbox" id="termsCheckbox" disabled />

• disabled属性により、最初はクリックできません。
• これは「まだ契約文を全部読んでいないから、同意できませんよ！」という制御。

JavaScriptで「読んだかどうか」を判定する仕組み

h3: スクロールイベントの取得

termsBox.addEventListener("scroll", function () {
  ...
});

JavaScriptでは、ユーザーが契約文をスクロールしたタイミングでリアルタイムに反応させています。

スクロール完了の判定ロジック

if (
  termsBox.scrollTop + termsBox.clientHeight >=
  termsBox.scrollHeight - 10
) {
  termsCheckbox.disabled = false;
}

この式はこう読むとわかりやすいです：

つまり：

スクロールした量 + 見えている高さ ≧ 全体の高さ − 少し余裕（10px）

→ これを満たしたら、「最後まで読んだ」とみなして、チェックボックスを有効にしています！

なぜ10ピクセル引いてるの？

スクロールの最後でピッタリ合わない場合もあります。機種やブラウザ差異を考慮して10ピクセル程度の誤差を許容しているわけです。

「完全に一致しなくても、ほぼ一番下まで見たならOK」という“人間っぽい柔軟さ”を持たせています。

よくある疑問に答えます！

Q1. なぜdisabledで最初に無効にしてるの？

→ ユーザーがスクロールする前にチェックを入れられないようにして、「契約を確認した」という流れをちゃんと守らせるためです。

Q2. なぜJavaScriptが必要なの？

→ HTMLやCSSだけでは「全文スクロールされたかどうか」は判定できません。動的に状態を監視するにはJavaScriptが必要です。

今後の学習の指針

今回のコードは、実務に直結する学びが詰まっています。

最後に一言！

「規約を読んで同意する」機能は、Webアプリにおける信用と責任の第一歩です。

ユーザー体験を良くしつつ、しっかりと法的な確認を取るにはどうすればいいか？という視点で、このコードを改良していくことも、次のレベルです。

「ちょっとした機能」に見えて、実はとても奥が深い。ぜひ一歩ずつ理解を深めてください！

最後までお読みいただきありがとうございます。