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

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

準備

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

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

hands.zip

1 ファイル 1.08 MB

ダウンロード

作成

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;
	padding-top:3vmin;
	box-sizing:border-box;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	font-family: "Nico Moji";
	background:#b7f3a9;
	color:#333;

}
form{
	font-size:8vmin;
}
input{
	width:12vmin;
	height:6vmin;
	position:relative;
	top:2px;
	margin-bottom:3vmin;
	margin-left:8vmin;
}
button{
	margin-top:5vmin;
	width:50vmin;
	height:10vmin;
	font-size:8vmin;
	font-family: "Nico Moji";
	color:#333;
}
div{
	display:flex;
	padding-top:2vmin;
	box-sizing:border-box;
	width:80%;
	justify-content:space-around;
}
img{
	width:35vmin;
	height:35vmin;
}
p{
	font-size:7vmin;
}

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

3.実行してみよう。