こんにちは、パキラです。
今回は、前回作成した○✖ゲームの画面、土台をCSSをあてて作っていきたいと思います。
前回のコードは下に書きます。
これだとボタンのサイズや間隔などが指定がないので、しっかり表示されません。
ですのでCSSで整えていきます。
 |
JavaScript 第7版 [ David Flanagan ] 価格:5,060円 |
前回のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○✖ゲーム</title>
</head>
<body>
<h1>○✖ゲーム</h1>
<p>○の番です</p>
<div>
<input type="button" value="○"></input>
<input type="button" value="✖"></input>
<input type="button"></input>
</div>
<div>
<input type="button"></input>
<input type="button"></input>
<input type="button"></input>
</div>
<div>
<input type="button"></input>
<input type="button"></input>
<input type="button"></input>
</div>
<input type="button" value="もう一度遊ぶ"></input>
</body>
</html>
 |
確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ] 価格:2,728円 |
css
CSSは書き込む方法は３種類あります。
それは別の記事で紹介していますので、ご参考にしてください。
下記のようにCSSでスタイルをあてていきます。
ただ超初心者なので、もっといいCSSの書き方があったら、ぜひ教えてください。
body{
font-size:30px;
text-align:center;
}
input{
font-size:30px;
}
.block{
width:3rem;
height:3rem;
margin:4px;
vertical-align:middle;
margin-bottom:0.5rem;
}
input[value="○"]{
color:#ff0000;
}
input[value="✖"]{
color:#0000ff;
}
.item1{justify-content: center;
display:flex;
}
.item2{justify-content: center;
display:flex;
}
.item3{justify-content: center;
display:flex;
}○✖ゲーム
○の番です
CSSでスタイルをあてると、それらしくなってきましたね。
これでボタンを押すをすぐ遊べそうですが、これからがプログラミングが必要になります。
今はゲームをする土台、画面を作っただけです。
次は、マスをクリックするとマスの中に○や✖を表示させたり、勝ち負けの勝敗を決めるなどのプログラムを書きたいと思います。
 |
JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ] 価格:3,080円 |
まとめ
ここまで読んでいただいてありがとうございました。
これからプログラミングを始める方に参考になったら嬉しいのですが、
私自身が初心者過ぎて、うまく書けてない部分もありますが、勉強します。
本業の傍ら、プログラミングの勉強して、ブログも書いています。
なかなか進みませんが、暖かい目で見守ってください。
 |
図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編 [ 中田 亨 ] 価格:2,640円 |
コメント