WinForms実習：配列とfor文でカードを5枚並べる

2026年3月5日2026年3月6日

この実習で学ぶこと

この実習では次の内容を体験します。

• Windowsフォームアプリ
• 配列
• for文
• 画面へのコントロール追加

最終的に、画面にカードを5枚並べます。

1 プロジェクトを作る

次を選択します。

Windows フォーム アプリ（C#)

ソリューション名・プロジェクト名

例　CardArraySample

作成を押します。

2 フォームを確認

次の画面が表示されます。

Form1

この白い画面が

アプリの画面

になります。

3 コードを開く

ソリューションエクスプローラーで

Form1.cs

を ダブルクリックします。

4 配列を追加する

クラスの中に次のコードを追加します。

// PictureBoxを5個まとめて管理する配列
PictureBox[] cards = new PictureBox[5];

場所はここです。

public partial class Form1 : Form
{

}

この中に書きます。

5 コンストラクタに処理を追加

次のコードを探します。

public Form1()
{
    InitializeComponent();
}

その下に追加します。

CreateCards();

つまりこうなります。

public Form1()
{
    InitializeComponent();

    CreateCards();
}

6 メソッドを追加する

クラスの中に次のメソッドを書きます。

void CreateCards()
{

}

7 カード生成コードを書く

CreateCards の中に次を書きます。

// カードを作って並べるメソッド
void CreateCards()
{
    // 左側の余白
    int startX = 20;

    // カードの間隔
    int space = 120;

    // 配列の数だけ繰り返す
    for (int i = 0; i < cards.Length; i++)
    {
        // PictureBoxを作る
        cards[i] = new PictureBox();

        // 横幅
        cards[i].Width = 100;

        // 高さ
        cards[i].Height = 150;

        // 横位置
        cards[i].Left = startX + i * space;

        // 縦位置
        cards[i].Top = 30;

        // 画像表示方法
        cards[i].SizeMode = PictureBoxSizeMode.StretchImage;

        // 画像を読み込む
        cards[i].Image = Image.FromFile("card.png");

        // 画面に追加
        this.Controls.Add(cards[i]);
    }
}

8 画像をプロジェクトに追加する

まず画像を用意します。

card.png

プロジェクトに追加

ソリューションエクスプローラーで

プロジェクト名

を 右クリック

追加
↓
既存の項目

を選択します。

card.png

を追加します。

プロパティ設定

追加した

card.png

をクリックします。

プロパティで

出力ディレクトリにコピー
↓
常にコピー

を選びます。

9 実行

Visual Studio 上部の

▶ 実行

または

F5

を押します。

10 実行結果

カードが5枚並びます。

今日のポイント

今回のプログラムの核心はこれです。

配列
+
for文

つまり

同じものをまとめて作る

ということです。

配列のイメージ

今回のコードでは

cards[0]
cards[1]
cards[2]
cards[3]
cards[4]

という PictureBoxの棚 を作っています。

for (int i = 0; i < cards.Length; i++)
{
    cards[i] = new PictureBox();

    cards[i].Width = 100;
    cards[i].Height = 150;

    cards[i].Left = startX + i * space;
    cards[i].Top = 30;

    cards[i].SizeMode = PictureBoxSizeMode.StretchImage;

    // 毎回ファイルを読み込んでいる
    cards[i].Image = Image.FromFile("card.png");

    this.Controls.Add(cards[i]);
}

Image cardImage = Image.FromFile("card.png");

for (int i = 0; i < cards.Length; i++)
{
    cards[i] = new PictureBox();

    cards[i].Width = 100;
    cards[i].Height = 150;

    cards[i].Left = startX + i * space;
    cards[i].Top = 30;

    cards[i].SizeMode = PictureBoxSizeMode.StretchImage;

    // 読み込んだ画像を共有
    cards[i].Image = cardImage;

    this.Controls.Add(cards[i]);
}

おまけ

行を増やすあれこれ

割り算の結果とあまりを使う方法（実務より）

using System.Drawing;
using System.Windows.Forms;

namespace CardArraySample
{
    public partial class Form1 : Form
    {
        // PictureBoxを5個まとめて管理する配列
        PictureBox[] cards = new PictureBox[10];

        public Form1()
        {
            InitializeComponent();

            CreateCards();
        }

        // カードを作って並べるメソッド
        void CreateCards()
        {
            // 左側の余白
            int startX = 20;

            // カードの間隔
            int space = 120;

            // 画像は1回だけ読み込む（重要）
            Image cardImage = Image.FromFile("card.png");

            // 配列の数だけ繰り返す
            for (int i = 0; i < cards.Length; i++)
            {
                // PictureBoxを作る
                cards[i] = new PictureBox();

                // 横幅
                cards[i].Width = 100;

                // 高さ（トランプらしくするなら150）
                cards[i].Height = 150;

                // 横位置
                cards[i].Left = startX + (i % 5) * space;

                // 縦位置
                cards[i].Top = 30 + (i / 5) * 180;

                // 画像表示方法
                cards[i].SizeMode = PictureBoxSizeMode.StretchImage;

                // 画像は共有して使う（重要）
                cards[i].Image = cardImage;

                // 画面に追加
                this.Controls.Add(cards[i]);
            }
        }
    }
}

２重ループを使う方法（授業より）

PictureBox[] cards = new PictureBox[10];

void CreateCards()
{
    int startX = 20;
    int space = 120;

    Image cardImage = Image.FromFile("card.png");

    int index = 0;

    for (int row = 0; row < 2; row++)
    {
        for (int col = 0; col < 5; col++)
        {
            cards[index] = new PictureBox();

            cards[index].Width = 100;
            cards[index].Height = 150;

            cards[index].Left = startX + col * space;
            cards[index].Top = 30 + row * 180;

            cards[index].SizeMode = PictureBoxSizeMode.StretchImage;
            cards[index].Image = cardImage;

            this.Controls.Add(cards[index]);

            index++;
        }
    }
}