width: 24%;幅を「画面の幅の24%」に指定します。
height: 70vw;高さを「画面の幅の70%」に指定します。
一番最初にするべきこと
ブラウザゲームやウェブアプリを作るときに一番最初にするべきことは、
・画面のレイアウトを決める
ということです。
HTMLで文章の構成や図形を描画するための領域、画像の表示などウェブサイトの基礎となる部分を作成します。
CSSでウェブサイトのレイアウトやデザインといった見た目を決めていきます。
それでは具体例をあげて「箱詰めパズル」を作っていきます。
HTMLの解説
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>箱詰めクエスト</title>
<meta ng-non-bindable name="description" content="正方形が集まったブロックをピッタリはめるパズルゲームです。">
</head>
<body>
<h1>箱詰めパズル</h1>
<div class="wrapper">
</div>
<div class="wrapper2">
</div>
<div class="menu-container">
<div class="menu" style="opacity: 0.5;"></div>
<div class="menu0"></div>
<div class="menu" style="opacity: 0.5;"></div>
<div class="menu0"></div>
<div class="menu" style="opacity: 0.5;"></div>
<div class="menu0"></div>
<div class="menu" id="reset">やり直す</div>
</div>
<script src="script.js"></script>
</body>
</html>今回は、
・タイトル（h1）
・盤面のスペース（wrapper）
・メニューボタン（menu-container）
をHTMLで作ります。
タイトルを入れる
<h1>箱詰めパズル</h1>タイトルを<h1>タグで入れます。
ここにはメッセージを表示したりできます。
盤面のスペース（wrapper）を作る
<div class="wrapper">
</div>
<div class="wrapper2">
</div>ゲーム画面の盤面を作ります。クラス名を「wrapper」にしています。
wrapper（ラッパー）とは包む（ラップする）ものという意味で、レイアウトの枠として使うことが多いです。
似たものに「container」がありますが、container（コンテナー）とは容器や入れ物のことで、ボタンなど部品をまとめるための要素に使われます。
「wrapper」はピースをはめるための盤面で、「wrapper2」は盤面にはめる前のピースを置く場所にします。
盤面の横のマス数と縦のマス数を決めておきます。最大で横10マス×縦5マスのパズルを作りたいので外回りと合わせて、横12マス×縦7マスにしたいと思います。
メニューボタン（menu-container）を作る
<div class="menu-container">
<div class="menu" style="opacity: 0.5;"></div>
<div class="menu0"></div>
<div class="menu" style="opacity: 0.5;"></div>
<div class="menu0"></div>
<div class="menu" style="opacity: 0.5;"></div>
<div class="menu0"></div>
<div class="menu" id="reset">やり直す</div>
</div>画面下にメニューボタンの領域を作ります。クラス名を「menu-container」にしています。
ボタンのクラス名を「menu」にして、「menu-container」の中に入れます。
とりあえずボタンは4つ作って、一番右のボタンを「リセットボタン」にします。
左の3つのボタンは今回は使わないので「style=”opacity: 0.5;”」で色を薄くします。
ボタンとボタンに隙間をあけたいので、ボタンの間にクラス名「menu0」を入れます。
CSSの解説
body {
font-family: "ＭＳ Ｐゴシック ",sans-serif;
position: relative;
margin: 0 auto;
}
h1 {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
height: 48px;
margin: 0;
color: #fff;
background-color: #84c0f9;
}
.wrapper {
height: 70vw;
background: rgb(120 75 16/0.7);
}
.wrapper2 {
height: calc(100svh - 70vw - 48px);
}
.menu-container {
position: absolute;
display: flex;
height: 48px;
width: 100%;
margin: 0.5%;
padding: 5px 0px;
bottom: 0svh;
}
.menu {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
width: 24%;
border-radius: 5px;
background-color: #84c0f9;
}
.menu0 {
width: 1%;
}
@media screen and (min-width: 400px) {
body {
width: 65vh;
}
.wrapper {
height: 45.5vh;
}
.wrapper2 {
height: calc(54.5vh - 48px);
}
}
どんな機種の解像度にもあうレイアウトを作るためには、
・高さや幅の単位は「px」ではなく、「%」や「vw、vh（svh）」
を使います。
bodyのスタイルを指定する
body {
font-family: "ＭＳ Ｐゴシック ",sans-serif;
position: relative;
margin: 0 auto;
}HTMLの<body>タグのスタイルを指定します。
position: relative;
「position: absolute;」で配置位置を決める基準になる要素に指定します。
自由に移動できるピースの位置の基準になる要素が<body>タグになります。
※もっと詳しい説明は別ページでやる予定
margin: 0 auto;
周りの要素との間の隙間を、上下を0に指定して、左右は自動にして中央に表示します。
body要素の初期値は8pxなので周りの要素との間の隙間をなくすためにmarginの値を0に指定しています。
タイトルを装飾する
h1 {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
height: 48px;
margin: 0;
color: #fff;
background-color: #84c0f9;
}HTMLの<h1>タグのスタイルを指定します。
display: flex;
display: flex;
justify-content: center;
align-items: center;
この3行で、要素の中央に文字を表示することができます。
※もっと詳しい説明は別ページでやる予定
color: #fff;
文字の色を指定します。
background-color: #84c0f9;
背景の色を指定します。
盤面（ゲーム画面）の大きさを決める
.wrapper {
height: 70vw;
background: rgb(120 75 16/0.7);
}
.wrapper2 {
height: calc(100svh - 70vw - 48px);
}HTMLのクラス名「wrapper」と「wrapper2」の高さを指定します。
「wrapper」はピースをはめるための盤面で、「wrapper2」は盤面にはめる前のピースを置く場所です。
height: 70vw;
クラス名「wrapper」の高さを「画面の幅の70%」に指定します。
height: calc(100svh – 70vw – 48px);
クラス名「wrapper2」の高さを「画面の高さの100%から70%を引いて更に48pxを引く」に指定します。
CSSで計算を行う場合は「calc( .. )」を使います。%やpxなど単位が違っても計算することができます。
100svh ・・・スマホで表示されるアドレス部分を除いた100%
70vw ・・・・盤面「wrapper」の高さ
48px ・・・・タイトル（<h1>タグ）の高さ
つまり、「アドレス部分を除いた表示画面の高さから盤面の高さとタイトルの高さを引いたもの」をクラス名「wrapper2」の高さに指定しています。
メニューボタンの大きさを決める
.menu-container {
position: absolute;
display: flex;
height: 48px;
width: 100%;
margin: 0.5%;
padding: 5px 0px;
bottom: 0svh;
}HTMLのクラス名「menu-container」のスタイルを指定します。
position: absolute;
「position: relative;」で指定した要素を基準に配置位置を決めるようにします。
基準となる要素は<body>タグになります。
bottom: 0svh;
スマホで表示されるアドレス部分を除いた領域の、下から0%の位置に底（下辺）を合わせます。
.menu {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
width: 24%;
border-radius: 5px;
background-color: #84c0f9;
}
.menu0 {
width: 1%;
}HTMLのクラス名「menu」と「menu0」のスタイルを指定します。
width: 24%;
メニューボタンの幅を画面の幅の24%に指定します。
「menu0」の幅を1%にして、ボタンとボタンの間をあけています。
border-radius: 5px;
要素の角を半径5pxで丸めます。
横画面にも対応させる
@media screen and (min-width: 400px) {
body {
width: 65vh;
}
.wrapper {
height: 45.5vh;
}
.wrapper2 {
height: calc(54.5vh - 48px);
}
}横長の画面にも対応させます。
@media screen and (min-width: 400px) { .. }
画面の幅が400px以上の場合にスタイルを適用します。
CSSで同じ要素にスタイルを指定した時は、上の行で指定した値は無効になり上書きされます。
HTMLのクラス名「body」の幅と「wrapper」「wrapper2」の高さを新しく指定します。
width: 65vh;「body」の幅を「画面の高さの65%」に指定します。
height: 45.5vh;「wrapper」の高さを「画面の高さの45.5%」に指定します。
45.5というのは「65 × 0.7」のことで、「bodyの幅」の70%のことです。
height: calc(54.5vh - 48px);「wrapper2」の高さを「画面の高さの54.5%から48pxを引く」に指定します。
54.5vh – 48pxというのは「100vh – 45.5vh -48px」のことで、「bodyの高さ」から「wrapperの高さ」と「タイトルの高さ」を引いた値のことです。
