画面のレイアウトを決めよう
新しいプロジェクトが作成できたら、最初にアプリケーションの画面レイアウトを決めます。
画面レイアウトは、/css/default.cssファイルで指定します。ソリューションエクスプローラで/css/default.cssファイルをダブルクリックすると、コードが表示されます。
今回のサンプルアプリでは、画面のレイアウトを次のように指定します。
サンプルのレイアウトを定義したCSSファイルは、以下のようになります。
div#container {
height:100%;
}
div#header {
background-color:darkred;
width:100%;
height:10%;
}
div#main-right {
background-color:indianred;
width: 30%;
height:80%;
min-height: 80%;
float: right;
}
div#main-left {
background-color:white;
width: 70%;
height: 80%;
min-height: 80%;
float: left;
position: relative;
}
div#footer {
background-color:black;
width: 100%;
height: 10%;
min-height: 10%;
clear : both;
text-align: right;
}
これを、default.cssの最下行に定義してください。Visual Studioでは画面上で、［Ctrl］＋［S］キーを押すと、修正内容が保存されます。
Windowsストアアプリでのレイアウトの作成は、ホームページなどでHTMLコンテンツを作成する手順と同じです。なお、CSSやHTML5の文法や詳細については、リファレンスマニュアルなどを参照してください。
文字を表示しよう
画面のレイアウトが定義できたので、早速アプリケーションに文字を表示してみます。アプリケーションが起動したときに最初に開くページはdefault.htmlです。ソリューションエクスプローラでdefault.htmlファイルをダブルクリックすると、コードが表示されます。
このファイルには、<head>要素の中にWindowストアアプリを起動するために必要な参照が含まれています。具体的には、このアプリで実行するときに読み込まれるJavaScriptファイルやCSSファイルの参照が定義されています。ここの参照部分を変更すると、アプリケーションが正しく動きませんので、変更しないようにしてください。
<!-- 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> <!-- TravelSample 参照 --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script>
Windowsストアアプリで表示するコンテンツは、<body>要素の中に配置します。先ほどCSSファイルで定義した#containerの中に4つの<div>要素を配置します。
<div id="container"> <div id="header"> </div> <div id="main-left"> </div> <div id="main-right"> </div> <div id="footer"> </div> </div>
この画面の中に必要な情報を入れていきます。はじめに、アプリケーションのタイトルをheader要素の中に入れます。タイトルレベル2の見出し<h2>をつけて表示した例は次のとおりです。
<div id="header"> <h2>サンプル旅行代理店 ホテルカタログ</h2> </div>
<h2>タグ内の文字に任意のタイトルを指定してください。サンプルでは「サンプル旅行代理店 ホテルカタログ」としました。入力が終わったら、［F5］キーを押してWebストアアプリを実行します。指定した文字列が表示されていることが確認できるでしょう。
