三目並べ – 1.ゲーム盤を作ろう

Home Avintonアカデミー三目並べ – 1.ゲーム盤を作ろう

ゲーム盤（マス目）を作ろう

以下のコードを index.html という名前で保存しましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>〇×ゲーム</title>
</head>

<body>
  <h1>〇×ゲーム</h1>
  <table>
    <tr><td></td></tr>
  </table>
</body>

</html>

マス目を作成するために、table要素を使用します。tr要素は行、td要素は列を表します。

実際に表示してみよう

index.html ファイルをダブルクリックしてみてください。

画面に何も表示されません。

これは、table要素・tr要素・td要素にはデフォルトで枠線も色もついていないためです。

次はCSSで色を指定し、見えるようにしましょう。

CSSファイルを読み込もう

index.html を修正します。7行目で、CSSファイルを読み込む処理を追加します。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>〇×ゲーム</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  ︙
</body>

</html>

マス目の枠線の色を設定しよう

index.html と同じディレクトリに css という名前のフォルダを作成してください。

また、その中に以下のコードを style.css という名前で保存しましょう。

td {
  border-style: solid;
  border-color: black;
}

以下のような階層構造になります。

.
├── index.html
└── css
    └── style.css

実際に表示してみよう

index.htmlファイルを再度読み直してください。画面に以下のような1行×1列の表が表示されれば問題ありません。

演習

1. 三目並べができるよう、3×3のマス目を用意してください。

2. 現在はゲーム盤のマス目がとても小さいので、最低でも幅100ピクセル、高さ100ピクセル以上となるように、CSSを修正してください。

3. ゲーム盤全体が左に寄っていますので、ブラウザの幅に関係なく、画面中央に来るよう、CSSを修正してください。

4.マス目が用意できましたら下記の値となるように、td要素にid属性を付与してください。

三目並べ – 1.ゲーム盤を作ろう

ゲーム盤（マス目）を作ろう

実際に表示してみよう

CSSファイルを読み込もう

マス目の枠線の色を設定しよう

実際に表示してみよう

演習

採用情報

Avinton SDGs

Search

三目並べ – 1.ゲーム盤を作ろう

ゲーム盤（マス目）を作ろう

実際に表示してみよう

CSSファイルを読み込もう

マス目の枠線の色を設定しよう

実際に表示してみよう

演習

採用情報

Avinton SDGs

Search

タグ