このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【6日でできるVisual Basic2022入門】③間違い漢字探しゲーム：画面の設計①

③間違い漢字探しゲーム：画面の設計①

　本章では、画面を上下二段に分ける SplitContainer を配置し、上段＝操作エリア（探す漢字・記録・Start）、下段＝ゲーム盤（4×4 ボタン）の土台を作ります。Orientation=Horizontal、Dock=Fill、SplitterDistance≈70px（最小70px）を推奨。リサイズに強くするため Panel1/2 の MinSize と、割合ベースの距離調整（Load/Resizeで再計算）も紹介。次章で各コントロールを配置できる状態に整えます。

３．間違い漢字探しゲーム：画面の設計①－SplitContainerコントロールの配置

3.1. この章のゴール

  • 画面を「上＝操作（探す漢字・記録・開始）」「下＝ゲーム盤（4×4 のボタン）」に上下分割
  • リサイズしても比率が破綻しない SplitterDistance 設計
  • 次章でコントロールを貼るための“土台”を完成

3.2. ワイヤーフレーム（上下分割）

3.3. SplitContainer の基本

用語概要本アプリでの使い所
SplitContainer2 枚の Panel を Splitter で区切るコンテナ上下で“機能分離”し操作性UP
OrientationHorizontal（上下）/Vertical（左右）Horizontal を選択
SplitterDistance先頭側パネル境界からの距離（px）上段の高さを確保
IsSplitterFixedスプリッタ固定（true）/可動（false）学習用は可動のまま

3.4. 配置手順（デザイナ）

SplitContainer の配置

１．ツールボックスの「コンテナー」を展開します。

２．SplitContainerをフォームに配置して、「SplitContainer」上を右クリックします。

ポップアップメニューから「SplitContainer」を選択します。

３．右上の「▶」をクリックして、メニューを表示します。

「上下スプリッターの方向」を選択します。

パネルが上下分割に切り替わります。

４．「SplitterDistance」を70にします。

５．フォーム全面に広げる（Dock=Fill を推奨）※デフォルト値

SplitContainer1 の推奨プロパティ

プロパティ設定値ねらい
(Name)SplitContainer1コードから参照しやすく
OrientationHorizontal上下分割
DockFill余白なく全面使用
SplitterDistance70（目安）上段の操作エリア確保
SplitterWidth6つまみやすい幅
Panel1MinSize70上段が潰れないように
Panel2MinSize300盤面確保（4×4 配置に必要）
FixedPanelNone双方が伸縮
IsSplitterFixedFalse実行時に調整可能

3.5. リサイズ安定化のための補助コード（任意）

　高さに応じて SplitterDistance を自動調整します。フォームの Load と Resize で共通関数を呼ぶだけです。

Public Class FormKanjiHunt
    Private Sub FormKanjiHunt_Load(sender As Object, e As EventArgs) _
        Handles MyBase.Load
        AdjustSplitter()
    End Sub

    Private Sub FormKanjiHunt_Resize(sender As Object, e As EventArgs) _
        Handles MyBase.Resize
        AdjustSplitter()
    End Sub

    ' 上段を 18〜22% 程度に保つ例
    Private Sub AdjustSplitter()
        Dim ratio As Double = 0.2
        Dim h As Integer = SplitContainer1.Height
        Dim top As Integer = CInt(Math.Max(70, Math.Min(h * ratio, 140)))
        ' 最小サイズを尊重しつつ設定
        SplitContainer1.SplitterDistance = top
    End Sub
End Class

ポイント

  • “割合＋上下限”で安定。小画面でも上段が潰れず、大画面でも過度に大きくならない。
  • Dock=Fill にしておくと、フォームサイズ変更に自動追従。

3.6. Panel1/Panel2 に後続の役割ラベルを仮置き（任意）

配置確認のため、仮ラベルを置いておくと視認性が上がります（次章で削除可）。

対象追加プロパティ例
Panel1Label（上段）Text="操作エリア（探す文字／記録／Start）", Dock=Top
Panel2Label（下段）Text="ゲーム盤（4×4）", Dock=Top

3.7. Anchor/Dock の考え方

機能使い方本章での推奨
Dock親の辺に“張り付く”SplitContainer1.Dock = Fill
Anchor指定辺との距離を保持次章で個別コントロールに設定
併用同一コントロールでの併用は非推奨片方に統一

3.8. VB 2022 の関連イベント・命令（この章で登場）

要素概要用例
Handles MyBase.Loadフォーム初期化初期 SplitterDistance 設定
Handles MyBase.Resizeサイズ変更時の追従比率維持の再計算
SplitContainer.SplitterMovedユーザー操作検知将来、位置の保存に応用
DockStyle.Fill全面配置SplitContainer1.Dock = DockStyle.Fill

3.9. 配置チェックリスト

  • SplitContainer1 が 上下分割になっている。
  • Dock=Fill でフォーム全面に展開
  • 上段が約 70px（目安）で、最小 70px を下回らない。
  • リサイズしても Panel2（盤面側）が十分な広さを保つ。
  • 実行時にスプリッターをドラッグして高さ調整できる。

3.10. 次章への引き継ぎ（4×4 盤の土台）

  • Panel1（上段）：TextHunt（探す文字）、TextTimer（記録・右寄せ）、ButtonStart、見出し Label を横並び配置
  • Panel2（下段）：4×4＝16 個の Button を等間隔で配置（フォント大きめ、次章のプロパティ表で詳述）
  • Timer1：フォームに追加（コンポーネントトレイ、Interval は後で設定）

まとめ

　本章では、SplitContainer で上下二段構成を確立し、SplitterDistance を“割合＋上下限”で安定化させました。これで操作エリアとゲーム盤を明確に分離でき、リサイズにも強い土台が完成です。次章「④画面の設計②－コントロールの配置とプロパティ値の設定」で Panel1/Panel2 に具体的なコントロール（テキストボックス／ラベル／ボタン／4×4 ボタン群／タイマー）を配置し、プロパティ値を確定します。