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

HTMLのタグの種類

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



最初に書いてある<!DOCTYPE HTML>は、HTML5(HTMLの最新型)で記述された文書であることを表すタグで、終了タグ</>はありません。HTMLで書かれた文書ですよと宣言というか、宣誓というか、そんな意味合いのタグです。

次に、<html></html>HTML文書であることを表すタグで、文書全体をこのタグで囲みます。<html>文書全体</html>というイメージですかね。ちょっと、わかりにくいですね。まあ、文書全体をこのタグで囲むんだぐらいに思ってくれればいいと思います。

<head></head>文書全体に関するさまざまな情報をこのタグで囲みます。このタグ自体はあまり意味を持たないですが、このタグで囲まれた中に入っているタグがさまざまな意味合いを持っています。

<meta charset=”utf-8″>・・・ ①
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>・・・②
<meta http-equiv=”Content-Security-Policy” content=”default-src * data: gap: content: https://ssl.gstatic.com; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval'”>

<meta>タグは、メタ情報と呼ばれるHTMLの補足情報が書かれたタグです。①は、文字コードがutf-8で書かれていますよということや、②は、スマートフォンなどの小さいサイズのスクリーンで見たときの拡大・縮小の設定に関することなどを書きます。

<script src=”components/loader.js”></script>・・・③

JavaScriptで書かれたファイルを読み込んでいます。

<link rel=”stylesheet” href=”components/loader.css”>
<link rel=”stylesheet” href=”css/style.css”>・・・④

CSSで書かれたファイルを読み込んでいます。③、④とも、Monacaでアプリを作成を行う場合は、必ず必要なタグとなるので消さないで下さい。タグの内容の詳細は、割愛します。

<script></script>開始タグと終了タグの間にJavaScriptを記述することができます。ちょっと、やってみますか。コードエディターで、⑤を記述してみて下さい。

<script>
alert(“いい天気ですね”);        ・・・⑤
</script>

記述したら、メニューバー[保存]をクリックして、[プレビュー]をクリックしてみて下さい。「いい天気ですね」と書かれたポップアップ通知が表示されるはずです。

<body></body>この開始タグと終了タグの間に、画面上に表示する文字列や画像などを記述します。記述した⑤を消して、⑥も消して、消したところに⑦の文字を記述してください。

<body>
<br />
This is a template for Monaca app.    ・・・⑥
</body>

<body>
<br />
お腹が空いた。    ・・・⑦
</body>

記述したら、メニューバー[保存]をクリックしてみて下さい。プレビュー画面に「お腹が空いた。」と表示されますよね。何か、楽しくなりませんか。ちなみに、<br />は、改行を表すタグです。brは空要素なのでスラッシュをつけてもつけなくても構わないということです。

次回は、アプリの画面を作成する場合には、文章や画像を表示するための各種タグを<body></body>の中に記述しますが、その各種タグについて、説明したいと思います。


コメントを残す

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