htmlとcssでじゃんけんゲームの見た目を作ろう

website

htmlとcssを使ってじゃんけんゲームの見た目を作ってみよう!

準備

1.まずはデスクトップにjyankenフォルダを作成し、その中にcssフォルダ、imagesフォルダを作成する。

2.以下をダウンロード展開し、中に入っている3枚の画像をimagesフォルダに入れる

作成

1.index.htmlを以下のように作成する。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
  <title>じゃんけんぽん</title>
</head>
<body>
  <form method="post">
    <input type="radio" name="hand" value="0">ぐー<br>
    <input type="radio" name="hand" value="1">ちょき<br>
    <input type="radio" name="hand" value="2">ぱー<br>
    <button type="submit">ショウブ</button>
  </form>
  <div>
    <img src="images/choki.png">
    <img src="images/pa.png">
  </div>
  <p>アナタのかちです!</p>
</body>
</html>

今回はgoogle webフォントのニコモジを使えるようにリンクを入れている。

2.実行してみよう。画像が無駄に大きいが以下のようになれば成功だ

3.スタイルを当てていこう。main.cssを以下のように作成する。

body{
	display:flex;
	height:100vh;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	font-family: "Nico Moji";
	background:#b7f3a9;
	color:#333;
}
form{
	font-size:6vmin;
}
input{
	width:4vmin;
	height:4vmin;
	position:relative;
	top:2px;
}
button{
	margin-top:5vmin;
	width:25vmin;
	height:8vmin;
	font-size:5vmin;
	font-family: "Nico Moji";
	color:#333;
}
div{
	display:flex;
	width:80%;
	justify-content:space-around;
}
img{
	width:35vmin;
	height:35vmin;
}
p{
	font-size:7vmin;
}

基本はflexを利用して配置している。
ここで登場しているvminというのは実行している画面幅の縦と横の小さいほうの幅を100とし、その何%かを表している。35vminとすると35%だ。
vw(画面幅の横幅に対する割合)
vh(画面幅の縦幅に対する割合)
とともに覚えよう。

3.実行してみよう。

上のようになれば成功だ。ブラウザ幅を変えてみよう。レスポンシブにいい感じに大きさが変わることがわかる。

関連記事

 以下の記事ではJava(jsp)を使って実際に遊べるようにします。

以下の記事ではPHPを使って実際に遊べるようにします。

website
スポンサーリンク
シェアする
mjpurinをフォローする
ジョイタスネット

コメント

タイトルとURLをコピーしました