クイック スタート: テキストの表示 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

JavaScript を使った Windows ストア アプリは、いくつかの要素を使ってテキストを表示することができます。読み取り専用テキストを表示するための主な要素としては、label、div、paragraph、heading などがあります。このクイック スタートでは、これらの要素を使ってテキストを表示する方法を示します。

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください: Windows ストア アプリ UI の概要

必要条件

ラベル、div、段落、テキスト領域

Label、div、paragraph、heading は、JavaScript を使った Windows ストア アプリで読み取り専用テキストを表示するための主要なコントロールです。次の HTML は、単純な label コントロールを定義し、そのテキストを設定する方法を示しています。

<label>Hello, World!</label>

表示するテキストには、インライン style 属性を使ってさまざまな書式を適用することができます。次の例は、div、paragraph、label、heading の各コントロールに style 属性を組み合わせて、書式設定の異なる複数のテキスト文字列を定義する方法を示しています。

注  style 属性の代わりにカスケード スタイル シート (CSS) を使って、さまざまな書式が適用されたテキストを表示することもできます。このようにしてスタイルを 1 回定義しておくと、複数のコントロールから参照することができます。後でスタイルの定義に変更を加える場合も、変更は 1 か所で済みます。詳しくは、「カスケード スタイル シート」をご覧ください。

 


<div style="font-family:Arial">Sample text formatting runs</div>

<!-- 'margin:0px' removes any default margins from the <p> element. -->
<p style="margin:0px; color:lightgray; font-family:'courier new'; font-size:24px">Courier New 24</p>

<label style="color:teal; font-family:'times new roman'; font-style:italic; font-size:18px">Times New Roman Italic 18</label><br />
    
<!-- 'padding:0px' remove any default padding from the <h1> element. -->
<h1 style="padding:0px; background-color:transparent; color:steelblue; font-family:Verdana; font-weight:bold; font-size:14px">Verdana Bold 14</h1>

結果は次のようになります。

Run を使ったテキスト。

要約と次のステップ

アプリ内のテキストを表示する label、div、paragraph、heading の各要素の作成方法について説明しました。

関連トピック

フォントのガイドライン

クイック スタート: テキスト入力/編集コントロールの追加