Webサイト制作の知識だけでカンタン年齢計算アプリを作ろう！

手順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%">
        
        

          生まれ年を計算