三目並べ – 1.ゲーム盤を作ろう
- Python3.6とOpenCVのインストール (Ubuntu18.04LTS)
- ルーティング
- 見た目を美しくしてみましょう
- NAT
- 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
- カート内のアイテム個数を変更
- 三目並べ – 3.勝敗がつくようにしよう
- EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
- 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
- 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
- カートの設置
- Ruby on Rails を MySQLでセットアップ
- レイアウト調整
- 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
- AWSアカウントの作成と必ずやるべきセキュリティ対策
- VLAN
- テスト
- 機械学習を用いた画像分類
- Ruby on Railsによる簡単なウェブアプリケーション
- 正規表現とパイプ
- 機械学習エンジニアに必要なスキル
- Ubuntuの設定
- PostgreSQL Setup
- REDIS
- Amazon EC2 インスタンスの初期設定をしよう
- Pythonの設定
- GNS3のセットアップ
- viエディタ
- AWSのEC2インスタンスでWordPressブログを公開してみよう
- Pythonでデータベースを操作する
- Python2.7とOpenCVのインストール
- ファイル操作コマンド
- OpenCVのテストプログラム
- グループとユーザー
- Pythonで画像を分類するプログラムを作成する
- AWS CLIをインストールしてコマンド操作しよう
- Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
- Windows Server 2012 R2 Hyper-V
- 困った時に使うコマンド
- PacketTracerのセットアップ
- 一般グループのユーザーとグループ
- AWS Route 53を使って独自ドメインのWebページを表示させてみよう
- プライバシーポリシー
- VMware ESXi サーバー構築
- 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
- フロントエンド開発のための環境構築
- フロントエンドのデモンストレーション
- APIのデモンストレーション
- CISCO 1800ルータセットアップ
- ファイル検索コマンド
- ESXi – Switchの追加とVLAN
- 質問
- 仮想化環境のディスク容量を拡張する
- ユーザー権限とアクセス権
- 三目並べ – 0.導入
- テキスト処理
- ESXi - VyOS
- データベースへのデータロード
- 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
- CCNA
- ESXi – 小規模ネットワーク 構築
- ファイル管理
- 機械学習入門者向け ChainerRLでブロック崩しの学習
- AWS CLIを使ってEC2のファイルをS3へアップロードしよう
- CSV import & export – Node.js, mySQL – 1
- 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
- CSV import & export – Node.js, mySQL – 2
- PCからルータ、スイッチへのSSH接続設定
- 【Python入門】Python Numpy チュートリアル
- SQL 便利な関数
- PostgreSQLによるデータ分析
- 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
- NodeJSでWebアプリケーション開発 – React編
- Pythonによるマルチスレッドプログラミング実践
- Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
- DockerとApacheを使ってWebサーバーを構築しよう
- NodeJSでWebアプリケーション開発 – React編
- Ruby on Rails インストール
- AmazonEC2とVPCでネットワークとサーバーを構築しよう
- AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
- Linuxとは
- カート機能作成
- Ruby on Rails Academy
- ショッピングアプリケーション作成
- ダイナミックルーティング
- PostgreSQL – Python – Apache – Bootstrap
- 三目並べ – 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属性を付与してください。
採用情報
