手順 1: プロジェクトの作成とフォームへのテーブルの追加Step 1: Create a Project and Add a Table to Your Form

絵合わせゲームの作成における最初の手順は、プロジェクトの作成とフォームへのテーブルの追加です。The first step in creating a matching game is to create the project and add a table to your form. テーブルはアイコンを 4 x 4 のグリッドに整列させるために便利です。The table helps align the icons into an orderly 4x4 grid. いくつかのプロパティの設定も行ってゲーム ボードの見栄えが良くなるようにします。You also set several properties to enhance the appearance of the game board.

プロジェクトを作成し、フォームにテーブルを追加するにはTo create a project and add a table to your form

  1. メニュー バーで、 [ファイル][新規作成][プロジェクト]の順にクリックします。On the menu bar, choose File, New, Project.

  2. Visual Studio Express を使用していない場合は、最初にプログラミング言語を選択する必要があります。If you're not using Visual Studio Express, you need to select a programming language first. [インストールされたテンプレート] ボックスの一覧で、[Visual C#] または [Visual Basic] を選択します。From the Installed Templates list, choose either Visual C# or Visual Basic.

  3. プロジェクト テンプレートの一覧で [Windows フォーム アプリケーション] テンプレートを選択し、プロジェクトに 「MatchingGame」 という名前を付けて、[OK] をクリックします。In the list of project templates, choose Windows Forms Application, name the project MatchingGame, and then choose the OK button.

  4. [プロパティ] ウィンドウで、次のフォーム プロパティを設定します。In the Properties window, set the following form properties.

    1. フォームの Text プロパティを Form1 から Matching Game に変更します。Change the form's Text property from Form1 to Matching Game. このテキストはゲーム ウィンドウの上部に表示されます。This text appears at the top of the game window.

    2. フォームのサイズとして幅を 550 ピクセル、高さを 550 ピクセルに設定します。Set the size of the form to 550 pixels wide by 550 tall. そのためには、Size プロパティを 550, 550 に設定します。または、統合開発環境 (IDE) の右下隅に適切なサイズが表示されるまで、フォームの隅をドラッグします。You can do this either by setting the Size property to 550, 550, or by dragging the corner of the form until you see the correct size in the lower-right corner of the integrated development environment (IDE).

  5. IDE の左側にある [ツール ボックス] のタブをクリックして、ツール ボックスを表示します。Display the toolbox by choosing the Toolbox tab on the left side of the IDE.

  6. ツール ボックスの [コンテナー] カテゴリから TableLayoutPanel コントロールをフォームにドラッグし、次のプロパティを設定します。Drag a TableLayoutPanel control from the Containers category in the toolbox, and then set the following properties for it.

    1. BackColor プロパティを CornflowerBlue に設定します。Set the BackColor property to CornflowerBlue. そのためには、[プロパティ] ウィンドウで BackColor プロパティに横にあるドロップダウン矢印をクリックして、[BackColor] ダイアログ ボックスを開きます。To do this, open the BackColor dialog box by choosing the drop-down arrow next to the BackColor property in the Properties window. 次に、[BackColor] ダイアログ ボックスの [Web] タブをクリックして、使用できる色の名前の一覧を表示します。Then, choose the Web tab in the BackColor dialog box to view a list of available color names.

      注意

      色はアルファベット順に並んでいません。CornflowerBlue は一覧の下部にあります。The colors are not in alphabetical order, and CornflowerBlue is near the bottom of the list.

    2. プロパティの横のドロップダウン ボタンをクリックし、大きな中央ボタンをクリックして、Dock プロパティを Fill に設定します。Set the Dock property to Fill by choosing the drop-down button next to the property and choosing the large middle button. これによりテーブルがフォーム全体に広がって表示されます。This spreads the table out so that it covers the entire form.

    3. CellBorderStyle プロパティを Inset に設定します。Set the CellBorderStyle property to Inset. これによりボード上の各セル間に視覚的な境界線が表示されます。This provides visual borders between each cell on the board.

    4. TableLayoutPanel の右上隅の三角形のボタンをクリックして、そのタスク メニューを表示します。Choose the triangle button in the upper-right corner of the TableLayoutPanel to display its task menu.

    5. タスク メニューで、[行の追加] を 2 回クリックして行を 2 つ追加し、[列の追加] を 2 回クリックして列を 2 つ追加します。On the task menu, choose Add Row twice to add two more rows, and then choose Add Column twice to add two more columns.

    6. タスク メニューで、[行および列の編集] をクリックして、[列と行のスタイル] ウィンドウを開きます。On the task menu, choose Edit Rows and Columns to open the Column and Row Styles window. 各列を選択し、[パーセント] をクリックして、各列の幅を全体の幅の 25% に設定します。Choose each of the columns, choose the Percent option button, and then set each column's width to 25 percent of the total width. ウィンドウの上部にあるドロップダウン ボックスから [行] を選択し、各行の高さを 25% に設定します。Then select Rows from the drop-down box at the top of the window, and set each row's height to 25 percent. 完了したら、[OK] をクリックします。When you're done, choose the OK button.

      これで、TableLayoutPanel に 16 個の同じサイズの四角形のセルで構成された 4 x 4 のグリッドができました。Your TableLayoutPanel should now be a 4x4 grid, with sixteen equally sized square cells. これらの行と列は後でアイコン画像が表示される場所になります。These rows and columns are where the icon images will appear later.

  7. フォーム エディターで TableLayoutPanel が選択されていることを確認します。Be certain that the TableLayoutPanel is selected in the form editor. これは、[プロパティ] ウィンドウの上部に tableLayoutPanel1 が表示されていることでわかります。To verify this, you should see tableLayoutPanel1 at the top of the Properties window. 表示されていない場合は、TableLayoutPanel をフォームで選択するか、[プロパティ] ウィンドウの上部にあるドロップダウン コントロールで選択します。If it is not selected, choose the TableLayoutPanel on the form, or choose it in the dropdown control at the top of the Properties window.

    TableLayoutPanel コントロールが選択されている状態で、ツール ボックスを開き、Label コントロール ([コモン コントロール] カテゴリ内) を TableLayoutPanel コントロールの左上のセルに追加します。While the TableLayoutPanel is selected, open the toolbox and add a Label control (located in the Common Controls category) to the upper-left cell of the TableLayoutPanel. これで、IDE で Label コントロールが選択されました。The Label control should now be selected in the IDE. このコントロールの次のプロパティを設定します。Set the following properties for it.

    1. ラベルの BackColor プロパティが CornflowerBlue に設定されていることを確認します。Be sure that the label's BackColor property is set to CornflowerBlue.

    2. AutoSize プロパティを False に設定します。Set the AutoSize property to False.

    3. Dock プロパティを Fill に設定します。Set the Dock property to Fill.

    4. プロパティの横のドロップダウン ボタンをクリックし、中央ボタンをクリックして、TextAlign プロパティを MiddleCenter に設定します。Set the TextAlign property to MiddleCenter by choosing the drop-down button next to the property, and then choosing the middle button. これによりアイコンはセルの中央に表示されます。This ensures the icon appears in the middle of the cell.

    5. Font プロパティをクリックします。Choose the Font property. 省略記号 (…) ボタンが表示されます。An ellipsis (...) button should appear.

    6. 省略記号ボタンをクリックし、FontWebdings に、Font StyleBold に、Size72 に設定します。Choose the ellipsis button, and set the Font value to Webdings, the Font Style to Bold, and the Size to 72.

    7. ラベルの Text プロパティを c という文字に設定します。Set the Text property of the label to the letter c.

      これで、TableLayoutPanel の左上のセルに、青色の背景の中央に黒いボックスが配置されました。The upper-left cell in the TableLayoutPanel should now contain a black box centered on a blue background.

      注意

      Webdings フォントはアイコンのフォントであり、Windows オペレーティング システムに付属しています。The Webdings font is a font of icons that ships with the Windows operating system. この絵合わせゲームでは、プレーヤーはアイコンのペアを一致させる必要があるため、このフォントを使用して、一致するアイコンを表示します。In your matching game, the player needs to match pairs of icons, so you use this font to display the icons to match. Text プロパティに c を設定する代わりに、さまざまな文字を入力してどのようなアイコンが表示されるのか確認してみてください。Instead of putting c in the Text property, try entering different letters to see what icons are displayed. 感嘆符はクモ、大文字の N は目、コンマはトウガラシです。An exclamation point is a spider, an uppercase N is an eye, and a comma is a chili pepper.

  8. Label コントロールを選択し、TableLayoutPanel 内の次のセルにコピーします Choose your label control and copy it to the next cell in the TableLayoutPanel. (Ctrl + C キーを押すか、メニュー バーで [編集][コピー] の順にクリックします)。次に、これを貼り付けます (Choose the Ctrl+C keys, or on the menu bar, choose Edit, Copy.) Then paste it. (Ctrl + V キーを押すか、メニュー バーで [編集][貼り付け] の順にクリックします)。最初のラベルのコピーが TableLayoutPanel の 2 つ目のセルに表示されます。(Choose the Ctrl+V keys, or on the menu bar, choose Edit, Paste.) A copy of the first label appears in the second cell of the TableLayoutPanel. 再度貼り付けると、3 つ目のセルにまた別のラベルが表示されます。Paste it again, and another label appears in the third cell. すべてのセルが埋まるまで、Label コントロールの貼り付け操作を続けます。Keep pasting Label controls until all of the cells are filled.

    注意

    多く貼り付けすぎた場合は、IDE によって TableLayoutPanel に新しい行が追加され、新しいラベル コントロールを追加する場所が作成されます。If you paste too many times, the IDE adds a new row to the TableLayoutPanel so that it has a place to add your new label control. これは、元に戻すことができます。You can undo it. 新しいセルを削除するには、Ctrl + Z キーを押すか、メニュー バーで [編集][元に戻す] の順にクリックします。To remove the new cell, choose the Ctrl+Z keys, or on the menu bar, choose Edit, Undo.

    これで、フォームがレイアウトされました。結果は次の図のようになります。Now your form is laid out. It should look like the following picture.

    絵合わせゲームの初期フォームInitial matching game form
    絵合わせゲームの初期フォームInitial matching game form

続行または確認するにはTo continue or review