PR

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

2012年12月27日(木)
鴨田 健次アシアル株式会社

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

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

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています