ユーザーインターフェイススタイリング

Native Scriptアプリケーションのビュー（要素）の外観や表現は、Webアプリケーションで行うのと同様の方法で変更可能です。 カスケードスタイルシート（CSS）を使用するか、JavaScriptの要素のスタイルオブジェクトを変更します。 CSS言語はサブセットのみがサポートされています。

DOM Style Objectと同様に、各Viewインスタンスは、ビューの保持する全てのスタイルプロパティを公開します。 ビューが表示されると、そのスタイルプロパティはすべて、基になるネイティブウィジェットに適用されます。

CSSスタイルの適用

CSSスタイルは、3つの異なるレベルで設定できます。

• アプリケーション全体のCSS：すべてのアプリケーションページに適用
• ページ固有のCSS：ページのUIビューに適用されます
• インラインCSS：UIビューに直接適用されます

異なるレベルで宣言されたCSSがある場合—すべてが適用されます。インラインCSSの優先度が最も高く、アプリケーションCSSの優先度が最も低くなります。

プラットフォーム固有のCSSを適用することもできます。

アプリケーション全体のCSS

アプリケーションが起動すると、NativeScriptはapp.cssファイルが存在するかどうかを確認します。 含まれている場合、含まれるCSSスタイルはすべてのアプリケーションページでロードおよび使用されます。このファイルは、複数のページで使用されるスタイルを保存するのに便利な場所です。

アプリケーション全体のCSSがロードされるファイルの名前を変更できます。通常、以下に示すようにapp.jsまたはapp.tsファイルで、 アプリケーションを開始する前に変更を行う必要があります。

var application = require("tns-core-modules/application");
application.setCssFileName("style.css");

application.start({ moduleName: "main-page" });

import { setCssFileName, start as applicationStart } from "tns-core-modules/application";
setCssFileName("style.css");

applicationStart({ moduleName: "main-page" });

以下に示すようにgetCssFileName()メソッドを使用して、アプリケーション全体のCSSファイルの名前を確認することもできます。

var application = require("tns-core-modules/application");
var fileName = application.getCssFileName();
console.log(`fileName ${fileName}`);

import { getCssFileName, start as applicationStart } from "tns-core-modules/application";
let fileName = getCssFileName();
console.log(`fileName ${fileName}`);

applicationStart({ moduleName: "main-page" });

ページ固有のCSS

ページのXML宣言ファイルが読み込まれると、NativeScriptは同じ名前のCSSファイル（存在する場合）を探し、見つかったCSSスタイルを読み取り、自動的に読み込んでページに適用します。 たとえば、mypage.xmlという名前のページは、mypage.css内のすべてのCSSを自動的に読み込みます。 CSSファイルは、自動的に適用されるXMLファイルと同じフォルダーに存在する必要があります。

ページにカスタムコンポーネントをインポートすると、それらのコンポーネントのCSSもページに適用されます。 カスタムコンポーネントのCSSをスコープして、コンポーネントスタイルがページに「漏れない」ようにするのが最適な方法です。

<!-- myCustomComponent.xml -->
<StackLayout class="mywidget">
	<Label text="Custom component layout" class="label" />
</StackLayout>

/* myCustomComponent.css */
/* GOOD: This will ONLY apply to the custom component */
.mywidget .label {
	color: blue;
}

/* BAD: This will apply to the custom component AND potentially to the page where the component is used */
.label {
	color: blue;
}

カスタムコンポーネントのスタイルがどのように適用されるかの例については、このプロジェクトをNativeScript Playgroundで試してください。

ページのcssプロパティを使用して、ファイルで指定されたCSSスタイルをオーバーライドすることもできます。

page.css = "button { color: red }";

page.css = "button { color: red }";

ページにデフォルトのCSSを設定したら、次の2つの方法を使用して追加できます。

1. 文字列からCSSを追加する
2. ファイルからCSSを追加する

CSS文字列を追加する

このスニペットは、現在のスタイルセットに新しいスタイルを追加します。これは、小さなCSSチャンクを要素に追加する必要がある場合（テスト目的など）に非常に便利です。

page.addCss("button {background-color: blue}");

page.addCss("button {background-color: blue}");

CSSファイルの追加

このスニペットは、現在のセットに新しいCSSスタイルを追加します。ただし、このメソッドはファイルからそれらを読み取ります。ファイル内のスタイルを整理し、複数のページでスタイルを再利用するのに便利です。

page.addCssFile(cssFileName);

page.addCssFile(cssFileName);

インラインCSS

HTMLと同様に、CSSはXMLマークアップのUIビューに対してインラインで定義できます。

<Button text="inline style" style="background-color: green;" />

プラットフォーム固有のCSS

NativeScriptの規則により、個別のスタイルシートまたはインライン宣言を介して、プラットフォーム固有のCSSを簡単に適用できます。 特定のプラットフォームおよび画面サイズでファイルをターゲットとするためのファイル名規則の概要については、このドキュメントを参照してください。

iOSまたはAndroidでスタイルをターゲットにするには、主に4つの方法があります。

1. プラットフォーム固有のスタイルシート（styles.ios.css、styles.android.css）
2. プラットフォーム固有のマークアップブロック（<ios> ... </ios>、<android> ... </android>）
3. プラットフォーム固有の属性（<Label ios:style="..." android:style="..."）
4. プラットフォーム固有のCSSルール（.ios .mystyle { ... }、.android .mystyle { ... }）*プラグインが必要

NativeScriptでプラットフォームに依存しない、プラットフォーム固有のスタイルを管理するための最も一般的で維持可能なパターンは、複数のスタイルシートとCSSインポートを使用することです。 このPlaygroundデモを参照して、このパターンの実際の動作を確認してください。

このパターンでは、ページにはcommon、iOS、Androidの3つの異なるスタイルシートがあります。たとえば、myPage.xmlページの場合、3つのスタイルシートがあります。

1. myPage-common.css
2. myPage.ios.css
3. myPage.android.css

myPage.ios.cssとmyPage.android.cssの両方で、myPage-common.cssから共通の共有スタイルをインポートします。

/* Import shared style rules */
@import './myPage-common.css';

/* Add iOS/Android specific rules (if any) */
.mystyle { ... }

ビルド時に、NativeScriptは自動的に共通スタイルをインポートし、ターゲットビルドプラットフォームに応じて正しいiOSまたはAndroidスタイルシートを選択します。

サポートされるセレクター

NativeScriptは、CSSセレクター構文のサブセットをサポートします。サポートされているセレクターの使用方法は次のとおりです。

• タイプセレクター
• クラスセレクター
• IDセレクター
• 階層セレクター
• 属性セレクター
• 擬似セレクター

タイプセレクター

CSS要素セレクターと同様に、NativeScriptのタイプセレクターは、指定されたタイプのすべてのビューを選択します。タイプセレクタは大文字と小文字を区別しないため、 buttonとButtonの両方を使用できます。

button { background-color: gray }

クラスセレクター

クラスセレクターは、指定されたクラスを持つすべてのビューを選択します。 クラスはclassName、ビューのプロパティを使用して設定されます。 注釈：JS / TS で要素にクラスを追加するためにclassNameに指定するクラスルールは、 app.cssなどの、対象要素よりも上位のコンポーネントツリー上にあるCSSファイルに存在する必要があります。

.title { font-size: 32 }

var label = new labelModule.Label();
label.className = "title"

let label = new labelModule.Label();
label.className = "title"

<Label className="title" />

IDセレクター

IDセレクターは、指定されたIDを持つすべてのビューを選択します。idは、ビューのidプロパティを使用して設定されます。

#login-button { background-color: blue }

var btn = new buttonModule.Button();
btn.id = "login-button"

var btn = new buttonModule.Button();
btn.id = "login-button"

<Button id="login-button" />

階層セレクター（CSSコンビネーター）

CSSセレクターには複数の単純なセレクターを含めることができ、セレクター間に関連性を示すシンボルを含めることができます。

• (スペース) - 子孫セレクター。たとえば、次のコードは、StackLayouts内のすべてのボタンを（どのレベルか関係なく）選択します。
  • CSS
  • XML

  StackLayout Button { background-color: blue; }

  <StackLayout>
      <WrapLayout>
          <Button id="login-button" testAttr='flower' />
      </WrapLayout>
  </StackLayout>

  
  
• (>) - 直接の子セレクター。前の例を使用して、CSSが次のように変更された場合：

  StackLayout > Button { background-color: blue; }

  background-colorルールは適用されません。 セレクターを適用するには、WrapLayout要素を削除して、ButtonがStackLayoutの直接の子になるようにする必要があります。

  
  
• (+) - 隣接する兄弟セレクターにより、指定された要素の兄弟であるすべての要素を選択できます。

クラスごとの直接兄弟テスト

<StackLayout class="layout-class">
	<Label text="Direct sibling test by id"/>
	<Button class="test-child" text="First Button"/>
	<Button class="test-child-2" text="Second Button"/>
</StackLayout>

.layout-class .test-child + .test-child-2 {
	background-color: green;
}

IDによる直接兄弟テスト

<StackLayout class="layout-class">
	<Label text="Direct sibling test by id"/>
	<Button id="test-child" text="First Button"/>
	<Button id="test-child-2" text="Second Button"/>
</StackLayout>

.layout-class #test-child + #test-child-2 {
	background-color: green;
}

タイプ別の直接兄弟

<StackLayout class="direct-sibling--type">
	<Label text="Direct sibling by type"/>
	<Button text="Test Button"/>
	<Label text="Test Label"/>
	<Button text="Test Button"/>
	<Label text="Test Label"/>
	<Button text="Test Button"/>
	<Label text="Test Label"/>
</StackLayout>

StackLayout Button + Label{
	background-color:green;
	color:white;
}

属性セレクター

button[testAttr]{ background-color: blue; }

<Button testAttr="flower" />

このセレクターは、testAttr属性に何らかの値を持つすべてのボタンを選択します。

また、いくつかのより高度なシナリオがサポートされています。

• button [testAttr='flower'] {...} - testAttrプロパティがflowerという値に正確に設定されているすべてのボタンにCSSを適用します。
• button [testAttr~='flower'] {...} - スペースで区切られた単語のリストを含むtestAttrプロパティを持つすべてのボタンを選択します。そのリストの1つは「flower」です。
• button [testAttr|='flower'] {...} - 「flower」で始まるtestAttrプロパティ値を持つすべてのボタンを選択します。 値は、btn['testAttr'] = 'flower'のように単独であるか、 もしくはbtn['testAttr'] = 'flower-house'のようにハイフン(-)が続く、単語全体でなければなりません。
• button [testAttr^='flower'] {...} - 「flower」で始まるtestAttrプロパティ値を持つすべてのボタンを選択します。値は単語全体である必要はありません。
• button [testAttr$='flower'] {...} - 「flower」で終わるtestAttrプロパティ値を持つすべてのボタンを選択します。値は単語全体である必要はありません。
• button [testAttr*='flo'] {...} -「flo」を含むtestAttrプロパティ値を持つすべてのボタンを選択します。値は単語全体である必要はありません。

属性セレクターは単独で使用することも、すべてのタイプのCSSセレクターと組み合わせることもできます。

#login-button[testAttr='flower'] { background-color: blue; }
[testAttr] {color: white;}

<Button id="login-button" testAttr='flower' />
<Label testAttr="some value" />

擬似セレクター

擬似セレクターまたは擬似クラスを使用して、要素の特別な状態を定義します。現在、NativeScriptは:highlighted擬似セレクターのみをサポートしています。

button:highlighted { background-color: red; color: gray;}

<Button testAttr='flower' />

ルートビューCSSクラス

柔軟なスタイル設定とテーマ設定を可能にするために、NativeScriptは特定の状態のアプリケーションのルートビューにCSSクラスを追加します。

デフォルトのCSSクラスは次のとおりです。

• .ns-root - アプリケーションのルートビューに割り当てられたクラス
• .ns-modal - モーダルルートビューに割り当てられたクラス

各アプリケーションおよびモーダルルートビューのCSSクラスは次のとおりです。

• .ns-android, .ns-ios - アプリケーションプラットフォームを指定するクラス
• .ns-phone, .ns-tablet - デバイスタイプを指定するクラス
• .ns-portrait, .ns-landscape, .ns-unknown - アプリケーションの方向を指定するクラス
• .ns-light, .ns-dark - システムの外観を指定するクラス。

ダークモードのサポートの詳細については、このドキュメントを参照してください。

サポートされているCSSプロパティ

このプロパティのリストは、CSSで、または各ビューのスタイルプロパティを介して設定できます。

NativeScript固有のCSSプロパティ

モバイル開発のコンテキストでは、モバイル固有のプロパティがいくつかあります（AndroidやiOSなどのプラットフォーム固有のプロパティもあります）。 NativeScriptでは、これらの機能を備えたプロパティは、コード（インライン、JavaScriptおよびTypeScript）の両方からアクセスできますが、CSSプロパティとしても公開されます。 API参照とは別に、以下のリストは、NativeScriptで一般的でないCSSプロパティのほとんどを提供しています。

androidElevationプロパティの使用^Android

{N} 5.4以降、androidElevationというAndroid固有の新しいプロパティが導入されました。 ビューの標高は Zproperty で表され、影の視覚的外観を決定します。 標高の値が大きいほど、ビューにソフトな影が設定され、低い標高を使用すると小さい影が設定されます。

例：

.tvElevation{
	android-elevation:5;
}

<StackLayout class="home-panel">
    <TextView class="tvElevation" editable="false" textWrap="true" text="TextView" />
    <Label androidElevation="5" class="sampleLabel" textWrap="true" text="Label" />
    <Button androidElevation="7" class="sampleButton" text="Button" />
</StackLayout>

デモ

.btn-no-elevation {
	android-elevation: 0;
}

このプロパティの詳細については、シャドウとクリップビューの作成の記事をご覧ください。

androidDynamicElevationOffsetプロパティの使用^Android

{N} 5.4で導入されたもう1つのプロパティはandroidDynamicElevationOffsetです。 このプロパティを使用すると、アクションの実行時に表示される標高を設定できます。 これらのアクションは、例えば、tap、touchなどです。

例：

.sampleButton2{
	background-color: lightcyan;
	android-elevation:7;
	android-dynamic-elevation-offset:7;
}

<StackLayout class="home-panel">
	<Button androidElevation="7" androidDynamicElevationOffset="8"
			class="sampleButton" text="Button" tap="" />
	<Button class="sampleButton2" text="Button" tap="" />
</StackLayout>

デモ

サポートされている測定単位

NativeScriptは、測定単位として、DIP（デバイス非依存ピクセル）、ピクセル値（postfixを介したpx）、パーセント値（width、height、marginは部分的なサポート）をサポートしています。

NativeScriptの推奨測定単位はDIPです。 すべての測定可能なプロパティ（width、height、margin、paddings、 border-widthなど）はデバイスに依存しないピクセル数をサポートしています。フォントサイズは常にDIPで測定されます。

.myLabel {
	font-size: 28;
	width: 200;
	height: 30;
}

デバイスに依存しないピクセル（DIP）は、デバイス画面のピクセルをデバイス画面スケール（密度）で割った値に等しくなります。

const screen = require("tns-core-modules/platform").screen;

// mainScreen is of type ScreenMetrics interface /api-reference/interfaces/_platform_.screenmetrics
let scale =  screen.mainScreen.scale;
let widthPixels = screen.mainScreen.widthPixels;
let heightPixels = screen.mainScreen.heightPixels;
let widthDIPs = screen.mainScreen.widthDIPs; // DIPs === pixels/scale (e.g 1024 pixels / 2x scale = 512 DIPs)
let heightDIPs = screen.mainScreen.heightDIPs;

import { screen } from "tns-core-modules/platform";

// mainScreen is of type ScreenMetrics interface /api-reference/interfaces/_platform_.screenmetrics
let scale =  screen.mainScreen.scale;
let widthPixels = screen.mainScreen.widthPixels;
let heightPixels = screen.mainScreen.heightPixels;
let widthDIPs = screen.mainScreen.widthDIPs; // DIPs === pixels/scale (e.g. 1024 pixels / 2x scale = 512 DIPs)
let heightDIPs = screen.mainScreen.heightDIPs;

NativeScriptは、width、height、marginsでパーセント値をサポートします。 レイアウトパスが開始されると、まず親の使用可能なサイズに基づいてパーセント値が計算されます。 つまり、垂直なStackLayoutで2つのButtonをheight='50%'として配置すると、使用可能なすべての高さが得られます（たとえば、StackLayoutを垂直に塗りつぶします）。 marginプロパティにも同じことが当てはまります。 たとえば、marginLeft='5%'を設定した場合、要素には、親の利用可能な幅の5%に対応するマージンがあります。

CSS変数を使用する

NativeScriptは、アプリで使用されるCSSを通じて再利用可能な値のCSS変数 （カスタムプロパティまたはカスケード変数とも呼ばれます）をサポートします。

CSS変数は、親ビューから子ビューに引き継がれます。

変数の宣言：

/* Define --my-custom-color as a global value */
.ns-root {
	--my-custom-color: black;
}

/* In landscape mode change the value to blue */
.ns-landscape {
	--my-custom-color: blue;
}

子要素から変数をオーバーライドする：

/* Change --my-custom-color to green for elements below */
.ns-root .override-color {
	--my-custom-color: green;
}

変数を使用する：

.using-variable {
	color: var(--my-custom-color);
}

デフォルト値は--my-undefined-valueでblackとなります。 横長(landscape)モードではblueになります。 親要素にクラスoverride-colorがある場合、値はgreenになります。

代替値を使用する：

.using-variable {
	color: var(--my-undefined-value, yellow);
}

--my-undefined-valueは定義されていないため、--my-undefined-valueの色はyellowが適用されます。

ネストされたフォールバック値を使用する：

.using-variable {
	color: var(--my-undefined-value, var(--my-custom-color, yellow));
}

CSS calc() を使用する

NativeScriptは、CSS値で簡単な計算を実行するための CSS calc() 関数をサポートしています。

構文：

element {
	width: calc(100% * 1.25); /* width: 125% */
}

CSS variablesを使用：

element {
	--my-variable: 10:
	width: calc(100% * var(--my-variable)); /* width: 125% */
}

CSSを使用したNativeScriptコンポーネントプロパティへのアクセス

CSS仕様の一部ではないNativeScriptコンポーネントプロパティ値を設定できます。例えば：

StackLayout {
	orientation: horizontal;
}

この機能は、string、number、booleanなどの単純なタイプのプロパティに限定され、XMLのコンポーネントマークアップ宣言に似たローカルプロパティ値を設定します。CSSの継承はサポートされていません。

フォントを使用する

font-familyプロパティには、いくつかの値を保持することができますが、リストの中で最初にサポートされているフォントが使用されます。 次の汎用フォントファミリもサポートされています。

• serif（例：Times New Roman）
• sans-serif(（例：Helvetica）
• monospace（例：Courier New）

プラットフォーム固有：

• Android：サポートされているフォントはシステムに大きく依存しているため、汎用フォントファミリまたはカスタムフォントを使用することをお勧めします。
• iOS：iOSには30以上のデフォルトフォントがあります。 こちらで特定のiOSバージョンとデバイスでサポートされているフォントを確認できます。 組み込みフォントを使用するには、font-family: "American Typewriter";のように、font-familyプロパティなどでフォント名を指定するだけです。 "font-weight"プロパティを使用して、フォントの太さを調整します。

カスタムフォント

アプリでカスタムフォント（.TTFまたは.OTF形式）を使用できます。NativeScriptランタイムは、app/fonts/（Angularを使用している場合はsrc/fonts/） ディレクトリの下でフォントファイルを探し、それらを自動的にロードします。

CSSをインポート

@import CSSルールを使用すると、ローカルファイルからCSSをインポートできます。このルールは、他のすべてのタイプのルールよりも優先する必要があります。

@import url('~/your-style.css');

SASSを使用する

NativeScriptでは、プレーンなCSSファイルの代わりにSASS CSSプリコンパイラーを使用して、アプリのスタイルを管理できます。 Webプロジェクトと同様に、SASSはスタイルシートに共有変数、ミックスイン、ネストされたスタイルタグなどの追加機能を提供します。

NativeScriptでSASSを使用するには、"node-sass" または"sass"のようなSASSコンパイラが必要です。 このコンパイラは、NativeScriptビルドプロセスに介入し、buildおよびlivesync中に .scss.sassファイルを自動的に.cssに変換します。 SASSはビルド時にCSSにコンパイルされるため、NativeScriptの通常の規則ベースのパターンが機能するためにスタイルシートの命名規則を変更する必要はありません。 NativeScriptページと同じ名前のSASSファイルは引き続き自動的にリンクされます。

以下の例では、SASSを手動で有効にした状態で使用できます。

または、SASSがすでに有効になっているテンプレートを使用します。例えば：

NativeScript 5.x以前（レガシーを使用しているnativescript-dev-webpack）で作成されたプロジェクトの場合、 migrateコマンドを実行してSASSコンパイラーを更新（およびレガシープラグインを削除）できます。 このmigrateコマンドは、NativeScript CLI 6以降で使用できることに注意してください。

NativeScriptプロジェクトへのSASSサポートの追加に関する詳細については、テーマドキュメントのこのページを参照してください。