はじめてぶらうざののべるげーむをつくってみたの！
自分でノベルゲーを作りたくなったので、モチベ維持のためにもQiita記事にしました。
ゆくゆくは簡単にブラウザノベルゲームを作れるソフトでも作りたいなと思ってるので、その下調べ的ななにがしですね。
Qiita記事は初心者なので、なんか書いた方がいいこととかあれば教えてくだせぇ。
それではさっそく行きましょう。
Chapter 0.使用言語
- HTML
- CSS
- JavaScript(JQuery)
Chapter 1.とりあえずタイトル画面つくるかのぅ…。
タイトル画面がないと始まりません。
1.仮でとりあえず作っていきます。
html
<body><h1>ノベルゲーム！</h1><ahref="">続きから</a><ahref="">最初から</a><ahref="">環境設定</a></body>css
*{text-decoration:none;color:black;}h1{background-color:rgba(255,0,0,.3);}a{display:block;background-color:rgba(0,255,0,.3);}必要なものはこれくらいでしょうか。
これをもとにCSSでデザインを作っていきますが、上の通りbackground-color:rgba(??,??,??,.3);などと背景色をつけるとどの要素がどこにいるかわかりやすいですね。
2.タイトルとメニューは中央寄せにしたいですね。
そこで、text-align:center;をh1とaに対して指定します。
また、それぞれのwidthを10emにしました。
この時点では、h1要素とa要素の中身は中央寄せになりましたが、a要素自体は左に寄っています。これを真ん中に持ってくるためにdisplay:flex;を召喚します。
html
<divid="felxcontainer"><h1>ノベルゲーム！</h1><ahref="">続きから</a><ahref="">最初から</a><ahref="">環境設定</a></div>css
#flexcontainer{display:flex;flex-flow:columnnowrap;align-items:center;position:absolute;top:0;bottom:0;left:0;right:0;}すると
無事真ん中に来ました。
3.背景がなんか寂しいなぁ…。
というわけでネットのフリー画像を背景に指定。
css
body{background:url("image/TopImage.jpg");margin:0;padding:0;position:absolute;top:0;bottom:0;left:0;right:0;}
全体的に上に寄っているので、h1とaの親要素（#flexcontainer）のcssに、justify-content:center;を追加します。すると以下の通り全体が真ん中に来ます。
4.あとはこまごま調整して…
最終的にはこんな感じになりました。
html
<body><divid="flexcontainer"><h1>ノベルゲーム！</h1><div><ahref="">続きから</a><ahref="">最初から</a><ahref="">環境設定</a></div></div></body>css
*{text-decoration:none;color:black;}body{background:url("image/TopImage.jpg");margin:0;padding:0;position:absolute;top:0;bottom:0;left:0;right:0;}#flexcontainer{display:flex;flex-flow:columnnowrap;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;left:0;right:0;}#flexcontainerdiv{border:2pxsolidwhite;border-radius:5px;}h1{margin:0;color:white;font-size:11vw;text-align:center;}a{color:white;display:block;text-align:center;font-size:2.5vw;line-height:2em;width:10em;}a:hover{background-color:rgba(255,255,255,.5);}根気が残っていれば次回以降はゲームの中身の部分を作っていく予定です。
参考サイト
- PAKUTASO(ここのフリー画像を使いました。)