手順 1: プロジェクトの作成とフォームへのラベルの追加

計算クイズの作成における最初の手順は、プロジェクトの作成とフォームへのラベルの追加です。

プロジェクトを作成し、フォームにラベルを追加するには

1. [ファイル] メニューの [新しいプロジェクト] をクリックします。

2. Visual Studio Express を使用していない場合は、最初に言語を選択する必要があります。[インストールされたテンプレート] で [C#] または [Visual Basic] を選択します。

3. [Windows フォーム アプリケーション] アイコンをクリックし、名前として「Math Quiz」と入力します。

4. フォームのプロパティを設定します。

   1. フォームの Text プロパティを Math Quiz に変更します。

   2. Size プロパティを使用するか、統合開発環境 (IDE: Integrated Development Environment) の右下隅に適切なサイズが表示されるようになるまでドラッグして、サイズを幅 550 ピクセル、高さ 400 ピクセルに変更します。

   3. ユーザーがフォームのサイズを変更できないようにするために、FormBorderStyle プロパティを Fixed3D に変更し、MaximizeBox プロパティを False に設定します。

5. Label コントロールをツールボックスからドラッグし、そのプロパティを設定します。

   1. (Name) プロパティを timeLabel に変更します。このラベルは、クイズの残り時間の秒数を表示するボックスとして、フォームの右上隅に表示されます。

   2. AutoSize プロパティを False に変更して、ボックスのサイズを手動で変更できるようにします。

   3. BorderStyle プロパティを FixedSingle に変更して、ボックスの枠線を描画します。

   4. Size プロパティを 200, 30 に設定します。

   5. 青いスペーサーの線が表示されるまで、ラベルをフォームの右上隅にドラッグします。

   6. [プロパティ] ウィンドウで [Text] をクリックして BackSpace キーを押し、Text プロパティの内容を消去します。

   7. フォント サイズを 15.75 に変更します。[プロパティ] ウィンドウで Font プロパティの横にある正符号をクリックすると、次の図に示すように、Size を含むいくつかのプロパティが表示されます。

      フォント サイズが表示された [プロパティ] ウィンドウ

      

6. 次に、Label コントロールをツールボックスからもう 1 つドラッグし、そのプロパティを設定します。

   1. フォント サイズを 15.75 に変更します。

   2. Text プロパティを Time Left に設定します。

   3. このラベルをドラッグして、timeLabel ラベルの左に並べて配置します。

7. 次に、加算問題のコントロールを追加します。Label コントロールをツールボックスからドラッグし、そのプロパティを設定します。

   1. Text プロパティを ? (疑問符) に設定します。

   2. [AutoSize] プロパティを [False] に設定します。

   3. Size プロパティを 60, 50 に設定します。

   4. フォント サイズを 18 に変更します。

   5. TextAlign プロパティを MiddleCenter に変更します。

   6. Location プロパティを 75, 75 に変更して、このラベルをフォーム上に配置します。

   7. (Name) プロパティを plusLeftLabel に変更します。

8. plusLeftLabel ラベルを選択してコピーします (Ctrl キーを押しながら C キーを押すか、[編集] メニューの [コピー] をクリックします)。その後、以下の作業を行います。

   1. コピーしたラベルを 3 回貼り付けます (Ctrl キーを押しながら V キーを押すか、[編集] メニューの [貼り付け] をクリックします)。

   2. 新しい 3 つのラベルを、ボックスが plusLeftLabel ラベルの右に 1 行に並ぶように配置します。スペーサーの線を利用して、間隔を調整し、まっすぐになるように配置します。

   3. 2 番目のラベルの Text プロパティを + (加算記号) に変更します。

   4. 3 番目のラベルの (Name) プロパティを plusRightLabel に変更します。

   5. 4 番目のラベルの Text プロパティを = (等号) に変更します。

9. NumericUpDown コントロールをツールボックスからドラッグし、以下の作業を行います。

   1. フォント サイズを 18 に変更し、幅が 100 になるように調整します。

   2. 加算問題の Label コントロールに合わせて、このコントロールをそれらと並ぶ位置までドラッグします。

   3. (Name) プロパティを sum に変更します (NumericUpDown コントロールについては、後ほど詳しく説明します)。これで、クイズの最初の行が完成し、次の図のようになります。

      計算クイズの最初の行

      

10. 加算問題の 5 つのコントロール (4 つの Label コントロールと NumericUpDown コントロール) をすべて選択し、それらをコピーします。その後、以下の作業を行います。

    1. コントロールを貼り付けます。5 つの新しいコントロールがフォームに追加されます。

    2. それらのコントロールが選択されたままなので、いずれかのコントロールをクリックしてすべてのコントロールをドラッグできます。加算のコントロールの下に並ぶようにドラッグします。スペーサーの線を利用して、2 つの行の間隔が十分に確保されるようにしてください。

    3. 2 番目のラベルの Text プロパティを – (減算記号) に変更します。

    4. 最初の疑問符のラベルに minusLeftLabel という名前を付けます。

    5. 2 番目の疑問符のラベルに minusRightLabel という名前を付けます。

    6. NumericUpDown コントロールに difference という名前を付けます。

11. 5 つのコントロールをあと 2 回貼り付けて、以下の作業を行います。

    1. 3 番目の行については、最初のラベルに timesLeftLabel という名前を付け、2 番目のラベルの Text プロパティを × (乗算記号) に変更し、3 番目のラベルに timesRightLabel という名前を付け、NumericUpDown コントロールに product という名前を付けます。

    2. 4 番目の行については、最初のラベルに dividedLeftLabel という名前を付け、2 番目のラベルの Text プロパティを ÷ (除算記号) に変更し、3 番目のラベルに dividedRightLabel という名前を付け、NumericUpDown コントロールに quotient という名前を付けます。

    [!メモ]

    乗算記号 × と除算記号 ÷ は、このチュートリアルからコピーして IDE に貼り付けることができます。

12. フォームにはコントロールがもう 1 つ必要です。クイズを開始するためのボタンです。Button コントロールをツールボックスからドラッグし、そのプロパティを設定します。

    1. (Name) プロパティを startButton に設定します。

    2. Text プロパティを Start the quiz に設定します。

    3. フォント サイズを 14 に設定します。

    4. AutoSize プロパティを True に設定します。ボタンのサイズがテキストに合わせて自動的に変更されます。

    5. ボタンをフォームの下部にドラッグし、中央に配置されるように移動します。

13. 最後に、startButton コントロールをクリックし、以下の作業を行います。

    1. TabIndex プロパティを 1 に設定します。

    2. NumericUpDown sum コントロールをクリックします。

    3. TabIndex プロパティを 2 に設定します。

    4. その他の NumericUpDown コントロールを設定します。difference コントロールの TabIndex プロパティを 3 に、product コントロールの TabIndex プロパティを 4 に、quotient コントロールの TabIndex プロパティを 5 に設定します。これで、フォームは次の図のようになります。

       計算クイズの初期のフォーム

       

    [!メモ]

    TabIndex プロパティの目的は、ユーザーが Tab キーを押したときのコントロールの順序を設定することです。いずれかのダイアログ ボックスを開き (たとえば、[ファイル] メニューの [開く] をクリックし)、Tab キーを何度か押してみてください。Tab キーを押すたびに、カーソルが次のコントロールへと切り替わっていくのがわかります。この順序は、そのフォームが最初に設計されたときにプログラマによって決められています。

14. TabIndex プロパティの動作を確認するには、プログラムを保存して実行し、Tab キーを何度か押します。

続行または確認するには

• チュートリアルの次の手順に進むには、「手順 2: ランダムな加算問題の作成」を参照してください。

• 概要のトピックに戻るには、「チュートリアル 3: 計算クイズの作成」を参照してください。