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

このクイズを開発する最初のステップとして、プロジェクトを作成し、ラベル、ボタン、およびその他のコントロールをフォームに追加します。As the first steps in developing this quiz, you create the project, and you add labels, a button, and other controls to a form. また、追加する各コントロールのプロパティを設定します。You also set properties for each control that you add. プロジェクトには、フォーム、コントロール、およびコード (チュートリアルで後ほど説明) が含まれます。The project will contain the form, the controls, and (later in the tutorial) code. ボタンはクイズを開始し、ラベルはクイズ問題を表示し、その他のコントロールはクイズの解答とクイズを完了するために残っている時間を示します。The button starts the quiz, the labels show the quiz problems, and the other controls show the quiz answers and the time that remains to finish the quiz.

注意

このトピックは、コーディングの基本概念に関するチュートリアル シリーズの一部です。This topic is part of a tutorial series about basic coding concepts. チュートリアルの概要については、「チュートリアル 2: 制限時間ありの計算クイズの作成」を参照してください。For an overview of the tutorial, see Tutorial 2: Create a Timed Math Quiz.

プロジェクトを作成し、フォームのプロパティを設定するにはTo create a project and and set properties for a form

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

  2. [インストールされたテンプレート] の一覧で [C#] または [Visual Basic] を選択します。In the Installed Templates list, choose either C# or Visual Basic.

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

    選択したプログラミング言語に応じて、Form1.cs または Form1.vb という名前のフォームが表示されます。A form that's named Form1.cs or Form1.vb appears, depending on the programming language that you chose.

  4. フォームを選択し、Text プロパティを Math Quiz に変更します。Choose the form, and then change its Text property to Math Quiz.

    [プロパティ] ウィンドウには、フォームのプロパティが含まれます。The Properties window contains properties for the form.

  5. フォームのサイズを幅が 500 ピクセル、高さが 400 ピクセルに変更します。Change the size of the form to 500 pixels wide by 400 pixels tall.

    適切なサイズが統合開発環境 (IDE) の左下隅に表示されるまでフォームの端をドラッグしてフォームのサイズ変更ができます。You can resize the form by dragging its edges until the correct size appears in the lower-left corner of the integrated development environment (IDE). 代わりに、Size プロパティの値を変更することもできます。As an alternative, you can change the values of the Size property.

  6. FormBorderStyle プロパティの値を Fixed3D に変更し、MaximizeBox プロパティを False に設定します。Change the value of the FormBorderStyle property to Fixed3D, and set the MaximizeBox property to False.

    これらの値によって、クイズの受け手はフォームのサイズを変更できなくなります。These values prevent quiz takers from resizing the form.

残り時間ボックスを作成するにはTo create the Time Remaining box

  1. ツールボックスから Label コントロールを追加し、その (Name) プロパティの値を timeLabel に設定します。Add a Label control from the Toolbox, and then set the value of its (Name) property to timeLabel.

    このラベルは、クイズの残り時間の秒数を表示するボックスとして、右上隅に表示されます。This label will become a box in the upper-right corner that shows the number of seconds that remain in the quiz.

  2. AutoSize プロパティを False に変更して、ボックスのサイズを変更できるようにします。Change the AutoSize property to False so that you can resize the box.

  3. BorderStyle プロパティを FixedSingle に変更して、ボックスの枠線を描画します。Change the BorderStyle property to FixedSingle to draw a line around the box.

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

  5. 青いスペーサーの線が表示されるまで、ラベルをフォームの右上隅に移動します。Move the label to the upper-right corner of the form, where blue spacer lines will appear.

    これらの行によって、フォーム上にコントロールを配置できます。These lines help you align controls on the form.

  6. [プロパティ] ウィンドウで、Text プロパティをクリックし、Backspace キーを押してその値をクリアします。In the Properties window, choose the Text property, and then choose the Backspace key to clear its value.

  7. Font プロパティの横にある正符号 (+) をクリックし、Size プロパティの値を 15.75 に変更します。Choose the plus sign (+) next to the Font property, and then change the value of the Size property to 15.75.

    次の画像に示すように、複数のフォント プロパティを変更できます。You can change several font properties, as the following picture shows.

    フォント サイズを示す [プロパティ] ウィンドウProperties window showing font size
    フォント サイズを示す [プロパティ] ウィンドウProperties window showing font size

  8. ツールボックスから別の Label コントロールを追加し、フォント サイズを 15.75 に設定します。Add another Label control from the Toolbox, and then set its font size to 15.75.

  9. Text プロパティを Time Left に設定します。Set the Text property to Time Left.

  10. [timeLabel] ラベルのすぐ左側に並ぶようにラベルを移動します。Move the label so that it lines up just to the left of the timeLabel label.

加算問題にコントロールを追加するにはTo add controls for the addition problems

  1. ツールボックスから Label コントロールを追加し、その Text プロパティを ?Add a Label control from the Toolbox, and then set its Text property to ? (疑問符) に設定します。(question mark).

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

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

  4. フォント サイズを 18 に設定します。Set the font size to 18.

  5. TextAlign プロパティを MiddleCenter に設定します。Set the TextAlign property to MiddleCenter.

  6. Location プロパティを 50, 75 に設定して、コントロールをフォーム上に配置します。Set the Location property to 50, 75 to position the control on the form.

  7. (Name) プロパティを plusLeftLabel に設定します。Set the (Name) property to plusLeftLabel.

  8. [plusLeftLabel] ラベルをクリックし、Ctrl キーを押しながら C キーを押すか、[編集] メニューの [コピー] をクリックします。Choose the plusLeftLabel label, and then choose either the Ctrl+C keys or Copy on the Edit menu.

  9. Ctrl キーを押しながら V キーを押すか、[編集] メニューの [貼り付け] をクリックして、ラベルを 3 回貼り付けます。Paste the label three times by choosing either the Ctrl+V keys or Paste on the Edit menu.

  10. [plusLeftLabel] ラベルの右側に並ぶように、3 つの新しいラベルを配置します。Arrange the three new labels so that they are in a row to the right of the plusLeftLabel label.

    スペーサーの線を使用して、間隔を調整し、まっすぐになるように配置します。You can use the spacer lines to space them out and line them up.

  11. 2 番目のラベルの Text プロパティの値を + (加算記号) に設定します。Set the value of the second label's Text property to + (plus sign).

  12. 3 番目のラベルの (Name) プロパティの値を plusRightLabel に設定します。Set the value of the third label's (Name) property to plusRightLabel.

  13. 4 番目のラベルの Text プロパティの値を = (等号) に設定します。Set the value of the fourth label's Text property to = (equal sign).

  14. ツールボックスから NumericUpDown コントロールを追加し、フォント サイズを 18 に設定して、幅を 100 に設定します。Add a NumericUpDown control from the Toolbox, set its font size to 18, and set its width to 100.

    この種類のコントロールについては、後ほど詳しく説明します。You'll learn more about this kind of control later.

  15. 加算問題のラベル コントロールに合わせて、NumericUpDown コントロールを並べます。Line up the NumericUpDown control with the label controls for the addition problem.

  16. NumericUpDown コントロールの (Name) プロパティの値を sum に変更します。Change the value of the (Name) property for the NumericUpDown control to sum.

    次の画像に示すように、最初の行が作成されました。You've created the first row, as the following picture shows.

    計算クイズの最初の行First row of math quiz
    計算クイズの最初の行First row of math quiz

減算、乗算、除算問題のコントロールを追加するにはTo add controls for the subtraction, multiplication, and division problems

  1. 加算問題の 5 つのコントロール (4 つの Label コントロールと NumericUpDown コントロール) すべてをコピーして、貼り付けます。Copy all five controls for the addition problem (the four Label controls and the NumericUpDown control), and then paste them.

    フォームにはまだ選択されている 5 つの新しいコントロールが含まれています。The form contains five new controls, which are still selected.

  2. 追加のコントロールの下に整列するようにすべてのコントロールを適切な位置に移動します。Move all of the controls into place so that they line up below the addition controls.

    スペーサーの線を利用して、2 つの行の間隔を十分に確保できます。You can use the spacer lines to give enough distance between the two rows.

  3. 2 番目のラベルの Text プロパティの値を - (マイナス記号) に変更します。Change the value of the Text property for the second label to - (minus sign).

  4. 最初の疑問符のラベルに minusLeftLabel という名前を付けます。Name the first question-mark label minusLeftLabel.

  5. 2 番目の疑問符のラベルに minusRightLabel という名前を付けます。Name the second question-mark label minusRightLabel.

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

  7. 5 つのコントロールをさらに 2 回貼り付けます。Paste the five controls two more times.

  8. 3 番目の行については、最初のラベルに timesLeftLabel という名前を付け、2 番目のラベルの Text プロパティを × (乗算記号) に変更し、3 番目のラベルに timesRightLabel という名前を付け、NumericUpDown コントロールに product という名前を付けます。For the third row, name the first label timesLeftLabel, change the second label's Text property to × (multiplication sign), name the third label timesRightLabel, and name the NumericUpDown control product.

  9. 4 番目の行については、最初のラベルに dividedLeftLabel という名前を付け、2 番目のラベルの Text プロパティを ÷ (除算記号) に変更し、3 番目のラベルに dividedRightLabel という名前を付け、NumericUpDown コントロールに quotient という名前を付けます。For the fourth row, name the first label dividedLeftLabel, change the second label's Text property to ÷ (division sign), name the third label dividedRightLabel, and name the NumericUpDown control quotient.

    注意

    乗算記号 × と除算記号 ÷ は、このチュートリアルからコピーしてフォームに貼り付けることができます。You can copy the multiplication sign × and the division sign ÷ from this tutorial and paste them onto the form.

[Start] ボタンを追加し、タブ インデックスの順序を設定するにはTo add a start button and set the tab-index order

  1. ツールボックスから Button コントロールを追加し、その (Name) プロパティを startButton に設定します。Add a Button control from the Toolbox, and then set its (Name) property to startButton.

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

  3. フォント サイズを 14 に設定します。Set the font size to 14.

  4. AutoSize プロパティを True に設定します。ボタンのサイズがテキストに合わせて自動的に変更されます。Set the AutoSize property to True, which causes the button to automatically resize to fit the text.

  5. フォームの下部付近にボタンを中央揃えで配置します。Center the button near the bottom of the form.

  6. startButton コントロールの TabIndex プロパティの値を 1 に設定します。Set the value of the TabIndex property for the startButton control to 1.

    注意

    クイズの受け手が Tab キーを押すと、TabIndex プロパティはコントロールの順序を設定します。The TabIndex property sets the order of the controls when the quiz taker chooses the Tab key. この動作を確認するには、ダイアログ ボックス (たとえば、メニュー バーで、[ファイル][開く] をクリックします) を開き、Tab キーを数回押します。To see how it works, open any dialog box (for example, on the menu bar, choose File, Open), and then choose the Tab key a few times. Tab キーを押すたびに、カーソルが次のコントロールへと切り替わっていくのがわかります。Watch how your cursor moves from control to control each time that you choose the Tab key. この順序は、そのフォームが設計されたときにプログラマによって決められています。A programmer decided the order when creating that form.

  7. NumericUpDown sum コントロールの TabIndex プロパティの値を 2 に設定し、difference コントロールは 3 に設定し、product コントロールは 4 に設定し、quotient コントロールは 5 に設定します。Set the value of the TabIndex property for the NumericUpDown sum control to 2, for the difference control to 3, for the product control to 4, and for the quotient control to 5.

    フォームは次の図のようになります。The form should look like the following illustration.

    計算クイズの初期フォームInitial math quiz form
    計算クイズの初期フォームInitial math quiz form

  8. 予測どおりに TabIndex プロパティが動作するかどうかを確認するには、F5 キーを押してプログラムを保存して実行するか、またはメニュー バーの [デバッグ][デバッグの開始] をクリックし、Tab キーを数回押します。To verify whether the TabIndex property works as you expect, save and run your program by choosing the F5 key, or by choosing Debug, Start Debugging on the menu bar, and then choose the Tab key a few times.

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