pythonで百マス計算を作る方法
はじめまして、にわこまです。
今回は百マス計算を作る方法について書いていきたいと思います。
何か不明な点やご指摘があればご連絡ください。
スポンサードサーチ
百マス計算をつくる
pythonで百マス計算をつくることに挑戦してみました。
0~9の数字をランダムに代入していくだけだったので、pythonで百マス計算をつくるのは簡単でした。
あえて難しいところをあげるならば、html/cssのコーディングで百マスをつくるのが難しかったです。
しかし、python,html/cssのコードは全て公開しますので安心してください！ また今回作ったコードは、改善の余地がたくさんあると思うのでみなさｎ自分自身で改造してみてください
作るきっかけ
そもそもなぜ作ろうと思ったのか？
「こどものために百マス計算をつくる」という記事を読んだからです。その記事は、エンジニアのかたが0からpythonを勉強して、百マス計算を作るという内容でした。
その記事を読んで心動かされて、百マス計算くらいなら自分でもつくれるのではないかと思って作ってみました。
スポンサードサーチ
コード
実際にどのように実装したのか示していきます。
1.百マスを書くためにhtml/cssをコーディングしました。
2.数字をランダムで出力する
3.2の数字をhtmlに代入する
4.htmlに書き込む
生成されたhtmlをダブルクリックすると百マス計算が表示されます。この百マス計算を印刷することで完成です。
＊cssはstyle.cssとprint.cssの二つのファイルがあります。
style.css↓↓↓
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Merriweather');
body {
font-family: 'メイリオ', 'Hiraino Kaku Gothic Pro', sans-serif;
color: #0000ff;
background-color: #abcdcd;
}
/* ################## Hundreds of calculation #################### */
.container {
background-color: #ffffFF;
margin: 0;
padding: 0;
}
.container table, .container tbody {
border-collapse: collapse;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.container th, .container td {
text-align: center;
padding: 10px;
margin: 0;
background-color: #ffffff;
border: solid 2px #0000ff;
}
.container tr {
padding: 0;
margin: 0;
}
@media (min-width: 1000px) {
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
}
print.css↓↓↓
body {
color: #0000ff;
}
.main-body {
size: A4;
}
.container {
size: A4;
}
.container table, .container tbody {
border-collapse: collapse;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.container th, .container td {
text-align: center;
padding: 10px;
margin: 0;
background-color: #ffffff;
border: solid 2px #0000ff;
}
.container tr {
padding: 0;
margin: 0;
}
pythonのファイル↓↓↓
import random
html = """
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hundreds Of Calculations</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<div class="container">
<table>
<tr>
<th>足し算</th>
<th>{0}</th>
<th>{1}</th>
<th>{2}</th>
<th>{3}</th>
<th>{4}</th>
<th>{5}</th>
<th>{6}</th>
<th>{7}</th>
<th>{8}</th>
<th>{9}</th>
</tr>
<tr>
<th>{10}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{11}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{12}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{13}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{14}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{15}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{16}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{17}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{18}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>{19}</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
"""
number_list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
# htmlに代入する変数をint型として定義
num0 = num1 = num2 = num3 = num4 = 0
num5 = num6 = num7 = num8 = num9 = 0
num10 = num11 = num12 = num13 = num14 = 0
num15 = num16 = num17 = num18 = num19 = 0
# 変数をlistに代入
variable_num = [num0, num1, num2, num3, num4,
num5, num6, num7, num8, num9,
num10, num11, num12, num13, num14,
num15, num16, num17, num18, num19]
size = len(number_list)
count = len(variable_num)
for i in range(0, count):
if(len(number_list) == 0):
number_list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
size = len(number_list)
r = random.randint(0, size - 1)
variable_num[i] = number_list[r]
# 代入した数字をリストから削除する
del number_list[r]
size = size - 1
# format関数を使って文字列に代入
html_write = html.format(variable_num[0], variable_num[1], variable_num[2], variable_num[3],
variable_num[4], variable_num[5], variable_num[6], variable_num[7],
variable_num[8], variable_num[9], variable_num[10], variable_num[11],
variable_num[12], variable_num[13], variable_num[14], variable_num[15],
variable_num[16], variable_num[17], variable_num[18], variable_num[19])
path = "hundred-calculation.html"
with open(path, mode="w", encoding="utf-8") as f:
f.write(html_write)
style.cssとprint.cssとpythonのファイルは同じフォルダに保存してください。style.cssとprint.cssはファイル名を変えずそのままの名前で保存してください。
pythonのファイル名は何でもOKです。
全てのファイルを保存し終わったら、コマンドプロンプトを起動して保存したファイルまで移動してください。
実行するためには次のように打ち込んでださい。
「python ファイル名.py」
実行してエラーがなければ同じファイルに「hundred-calculation.html」というファイルが生成されます。
このファイルをダブルクリックすると百マス計算のマスが表示されます。さらに、印刷すれば百マス計算が出来ます。
まとめ
今回は百マス計算を作ってみました。
pythonのコード自体はかなり簡単だったと思います。また、改良の余地がたくさんあると思います。
プログラミングの勉強で一番効率が良いのは何かを作ってみることだと思います。
try & errorを繰り返して挑戦していきましょう！！
最後まで読んでいただきありがとうございます。
スポンサードサーチ
