back

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

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



(by. SYODA-Tuyano.)

※リストが表示されない場合

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>



　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.