初心者による初心者のためのゲームアプリ作成 5

今回も、Monacaにログインし、ダッシュボード画面の最小限のテンプレートのプロジェクトを開き、コードエディターにindex.htmlファイルが開かれた状態であることを前提でお話しします。



<body>タグ内に記述するタグの種類を学ぼう。

アプリの画面を作成する場合は、文章や画像などを表示するための各種タグを<body>タグの中に記述していきます。HTMLでは、とても多くのタグとその属性が用意されていますが、ここでは重要なものに限らせて紹介させていただきます。

<h1></h1>タグは、見出しを定義します。h1~h6までありますが、h1が見出しにレベルが最も高く、h6が最もレベルの低い見出しと言えばいいでしょうか。書き方の例としては、<h1>見出し</h1>という感じです。

<p></p>タグは、文章の段落を定義します。書き方の例としては、<p>文章の段落を定義します。</p>

<div></div>タグは、特に意味を持たないタグです。複数のタグをまとめて扱うときや、四角い枠を描画したいときなどに使います。書き方の例としては、

<div>

<h1>見出し</h1>

<p>段落</p>

</div>

という感じですね。

<a></a>タグは、リンクを定義します。href属性でリンク先を指定することができます。書き方の例としては、<a href=”index.html”>TOPへ</a>という感じです。

<button></button>タグは、ボタンを定義します。書き方の例としては、<button>ボタン</button>です。

空要素(終了タグのないタグ)

<img>タグは、終了タグのないタグです。画像を参照するタグですが、属性の種類によってその役割が異なります。src属性は、画像の参照先を指定するもので、alt属性は、画像が何らかの理由で表示できなかった場合に、画像の変わりに表示する文字列を指定します。書き方の例としては、<img src=”flower.jpg”alt=”花”>という感じですね。ちなみに、<br/>タグも空要素でしたね。

「コメント」は、<!–コメント–>と記載すると、「コメント」は画面に表示されません。HTMLを作成しているとき、記述した内容に対する補助的な説明を記述したいときなどに、このタグを使います。

すべてのタグにつけられる属性

id属性は、要素を識別するために使用するもので、<div id=”header”>・・・</div>のように記述され、class属性は、CSSのクラス名を指定するときなどに使用します。例としては、<div class=”container”>・・・</div>ですね。

ちょっと、やってみましょうか。index.htmlファイルの15行目に、

<a href=”http://www.google.co.jp/”>グーグルへ</a>

と記述してみて下さい。

メニューバーの[保存]をクリックしたあと、Monacaデバッカーをスマートフォンで起動させて、PCのメニューバーの[実機デバック]をクリックするか、Monacaデバッカーで、「最小限のテンプレート」プロジェクトをタップして、ファイルを同期してみて下さい。スマートフォンの画面左上に「グーグルへ」という文字が表示されますので、タップするとgoogleのトップ画面が表示されるはずです。できましたでしょうか。出来ましたよね。

次回は、CSSについて学習したいと思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です