自分の練習も兼ねて簡単なコーディングだけでトランプゲーム「神経衰弱」を作ってみたのでその方法をシリーズとして共有していきたいと思います。作る中で必要となってくる知識やアルゴリズム、また、愚直でエレガントでなくてもひとつのゲームやプログラムを完成形まで作りあげるまでの過程が、何か皆さんのお役に立てれば幸いです。
完成イメージ
今回作っていく「神経衰弱」の完成イメージはこんなかんじです。
クリックするとゲームを公開したページに飛べるので遊んでみてください。
実際一人でちょっと遊んでみるにしてはカードが多いかもしれませんし、他にも変更アイデアは色々と浮かんでくるでしょう。是非進めながら色々と工夫をしてみてください！！
とりあえず、このようなゲームを目指してコーディングを始めていきましょう。
レイアウトを整える
シリーズ第一回、今回の目標は上で見た完成形に向けてページのレイアウトをざっくり整えることです。とりあえずはこんな感じまで目指します。
上の画像と照らし合わせると今回やることは、
- 画像(カード)を並べる
- 子要素（並んだカード）の幅に親要素 (テーブル)の幅を合わせる
- 得点表示を左寄せ
- リセットボタンを右寄せ
- 全体を中央寄せ
画像を並べる
HTMLに以下のように記述するだけで画像を並べることができます。
<div id="table">
<img src="../../images/ura.png"> <!--画像はimgタグで。-->
<img src="../../images/ura.png"> <!--src=""で表示させたい画像のパスを指定。-->
<img src="../../images/ura.png"> <!--imgはインライン要素なので、-->
<img src="../../images/ura.png"> <!--並べるだけで勝手に左から右に並んでくれます。-->
<!--適当なとこで<br>で改行するとまた左から並んでくれます。-->
<br>
<img src="../../images/ura.png">
<img src="../../images/ura.png">
<img src="../../images/ura.png">
<img src="../../images/ura.png">
</div>画像を表示させるには<img>タグを使います。src=””の中に表示させたい画像のパスを指定してあげるとその画像が表示されます。パスは絶対パスでも相対パスでも構いません。(パスについての詳細はまた別の機会にでも。)
コピペで同じ画像を並べています。神経衰弱の初期状態は全部裏の状態なのでこれで良いでしょう。<img>はインライン要素なので勝手に左から右に並んでくれます。逆に、縦方向に配置したい時は<br>と書いて改行してやると良いでしょう。
ちなみに、ここで使うトランプの画像は表も裏も全て私のオリジナルのものです。実際に皆さんがトランプゲームを自分で作りたい場合、ひょっとしたら画像の用意ができないから始められない…なんて悩みもあるかもしれませんが「トランプカード フリー素材」で検索すればたくさん自由に使える画像がネットに公開されているのでご安心を。
中身の幅に外側の幅を合わせる
上で書いてみたコードだけではレイアウトもなにもあったもんじゃありません。CSSでデザインを整えていきましょう。特に、親要素にdisplay: inline-block;と指定することでその幅が子要素の幅に合うことはよく使えるテクニックでしょう。
body{
background-color: white;
}
#table{
display: inline-block;
background-color: rgba(60, 150, 40, 0.8);
border: 5px solid goldenrod;
border-radius: 20px;
}
img{
width:120px; /*幅*/
height: 180px; /*高さ*/
margin: 10px; /*余白*/
}img{}の中で幅高さを指定することで画像を全て統一したサイズに表示させることができます。気をつけることは、元の画像のサイズを確認しておき、縦横比は維持して指定した方が良いでしょう。そうしないと変な方向に伸びた画像になって見た目が崩れてしまいます。また、marginを適当に指定して全方向に余白をつけましょう。
色の指定のしかたですが、background-color: 色;で指定できます。色の表現の仕方は直接色の名前を書くか、rgb(赤度,緑度,青度)で表せます。rgba(赤度,緑度,青度,不透明度)で不透明度も指定できます。他にも16進数で表すやり方もあります。
あえてやる必要はありませんがbody全体を白に指定しています。カードを並べている親要素はゲームテーブルっぽく緑形に。またborder: 幅 solid 色;で枠線をつけることができborder-radius: 半径;で角丸にもできます。意外とこれらだけでも結構色々なことが表現できますね。
では本題display: inline-block;で親要素(id=”table”)の幅が中身に合わせられることについてですが。実は<div>要素はブロック要素でありそのままだとさらに外側の幅いっぱいまで広がってしまいます。しかしこのように指定することでブロック要素と<img>要素などのインライン要素のいいとこ取りのようなインラインブロック要素に変わります。こうして中身の幅に合わせられるのはデザイン上非常に便利なので覚えておきましょう。
現時点ではこんな感じまでできました。
左寄せ・右寄せ・中央寄せ
ゲームテーブルだけではなく、得点表示やリセットの機能もつけ、この際左寄せ・右寄席・中央寄せをしてみましょう。
得点表示を左寄せ・リセットボタンを右寄せ
これまで書いてきたものに加えて、得点の表示欄とリセットボタンを作り、全体を括ってしまいましょう。CSSでは色味などの部分はともかく、コメントのある行が特に大事です。
<div id="container">
<!--上で書いたコード-->
<!-- . -->
<!-- . -->
<!-- . -->
<!--得点表示欄-->
<div id="pointTable">
ポイント : -- 点
</div>
<!--リセットボタン-->
<div id="reset-button">
リセット
</div>
#container{
display: inline-block;/*内側の幅に合わせる*/
}
#table{
float: left; /*左寄せ*/
display: inline-block;
background-color: rgba(60, 150, 40, 0.8);
border: 5px solid goldenrod;
border-radius: 20px;
}
#pointTable{
clear:left; /*左によってるものへの回り込みを解除*/
float: left; /*左寄せ*/
font-size: 20px;
margin: 5px;
}
#reset-button{
float: right; /*右寄せ*/
background-color: rgb(255, 70, 190);
color: white;
font-size: 24px;
margin: 5px 10px;
border-radius: 2px;
}
float:値;で値側に寄せることができます。これで得点表示欄(#pointTable)を左寄せ、リセットボタン(#reset-button)を右寄席することができました。
気になった方もいるかもしれませんが、#pointTableにclear:left;とありますね。何をしているのでしょうか。実はfloat:left;で左側に寄っている要素の右側には回り込む余地があるので、得点表示(#pointTable)がカードテーブル(#table)の右側にくっついてしまいます。そこで、clear:値;とすることで、その要素が値側に寄っているものへ回り込みをできなくしているのです
ですから、例えば、#pointTableにclear:left;とせず#reset-buttonにclear:left;としたらこんな感じになります。
全体の中央寄せ
全体が真ん中に寄ってくれると見てくれがだいぶ良くなりますから、やってみましょう。最後はあっけなく簡単です。
body{
text-align: center; //中央寄せ
background-color: white;
}
bodyにtext-align:center;とすることで全体をまるっと中央寄せにできます。
floatやclearを駆使して個別に左右に寄せたりもできますが、text-align:値;も便利です。
次回予告
次回からはJavaScriptを使っていきたいと思います。シリーズ的には次回からがメインとなります。
今回はどうしても1回きりでレイアウトの外観は完成させたかったので長くなってしまいましたが、次回からはもう少しトピックごとに区切っていこうと思います。
次回のテーマはJavaScriptのループ処理でカードを簡単に並べてしまおうというものです。今回タグをいくつもベタ書きで書き並べていましたが、もっと並べるカードが増えるとこれでは大変ですよね。その辺をJavaScript使ってHTMLを記述する方法で簡単にしちゃうのが目標です。
コメント