HTMLとCSSで画面を読む｜入力欄・ボタン・見た目の仕組み

予約フォームのボタンの色が変わった。文字も大きくなった。では、入力したデータも変わったのでしょうか。前回はブラウザ・サーバー・保存の関係を整理しました。今回は同じ架空の予約希望フォームで、HTMLとCSSの役割を読み解きます。

院長・スタッフ向けの技術基礎解説です。患者番号「00123」、希望日時、送信ボタンは説明用の架空例で、実際の患者情報や院内画面を使っていません。特定製品の実装・動作確認報告ではありません。

1．HTMLは「何があるか」を表す

HTMLは、見出し、文章、入力欄、ボタンなど、ページの内容と構造を表す言語です。架空のフォームなら「患者番号という項目名」「番号を入れる欄」「希望日時の欄」「送信ボタン」を、それぞれの役割に合う要素で記述します。

たとえば、項目名にはlabel、入力欄にはinput、ボタンにはbuttonという要素があります。これらの名前を暗記するより、「文字に見えている項目名と、実際に入力する欄には関係がある」と理解することが入口です。

MDN「Basic HTML syntax」「What is CSS?」を基にした独自の説明表。2026年10月23日確認。見た目の指定は、保存処理の説明ではありません。

「患者番号」という文字を入力欄の近くに置くだけでは、両者の関係を十分に伝えられません。HTMLでは、ラベルのforと入力欄のidを同じ値にすると、明示的に関連付けられます。

<label for="patient-id">患者番号</label>
<input id="patient-id" type="text" value="00123">

これは読むためのコード例で、入力・送信はできません。実際のフォームで正しく関連付けると、ラベルを選んで入力欄へ移れたり、読み上げなどの支援技術へ項目名を伝えたりできます。見た目だけでなく、使う人に役割が伝わる構造が大切です（MDN：label）。

CSSは、文字の大きさや色、余白、枠線、配置などを指定します。同じ入力欄でも、広くしたり、項目を縦に並べたり、ボタンの背景を変えたりできます。独自のCSSを書かなくても、ブラウザの標準の見た目で表示される部分があります。

見た目を変えても、番号は同じ

変更前：患者番号 00123

見た目の変更後：患者番号 00123

静的な説明図です。枠線や背景を変えた例であり、番号の変更・送信・保存は行いません。

院内で改善を依頼するなら、「見づらい」だけでなく「項目名を大きく」「欄の間隔を広く」などと伝えると、表示の課題を具体化できます。ただし、実際に入力しやすいかは、使う端末や操作方法で確かめる必要があります。

患者番号「00123」は計算する数量ではなく、照合のための識別子です。この例では文字列として扱い、先頭のゼロを残します。文字入力用のtype="text"を使うだけでなく、送信後の処理や保存先でも文字列を保持する設計と確認が必要です。番号への置き換えだけを匿名化とは扱いません。

また、欄やボタンが緑色になっても、それだけで保存完了や予約確定とは判断できません。入力形式の判定を色で示しているだけの場合もあります。ボタンが見えることも、その操作権限の証明にはなりません。画面表示、入力内容、送信、保存結果を分けて確認します。

HTMLの標準機能でもフォームを送信でき、送信に必ずJavaScriptが必要なわけではありません。受け取った情報をどう確認し保存するかは、サーバー側などの実装に依存します。次回は、クリックへの反応など、JavaScriptが画面の動きをどう支えるかを同じ架空例で説明します。

いずれも2026年10月23日に本文を確認。図表・コードは仕組みを説明する独自の架空例です。本記事はAIの作成支援を利用しています。公開後に運営者が確認し、必要に応じて追記・修正します。