libro
www.tuyano.com
JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

HTMLとJavaScriptの基本コードを覚えよう! (1/4)

作成:2012-11-10 11:19
更新:2012-11-10 11:19

■HTMLのソースコードをチェック!

では、前回、サンプルとして作成したプロジェクトの内容を見ていきましょう。まずはHTMLファイルです。デフォルトでは、「default.html」というファイルが作成されていました。このソースコードをチェックすると、下のリスト欄のようになっていることがわかります。

<link>タグと<script>タグに特徴がありますね。<link>ではスタイルシートファイルのリンクが設定されていますが、href="//Microsoft.WinJS.1.0/css/ui-dark.css"と指定されています。この//Microsoft.WinJS.1.0/css/下にあるスタイルシートは、システムライブラリに用意されているものです(実際、プロジェクト内を探してもありません)。

ui-dark.cssはGUIの基本的な表示をまとめたテーマ用スタイルシートで、黒い背景を基調とした全体として暗めのUIになります。試しにこれを「ui-light.css」に変えてみると、白い背景のテーマに変わります。テーマ用スタイルシートを変更することでUI全体の印象がガラリと変わることがわかるでしょう。

その後に、/css/default.css/js/default.jsを読み込む<link>と<scipt>があります。これらは、それぞれ「css」フォルダ内のdefault.cssと「js」フォルダ内のdefault.jsになります。これらが、ユーザーが独自に追加するスタイルとスクリプトを記述するファイルです。

<body>には、<p>タグが1つあるだけで、これが画面に表示されていたのですね。Windows StoreアプリのGUIは、この<body>部分にHTMLのタグでそのまま記述するだけです。本当に、ただのHTMLでしかないことがわかりますね。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※default.htmlのソースコード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>mysample1</title>

    <!-- WinJS 参照 -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- mysample1 参照 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>コンテンツをここに挿入</p>
</body>
</html>
※関連コンテンツ

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る