JavaScriptとPhoneGap Buildで作るスマートフォンゲームアプリ

ゲーム内各画面のCSSコーディング

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLで構築したゲーム内の各画面のインターフェースに対してCSSコーディングをしていく方法について、そのいくつかのポイントを解説致します。
講師:
04:19

字幕

このレッスンでは HTML で構築したゲーム内の 各画面のインターフェイスに対して CSS コーディングをしていく方法について そのいくつかのポイントを解説します まずダウンロードしてきた css_coding という フォルダの中に入っている この www というフォルダの中にある css フォルダの中の この style.css ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう この CSS ファイルには すでに今回説明する各画面に対してのー スタイルシートの設定が 完了している状態となっています このファイルを目で追いながら 実際に CSS コーディングをするに当たって いくつかのポイントについて 見ていきたいと思います まずはこちらの body に注目してください この body に対して 横幅 width を736 pixel そして縦幅 height を 414 pixel これを設定しています 今回のこのコースでは iPhone 6 plus の 解像度に合わせたアプリを 制作していく形としています よって ここの body タグには その iPhone 6 の 解像度 ÷3 の値を設定しています ここの画面サイズや その他の 画面の中のパーツのサイズに関しては ご自身が対応させたい端末に合わせた形で 値をセットするようにしてください それでは次にこちらの方に注目してください div.page というのはゲーム内の 各画面を構成している div タグでしたね これに対しても同じように width と height で 解像度に合わせたサイズをセットしています そして overflow: hidden と書いて この div タグから外にはみ出た要素を 表示させないようにしています そして最後に display: none としています こうすることによって全ての画面が アプリ起動時には非表示の状態になります 各画面の表示は後ほど JavaScript を使って行っていきます そしてもう一つ とりわけ注目していただきたい部分が こちらの style.css ファイルの中にあります それはどこかというと このファイルのずっと下の方です こちらの部分です 前回のレッスンで HTML ソース上には もぐらは 1 体分のコーディングしかしない というふうに解説しました この CSS ファイルのこちらの部分ですが その 3 体のもぐらの位置を 指定しているものになります HTML ソース上ではこちらの部分の HTML ソースしか存在していません ただ今後 JavaScript を使って残り 2 体の HTML ソースを動的に生成したときに 自動的にその位置を決定しておくために このように残り 2 つのもぐらの位置に関しても 指定しておきます その際 このように 最後の数字を 2, 3 といった形で 連番で振っておきます このようにすることで残り 2 体に関しても 動的に生成された際に 自動的に画面の所定位置に 表示されるようになります このファイルの他の部分に関しては 通常通りの CSS コーディングで大丈夫ですが 先ほどダウンロードしてきたファイルの中に 各画面の完成形のイメージが入っています こちらのファイルの この「完成イメージ」 というフォルダの中です この中に各画面のイメージが入っています この画面を参考にしながら一度ご自身でも CSS コーディングを行ってみてください 以上でレッスンは終了です 今回は HTML で構築したゲーム内の 各画面のインターフェイスに対して CSS コーディングをしていく方法について いくつかのポイントを解説しました 以降のレッスンでは HTML ファイルから JavaScript および JQuery を読み込むー 方法について解説いたしますので そちらも合わせてご覧下さい

JavaScriptとPhoneGap Buildで作るスマートフォンゲームアプリ

このコースでは、JavaScriptとPhoneGap Buildを使ってスマートフォン向けのもぐらたたきゲームのアプリを作成する方法について解説します。Phonegap BuildやjQueryについて紹介したのち、HTMLやCSSでのコーディングの方法、ゲーム内でのアニメーションの実装や条件分岐の方法などについて学んでいきます。

2時間27分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年05月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。