Monaca＋PhoneGapでサクッとはじめるハイブリッドアプリ開発第2回

手順2：index.htmlを編集する

これで年齢計算アプリを開発する準備が整いました。まずは、起動画面であるindex.htmlの編集を行います。

Monacaアプリの画面はHTMLとCSS、JavaScriptで構成されます。具体的には、HTMLでページの骨格を作成し、CSS（スタイルシート）でHTMLを装飾します。JavaScriptはHTMLやCSSを動的に変更する（たとえばユーザーがボタンをタップしたら色を変える等）ために用いられます。従来のWebサイト制作と同じ組み合わせでアプリ開発できることは、Monacaの大きな強みと言えるでしょう。

まずはコード1をコピー＆ペーストし、index.htmlを書き換えてください。

【コード1：index.html（JavaScriptが含まれない）】


        
        
        
    
    
      JavaScriptとCSS入門
      
        
          あなたのお名前は？
          <input type="text" id="myname" class="input-text" style="width: 40%">
        
        
          年齢は？
          <input type="text" id="myage" class="input-text" style="width: 20%">
        
        
          生まれ年を計算

この記事のキーワード：

#モバイルアプリ

この記事をシェアしてください

Webとネイティブの好いとこ取り？ハイブリッドアプリ開発のススメ

JavaScriptを活用して現在時刻を表示する時計アプリを作ろう！

バックナンバー

この記事の筆者

鴨田健次

1980年生まれ。大学時代の専攻は、ドイツ語（ドイツに半年ほど留学）と映像制作（ドキュメンタリー）。独学でWebデザインを学び、大学卒業後は制作会社やコンテンツポータル会社で、主にWebデザイナー/HTML・CSSコーダーとして勤務。2010年から、アシアルにてWebディレクター/Webデザイナーとして、日々精進している。

鴨田健次のプロフィールを見る

アシアル株式会社

PHPとモバイルの開発を得意としたテクノロジーベンチャー。2002年7月の設立以来、PHP技術者のためのコミュニティサイト「PHPプロ！」や教育サービス、スマホアプリ開発プラットフォーム「Monaca」の提供など、Web システムの開発に留まらずさまざまなサービスを展開している。
http://www.asial.co.jp/

アシアル株式会社のプロフィールを見る