このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。
【6日でできるVisual Basic2022入門】③画面の設計②（画面の作成）
３．画面の設計②（画面の作成）
今回は「③ 画面の設計②（画面の作成）」です。前章で用意したフォーム（ひな形）の上に、必要なコントロールを貼り付けて、名前や表示・配置を整えます。
3.1. 必要なコントロール一覧（貼り付け前に全体像を把握）
| 役割 | 種類 | (Name) | Text（表示） | 主なプロパティ（例） |
|---|---|---|---|---|
| タイトル | Form | MainForm | BMI チェッカー | StartPosition=CenterScreen, FormBorderStyle=FixedDialog, MaximizeBox=False |
| 身長ラベル | Label | HeightLabel | 身長(cm) | AutoSize=True |
| 身長入力 | TextBox | HeightTextBox | （空） | TabIndex=0 |
| 体重ラベル | Label | WeightLabel | 体重(kg) | AutoSize=True |
| 体重入力 | TextBox | WeightTextBox | （空） | TabIndex=1 |
| 計算ボタン | Button | CalcButton | BMI を計算 | TabIndex=2 |
| BMI ラベル | Label | BmiLabel | BMI： | AutoSize=True |
| BMI 表示 | TextBox | BmiTextBox | （空） | ReadOnly=True, TabStop=False |
| 判定ラベル（見出し） | Label | JudgeLabel | 判定： | AutoSize=True |
| 判定表示 | Label | ResultLabel | 判定結果がここに表示されます | AutoSize=True, ForeColor=DarkBlue |
| ガイド文 | Label | GuideLabel | 身長(cm) と体重(kg)を入力してください | AutoSize=True, ForeColor=DimGray |
3.2. 配置手順（ドラッグ＆ドロップ → 名前 → Text → 位置合わせ）
ワイヤーフレーム（完成イメージ）
- ツールボックスから Label をフォーム左上に貼り付け、(Name)=HeightLabel、Text=「身長(cm)」。
- 右側に TextBox を貼り付け、(Name)=HeightTextBox。
- 同様に、WeightLabel／WeightTextBox を Height の下に縦並びで配置。
- 下段中央に Button を貼り付け、(Name)=CalcButton、Text=「BMI を計算」。必要に応じて幅を広げる。
- ボタンの下に Label（BmiLabel、Text=「BMI：」）と TextBox（BmiTextBox）を横並びで配置。BmiTextBox は ReadOnly=True。
- 下側に Label（JudgeLabel、Text=「判定：」）と Label（ResultLabel、初期文言）を横並びで配置。
- フッター位置にガイド Label（GuideLabel）を配置。
3.3. 配置・整列のコツ（スナップライン／等間隔／タブ順）
| 目的 | 操作 | 観点 |
|---|---|---|
| 左右位置を揃える | ラベル列・テキストボックス列をドラッグし、赤いスナップラインで左端／下端を合わせる。 | 見出し列と入力列の縦並びを統一 |
| 余白の統一 | コントロール間の上下間隔をおおむね 8～12px 程度に統一 | 可読性向上 |
| タブ順の設定 | メニュー［表示］→［タブ オーダー］で 0→1→2…の順にクリック | HeightTextBox=0、WeightTextBox=1、CalcButton=2 |
| 読み取り専用欄 | BmiTextBox.ReadOnly=True、TabStop=False | フォーカスが移動しないようにする。 |
| Enter キー実行 | フォームの AcceptButton=CalcButton | キーボード操作性向上 |
3.4. プロパティ設定（推奨値の具体例）
| コントロール | プロパティ | 値 | 目的 |
|---|---|---|---|
| MainForm | AcceptButton | CalcButton | Enterで計算 |
| MainForm | Font | Yu Gothic UI, 10pt | 日本語表示を見やすく |
| BmiTextBox | ReadOnly | True | 直接編集を防ぐ |
| BmiTextBox | TextAlign | Right | 数値を右寄せ |
| BmiTextBox | TabStop | False | フォーカスが移動しないようにする。 |
| ResultLabel | ForeColor | DarkBlue | 視認性アップ |
| CalcButton | AutoSize | False（幅を手動調整） | ラベルの長さに合わせる。 |
| GuideLabel | ForeColor | DimGray | 補助説明のトーンダウン |
3.5 ちょい足しコード（フォームロード時に最終調整：任意）
デザイナーで設定できる内容が中心ですが、コードでまとめて指定すると再現性が上がります。
MainFormに次を追加します。
Option Strict On
Option Infer On
Public Class MainForm
Private Sub MainForm_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Me.AcceptButton = CalcButton
BmiTextBox.ReadOnly = True
BmiTextBox.TabStop = False
BmiTextBox.TextAlign = HorizontalAlignment.Right
ResultLabel.Text = "判定結果がここに表示されます"
GuideLabel.Text = "身長(cm) と体重(kg)を入力してください"
End Sub
End Class3.6. この章で出てくる Visual Basic 2022 の構文・概念（要点解説）
| 構文/概念 | 役割 | ミニ例 | ポイント |
|---|---|---|---|
Handles MyBase.Load | フォーム表示直前の初期化イベント | Private Sub MainForm_Load … Handles MyBase.Load | 初期プロパティ設定に最適 |
| フォームのプロパティ設定 | 画面全体の振る舞いを指定 | Me.AcceptButton = CalcButton | Enter キーでの実行 |
| TextBox の振る舞い | 入力可否や配置調整 | BmiTextBox.ReadOnly = True | 読み取り専用欄の安全化 |
| ラベルの初期文言 | ガイド・ヘルプの提示 | ResultLabel.Text = "..." | 日本語で明確に伝える |
3.7. 実行して見た目を確認
- 「▶BmiChecker」でフォームを表示。
- Tab キーで「身長→体重→ボタン」の順に移動するか確認。
- BmiTextBox が編集できない（ReadOnly）ことを確認。
3.8. つまずき対策（チェックリスト）
| 症状 | 確認ポイント |
|---|---|
| ボタンに Enter が効かない | MainForm.AcceptButton に CalcButton が設定されているか |
| タブ順がおかしい | ［表示］→［タブ オーダー］で 0,1,2…を正しくクリックしたか |
| 文字が見切れる | Label.AutoSize=True、フォント・サイズを見直す |
| 結果欄に入力できてしまう | BmiTextBox.ReadOnly=True／TabStop=False を設定したか |
| 配置がずれる | スナップラインで位置合わせ、FormBorderStyle=FixedDialog を再確認 |
次章への接続
ここまでで、BMI 入力・実行・結果表示の UI が形になりました。次の「④ 入力データの取り出し方法」では、TextBox の Text プロパティから値を取得して変数に格納する手順、データ型（Double など）と型変換の基本（TryParse／ToString）を、実コード付きで解説します。さらに「⑤ ボタンをクリックしたときの処理」でイベントハンドラーに本処理（BMI 計算）を組み込みます。