以下のコードを index.html という名前で保存しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>〇×ゲーム</title>
</head>
<body>
<h1>〇×ゲーム</h1>
<table>
<tr><td></td></tr>
</table>
</body>
</html>
index.html ファイルをダブルクリックしてみてください。
画面に何も表示されません。
これは、table要素・tr要素・td要素にはデフォルトで枠線も色もついていないためです。
次は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属性を付与してください。