配列を2行・3列に並べる考え方

2026年3月6日

- 0.1. 割り算と余りで画面配置を作る
1. 配列は1列しかない
2. 行と列を計算する
3. 表で確認する
4. 図で見るとこうなる
5. コードにするとこうなる
6. 実はこの考え方はよく使われる
7. 今日のポイント

割り算と余りで画面配置を作る

Windows Forms でカードや画像を並べるとき、最初はこのようなコードを書くことが多いと思います。

// 横に並べる
cards[i].Left = startX + i * space;
cards[i].Top = 30;

このコードは横一列に並びます。

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

しかし、アプリでは次のように複数行・複数列で並べることがあります。

[0] [1] [2]
[3] [4] [5]

今回は配列を2次元のように表示する方法を説明します。

配列は1列しかない

まず大事なことです。

配列は基本的に 1列です。

0 1 2 3 4 5

しかし、画面では次のように表示したいことがあります。

[0] [1] [2]
[3] [4] [5]

つまり

1列の配列 ↓ 2行3列の画面

に変換しています。

行と列を計算する

ここで使うのが

余り（%）
割り算（/）

です。

列が3つの場合は次の式になります。

列 = i % 3
行 = i / 3

表で確認する

i	i % 3	i / 3
0	0	0
1	1	0
2	2	0
3	0	1
4	1	1
5	2	1

ここで見るポイントはこれです。

余り → 横（列）
割り算 → 縦（行）

図で見るとこうなる

i = 0 → (0,0)
i = 1 → (1,0)
i = 2 → (2,0)

i = 3 → (0,1)
i = 4 → (1,1)
i = 5 → (2,1)

つまり画面では

[0] [1] [2]
[3] [4] [5]

になります。

コードにするとこうなる

int cols = 3;

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

    int col = i % cols;
    int row = i / cols;

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

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

    cards[i].SizeMode = PictureBoxSizeMode.StretchImage;
    cards[i].Image = Image.FromFile("card.png");

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