付録K　この研修で使う最低限のHTML

この付録の位置づけ

この付録は、研修前に オンライン動画講座で学んだ HTML / CSS の基礎を、軽くおさらいする ためのものです。「だいたい覚えているけれど、いざ Web 編(第 26〜30 章)に入ると不安」という人のためのセーフティネットとして用意しました。

ねらいは 1 つだけです。

第 26〜30 章のビュー(.cshtml)を見たときに、「これは何を表しているか」が読めるようになる。

ここで目指すのは 「読めること」 であって、HTML をゼロからスラスラ書けるようになることではありません。実際にコードを書く場面は各章のステップで少しずつ出てくるので、ここでは 登場するタグの意味が分かる ところまでで十分です。

この付録の使い方

最初から順に読んでもよいし、Web 編で分からないタグが出てきたときに引く 辞書として使ってもOKです。

提出はありません。章末に 軽い「読む練習」 を 2 問だけ置いています(答え合わせはペアや講師と)。

出てくるタグは、この研修の .cshtml に実際に出てくるものだけ に絞っています。HTML 全体の網羅は狙っていません。

K-1　HTML って何だっけ(超基本)

HTML は、画面の「構造」を表すための言葉 です。ブラウザは HTML を読んで、見出し・段落・ボタン・表などを画面に描きます。

基本の形はタグで文字を挟むことです。

<p>こんにちは</p>

<p> … 開始タグ
</p> … 終了タグ(/ が付く)
この <p>こんにちは</p> 全体を 要素(element) と呼びます。

入れ子(タグの中にタグ)

要素の中に、別の要素を入れられます。これを 入れ子(ネスト) と言います。読むときは インデント(字下げ) を手がかりにすると、どれがどれの中にあるか分かります。

<div>
    <h1>社員管理</h1>
    <p>社員の一覧を表示します。</p>
</div>

この例では、<h1> と <p> が <div> の中にあります。

属性(タグに付け足す情報)

開始タグの中には、属性を書けます。属性名="値" の形です。

<a href="https://example.com">サイトを開く</a>

href="..." が属性で、「リンク先の URL」を表します。
属性は 1 つの開始タグに複数書けます(スペースで区切る)。

終了タグを忘れると崩れます

</p> のような終了タグを忘れると、レイアウトが崩れることがあります。Visual Studio は終了タグを自動で補ってくれることが多いので、慌てずに直しましょう。

K-2　まず覚える「文章まわり」のタグ

第 26〜30 章でよく出てくる、文章や画面の骨組みを作るタグです。

タグ	役割	例
`<h1>`〜`<h2>`	見出し(大きい文字)	`<h1>社員一覧</h1>`
`<p>`	段落(ひとまとまりの文)	`<p>該当する社員はいません。</p>`
`<div>`	意味を持たない「箱」。まとめて囲む	`<div> ... </div>`
`<span>`	文中の小さな範囲を囲む	`<span>エラー</span>`
`<a>`	リンク(別ページへ移動)	`<a href="/Employees">一覧へ</a>`
`<button>`	ボタン	`<button>検索</button>`

例:

<h1>社員管理</h1>
<p>下のボタンから操作してください。</p>
<a href="/Employees/Index">一覧を見る</a>

Web 編では、<a> のリンク先を直接 URL で書く代わりに、asp-controller / asp-action(後述 K-6)で指定することが多くなります。見た目は変わりますが、「クリックすると別の画面へ行くリンク」 という役割は同じです。

K-3　入力フォームのタグ(入力画面で使う)

名前や検索条件を 入力して送信する 画面で使うタグです。第 26 章(占いの入力)、第 29 章(検索)、第 30 章(社員の登録・編集)で登場します。

タグ	役割
`<form>`	入力欄をまとめ、送信の単位にする箱
`<label>`	入力欄の見出し(「氏名」など)
`<input>`	1 行の入力欄(文字・数値・日付など)。`type` で種類を変える
`<select>` + `<option>`	プルダウン(選択肢から選ぶ)
`<button>`	送信ボタン(`type="submit"`)

例(イメージ):

<form>
    <label>氏名</label>
    <input type="text" name="UserName" />

    <label>部署</label>
    <select name="DepartmentId">
        <option value="1">総務</option>
        <option value="2">営業</option>
    </select>

    <button type="submit">送信</button>
</form>

この中でも <input> と <select> は形が違うので、段落を分けて見ておきます。

`<input>`(1 行の入力欄)

文字・数値・日付などを 1 行で入力 する欄です。

<input> には終了タグがなく、<input ... /> のように 1 つで完結 します。
type で種類が変わります ── type="text" は文字入力、type="number" は数値、type="date" は日付の入力欄になります。
type="hidden" は 画面に表示されない入力欄 です(編集時に「どの社員か」を裏で持つ、などに使います。第 30 章)。

`<select>`(プルダウン)

選択肢の中から 1 つを選ばせる欄です。<input> と違って <select> と <option> の 2 種類のタグを組み合わせる点が、少しややこしいところです。

<select> は プルダウンの箱、中の <option> が 選択肢 1 つ 1 つ です。
<option value="1">総務</option> には 2 つの顔 があります ── value="1" がサーバーに送られる値、タグで囲んだ「総務」が画面に見える表示 です。「画面では部署名を選ぶのに、サーバーには ID(数字)が届く」というように、見せる文字と送る値を別々に持てる のが特徴です。
最初から選ばれた状態にしたい選択肢には、<option value="1" selected>総務</option> のように selected を付けます。
<select name="DepartmentId"> の name も、<input> と同じく 送信のキー です(下記)。

プルダウンの選択肢は固定で書かないことが多い

実際の画面では <option> を 1 つずつ手書きせず、@foreach でデータベースの一覧から作る ことがほとんどです(第 28・29 章)。組み立ての詳しい流れ(@foreach がサーバーで素の <option> に展開される様子)は 第 29 章 29-8 にあります。

name 属性がいちばん大事(<input>・<select> 共通)

<input name="UserName"> や <select name="DepartmentId"> の name の値 が、送信先(サーバー側の C# プログラム)で受け取るときのキーになります。name="UserName" の入力は model.UserName に届く――この「名前で結びつく」しくみが、第 26 章 26-10 で学ぶ Model Binding です。Web 編の .cshtml では、この name を自動で付けてくれる asp-for(K-6)をよく使います。

K-4　表のタグ(一覧で使う)

社員一覧のように、行と列のデータを並べて見せる ときに使います。第 28〜30 章で登場します。

タグ	役割
`<table>`	表全体
`<thead>` / `<tbody>`	見出し行のかたまり / データ行のかたまり
`<tr>`	1 行(table row)
`<th>`	見出しのセル(table header)
`<td>`	データのセル(table data)

例(静的な 2 名分):

<table>
    <thead>
        <tr>
            <th>社員番号</th>
            <th>氏名</th>
            <th>部署</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1001</td>
            <td>山田 二郎</td>
            <td>総務</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>佐藤 昭夫</td>
            <td>営業</td>
        </tr>
    </tbody>
</table>

実際の一覧画面では、データ行(<tr>)を 1 行ずつ手で書くのではなく、@foreach でデータベースから取った社員の数だけ繰り返して 作ります(第 28 章)。骨組みのタグは、上の例とまったく同じです。

K-5　`class` 属性と Bootstrap(見た目)― ひとことだけ

タグには、見た目を整えるための class 属性 がよく付いています。

<button class="btn btn-primary">検索</button>
<table class="table">...</table>
<div class="alert alert-info">該当する社員はいません。</div>

この class="btn btn-primary" のような名前は、Bootstrap(ブートストラップ) という できあいのスタイル集 の名前です。研修では、この Bootstrap を借りて画面の見た目を整えます。

覚えることは 1 つだけです。

class の中身(どう見えるか)は、暗記しなくて構いません。 「この class を付けると、ボタンが青くなる/表が見やすくなる」という程度の理解で十分です。各章では「この一行を足すと見やすくなります」という形で軽く触れるだけにしています。class を消しても 動作は変わりません(見た目が素朴になるだけです)。

よく使うクラス早見(暗記不要・困ったとき用)

下の表は 「この class を付けると何が起きるか」 をざっと見るためのものです。暗記は不要で、書いてある class をそのまま真似れば動きます。

(A) この研修でよく出てくるもの

class	何が起きるか	主な使用章
`form-control`	入力欄(`<input>`/`<select>`)が幅広で整う	26 / 29 / 30
`form-label`	ラベル文字が入力欄の上にきれいに並ぶ	26 / 29 / 30
`btn` ＋ `btn-primary` / `btn-secondary` / `btn-danger`	ボタンの色(青=主操作 / 灰=副操作 / 赤=危険)	Web 編全体
`btn-outline-primary` / `btn-sm`	枠線だけのボタン / 小さいボタン	30
`table`	表に罫線と余白が付いて見やすくなる	27〜30
`mb-3` / `mt-3`	下 / 上に余白(数字は 0〜5 で大きさ)	Web 編全体
`row g-3` ＋ `col-auto`	部品を横並びにし、間隔(gap)を空ける	29
`text-danger` / `text-muted` / `small`	赤文字 / 薄い灰文字 / 小さい文字	27 / 29 / 30
`alert alert-info`	情報メッセージの枠(水色の帯)	26

(B) 最終演習で使うと便利そうなもの

class	何が起きるか	使いどころ
`alert alert-success` / `alert-danger`	緑=成功 / 赤=失敗のメッセージ帯	「保存しました」などの通知
`table-striped` / `table-hover`	行が縞模様 / マウスを乗せた行が光る	一覧を見やすく
`badge bg-primary` / `bg-secondary`	小さなラベル(タグ風)	保有資格名などをタグ表示
`card`(＋ `card-body`)	枠で囲んだカード	情報をまとまりで見せる

簡単な使い方

<!-- ボタン:btn に色クラスを足す -->
<button type="submit" class="btn btn-primary">登録</button>

<!-- 入力欄1つぶん:ラベル＋入力欄を mb-3 でひとまとまりに -->
<div class="mb-3">
    <label for="lastName" class="form-label">姓</label>
    <input type="text" id="lastName" name="lastName" class="form-control" />
</div>

<!-- 表:table を付けるだけ(縞模様にするなら table-striped も) -->
<table class="table table-striped">...</table>

<!-- 成功メッセージ -->
<div class="alert alert-success">保存しました。</div>

<!-- タグ風ラベル -->
<span class="badge bg-primary">Oracle Silver</span>

公式ドキュメント(具体的な使い方を調べたいとき)

クラスの一覧や見本は公式ドキュメントが分かりやすいです(研修で使うのは Bootstrap 5。Visual Studio のテンプレートに同梱されています)。

日本語訳:https://getbootstrap.jp/docs/5.3/
本家(英語):https://getbootstrap.com/docs/5.3/

よく見るページ(日本語):

調べたいもの	ページ
ボタン	https://getbootstrap.jp/docs/5.3/components/buttons/
フォーム(入力欄)	https://getbootstrap.jp/docs/5.3/forms/overview/
表	https://getbootstrap.jp/docs/5.3/content/tables/
余白(margin / padding)	https://getbootstrap.jp/docs/5.3/utilities/spacing/
横並び(グリッド)	https://getbootstrap.jp/docs/5.3/layout/grid/
アラート / バッジ / カード	「コンポーネント」内(例:https://getbootstrap.jp/docs/5.3/components/alerts/)

ページの左メニューから他の部品も探せます。まず 見本のコードをコピーして動かし、class を 1 つずつ外して変化を見ると、何の class が何をしているか早く分かります。

K-6　HTML と Razor(`.cshtml`)の関係

Web 編で開くビューのファイルは、拡張子が .cshtml です。これは 「HTML + ちょっとした C#」 が混ざったファイルで、3 種類のものが出てきます。

見た目	正体	例
ふつうのタグ	HTML	`<h1>`、`<table>`、`<input>`
`@` で始まる	Razor(C# の値や繰り返しを差し込む)	`@Model.UserName`、`@if`、`@foreach`
`asp-` で始まる属性	タグヘルパー(ASP.NET Core の便利属性)	`asp-for`、`asp-action`、`asp-route-id`

@model / @Model.XXX … C# 側から渡されたデータを画面に差し込みます。
@if / @foreach … 条件で出し分けたり、データの数だけ行を繰り返したりします(サーバー側で HTML を組み立てます)。
asp-for="UserName" … 入力欄に name="UserName" などを 自動で付けてくれる 属性です。
asp-controller / asp-action / asp-route-id … リンクやフォームの送信先を指定します。

これらは最終的に、サーバー側でふつうの HTML に変換されてからブラウザに届きます(.cshtml そのものはブラウザには行きません。詳しくは第 26 章 26-6)。だから、読むときのコツはこうです。

@… や asp-… を頭の中で一度消してみる。 残るのは、この付録で見てきた ただの HTML です。まず HTML の骨組みを読み、そのあとで「@ や asp- が何を足しているか」を考えると、.cshtml がぐっと読みやすくなります。

仕組みの詳しい解説は第 26 章にあります:26-6(.cshtml がサーバーで HTML に変わる)、26-9(asp-for が name="..." を生成する様子)、26-12「MVC の『おまじない』早見表」。

コメント(メモ書き)― `` と `@* *@`

コードの中に 人間向けのメモ を残すのがコメントです。.cshtml は HTML と Razor が混ざっているので、コメントも 2 種類 あります。

書き方	種類	例
`<!-- メモ -->`	HTML コメント	`<!-- ここは社員一覧 -->`
`@* メモ *@`	Razor コメント	`@* あとで消す仮メモ *@`

違いは「どこまで届くか」です。

HTML コメント  … サーバーで消されず、そのままブラウザに届きます。画面には表示されませんが、ブラウザの「ページのソースを表示」で 誰でも読めてしまいます。
Razor コメント @* *@ … サーバー側で消されるため、ブラウザにはまったく届きません(ソースにも残りません)。

@* このメモはブラウザに届かない(Razor コメント) *@
<!-- このメモはブラウザのソースに残る(HTML コメント) -->
<p>社員一覧</p>

使い分けの目安

開発中のメモや、外に見せたくない説明は @* *@(Razor コメント) にしておくと安全です。 はソースを見れば誰でも読めるので、内部の都合や見せたくない情報は書かないようにします。

なお、C# のコード(Controller など .cs ファイル)のコメントは、これまでどおり // や /* */ です(第 1 章・第 7 章コラム)。場所によってコメントの書き方が変わる(.cs=//、HTML=、Razor=@* *@)と整理しておきましょう。

K-7　まとめ:どの章でどのタグを使う?

タグ / 要素	主に使う場面
`<h1>` `<p>` `<div>` `<a>` `<button>`	全体(画面の骨組み・移動)
`<form>` `<label>` `<input>` `<select>` `<option>`	入力画面(第 26 章占い、第 29 章検索、第 30 章登録・編集)
`<table>` `<thead>` `<tbody>` `<tr>` `<th>` `<td>`	一覧画面(第 28〜30 章)
`<span>`(`asp-validation-for`)	入力エラーの表示(第 30 章)
`class="..."`(Bootstrap)	全体(見た目)

読む練習(提出はありません)

考えたら、ペアや講師と答え合わせをしてみましょう。

練習 K-1　この HTML は画面に何を出す?

次の HTML を読んで、画面に何がどう表示されるか を言葉で説明してみてください。

<div>
    <h1>占い結果</h1>
    <p>山田二郎 さんの今日の運勢</p>
    <a href="/Fortune/Index">もう一度占う</a>
</div>

練習 K-2　どの入力欄が、どこに届く?

次の <form> を読んで、それぞれの入力欄が、サーバー側のどのプロパティ(model.◯◯)に届くか を答えてみてください(ヒント:name 属性に注目。第 26 章 26-10 の Model Binding)。

<form>
    <label>氏名</label>
    <input type="text" name="LastName" />

    <label>給与</label>
    <input type="number" name="Salary" />

    <button type="submit">登録</button>
</form>

この付録のまとめ

HTML は タグで画面の構造を表す 言葉。基本は「開始タグ … 終了タグ」「入れ子」「属性」。
この研修で出てくるのは、文章まわり / フォーム / 表 の 3 グループと、見た目の class(Bootstrap)だけ。
.cshtml は 「HTML + @… + asp-…」。@ と asp- を一度消すと、残りはただの HTML。
目標は 「読めること」。書くのは各章のステップで少しずつ身に付けば十分です。

次は第 26 章からの Web 編で、これらのタグが実際の画面になっていく様子を見ていきましょう。

` と `@* *@`」を新設**=HTMLコメントはブラウザに届きソース表示で読める/Razorコメントはサーバーで消え届かない、の違いを表＋例＋使い分け(秘密はRazorコメント)で解説、`.cs`は`//`・`/* */`との3種整理も補足。追記のみ・既存説明は不変。**従前**:2026-06-17〔K-3に`(プルダウン)が表・例には載るが``のような個別解説が無く手薄**(ややこしいタグなので説明が欲しい)。K-3の``系ポイントの後に`

付録K この研修で使う最低限のHTML

この付録の位置づけ

K-1 HTML って何だっけ(超基本)

入れ子(タグの中にタグ)

属性(タグに付け足す情報)

K-2 まず覚える「文章まわり」のタグ

K-3 入力フォームのタグ(入力画面で使う)

<input>(1 行の入力欄)

<select>(プルダウン)

K-4 表のタグ(一覧で使う)

K-5 class 属性と Bootstrap(見た目)― ひとことだけ