【Flask入門】Python初心者がマインスイーパーを作ってみる④　～cssを取りこむ〜

こんにちは、Amagoです。

進捗があったのでブログを書きます。

前回まで

前回は、9×9のボタンを表示するところまで実装しました。
見ていないかたは、こちらからお願いします。
hamaguchi-amago.hatenablog.com

今回はcssを取り込んでボタンのレイアウトを整えていきます。
cssの取り込み方法は以下の記事を参考に作成しました。
qiita.com

フォルダ構成

『style.css』を以下のフォルダに配置します。余談ですが、ディレクトリ構成の記号が分からなかったのでこちらを参考にしました。
ディレクトリ構成図を書くときに便利な記号 - Qiita

Minesweeper
　├── Minesweeper.py
　├── templates
　│ 　　└── index.html
　└── static
　　　└── css
　　　　　　└──style.css

htmlの修正

cssは、linkを使って読み込ませます。
また、buttonに『cell』というclassを設定しておきます。

[index.html]

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="/static/css/style.css">
		<title>Minesweeper</title>
	</head>
	<body>
		<table>
		{% for row in cell %}
		    <tr>
			{% for col in row %}
 				<td><button class="cell"></button></td>
			{% endfor %}
			</tr>
		{% endfor %}
		</table>
	</body>
</html>

cssの内容

cssは、このように書きます。
tableのstyleを追加したのは横線の隙間が空いてしまったので調整しておきました。

[style.css]

@charset 'utf-8';
table {
  border-spacing: 5px 0px;
}

.cell {
	height: 50px;
	width: 50px;
	background: #C0C0C0;
}

実行結果・次回目標

実行結果はこんな感じです。

f:id:hamaguchi_amago:20190524011000j:plain

次回は爆弾のアイコンを表示してみようかと思います。
最後まで読んでくださって、ありがとうございました。

次のブログ

hamaguchi-amago.hatenablog.com

にほんブログ村

amagoのエンジニアブログ

IT関連のネタを中心に記事を書いてます。