HTMLとJavaScriptの基本コードを覚えよう! (1/4)
作成:2012-11-10 11:19
更新: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でしかないことがわかりますね。
<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でしかないことがわかりますね。
(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>
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る