スタイル

スタイルパネルでは、アプリの外観をカスタマイズできます。テーマの設定やウィジェットのバリアントの選択ができ、独自のスタイルの作成もできます。

グローバル スタイル: 一度に複数のウィジェットをスタイル設定する

テーマを使用してアプリ全体のスタイルを設定する

[Styles] タブの上部にあるテーマセレクタは、アプリのウィジェットのデフォルトの外観を制御します。App Maker には現在 2 つのテーマがあります。

  • Material: Google の標準的な表示スタイルであるマテリアル デザインを実装するテーマ。このテーマを使用すると、Inbox や Keep のような、Google のお気に入りのように見えるアプリをビルドできます。

  • Plain: 一般的なデザインの、シンプルなテーマ。無地のテーマの上に構築して、独自の固有な表示スタイルを作り上げます。

CSS でウィジェットをカスタマイズする

Material ウィジェットの微調整や Plain テーマの飾り付けを行う場合、独自のカスケーディング スタイルシート（CSS）を作成してウィジェットをカスタマイズできます。

App Maker のウィジェットとそのサブコンポーネントには、app- を接頭辞としてその後に名前が続く、組み込みの CSS クラスがあります。ウィジェットの外観を変更するには、テーマセレクタの下のテキストエリアを使用して、これらのクラスに独自の CSS を追加します。次に例を示します。

/* Adds rounded corners to button widgets */
    .app-Button {
      border-radius: 10px;
    }

    /* Sets font size for rows in list panels */
    .app-ListPanelRow {
      font-size: 1.2em;
    }

CSS セレクタを幅広く使用してアプリのスタイルを設定することもできます。

/* Turns off link underlines. */
    .app-Link:link {
      text-decoration: none;
    }

    /* Changes color of disabled buttons. */
    .app-Button[disabled] {
      background-image: none;
      background-color: white;
    }

さまざまな画面サイズのスタイル

ユーザーは大小さまざまな画面を備えたデバイスからアプリにアクセスする可能性があります。画面サイズ（画面解像度ともいいます）に応じてレイアウトが変わるレスポンシブ デザインを取り入れることで、アプリのエクスペリエンスを向上できます。

さまざまな画面サイズに合わせてレイアウトを自動的に調整するには、グローバル CSS でメディアクエリを使用します。レスポンシブ デザインの概要については、レスポンシブ ウェブデザインの基本をご覧ください。例については、レスポンシブ レイアウト グリッドをご覧ください。

ページエディタでサイズ固有のスタイルをテストする

スタイルをテストするには、キャンバスのサイズを手動で変更するか、特定の画面解像度を適用します。ページエディタで解像度を変更しても、公開されているアプリには影響せず、他のデベロッパーには変更が反映されません。キャンバスを元のカスタムサイズに戻すには、ページを更新します。

特定の画面解像度を選択するには、ページエディタの上部にある [Device resolutions] をクリックします。

カスタム解像度を選択する場合を除き（この場合、カスタムサイズは寸法値のプロパティ エディタに表示されます）、キャンバスの画面サイズは右上隅に表示されます。

画面解像度を管理する

画面解像度を追加するには、デバイス解像度アイコン（）をクリックし、[Add resolution] をクリックします。または、設定アイコン（） [App Settings] [Add Resolution] の順にクリックします。

画面解像度の編集と削除を行うには、設定アイコン（） [App Settings] に移動して、[Viewport resolutions] セクションを探します。編集または削除する解像度をポイントして、[Edit] または [Delete] をクリックします。

ウィジェット スタイル: 単一ウィジェットのスタイル

ウィジェットのテーマ

テーマ選択ツールを使用すれば、ウィジェットにスタイルを簡単に適用できます。ウィジェットを選択し、アクションバーのプルダウンでテーマのリストから選択します。

テーマ選択ツール

Material テーマには複数のバリアントがあり、ほとんどのウィジェットに対応します。たとえばパネル ウィジェットには、ホワイト ペーパーのように見える Paper バリアント、パネルの下にウィジェットを表示する Transparent バリアントなどがあります。

ウィジェット固有の CSS

[Style] タブには、カスタム CSS を入力するためのテキストエリアがあります。これにより、選択したウィジェットのスタイルを正確な仕様に合わせて微調整できます。ウィジェットのスタイルには接頭辞 .app- もあり、その後にはウィジェットが配置されているページの名前、さらにウィジェット自体の名前が続きます。ウィジェットが選択されると、オートコンプリート ポップアップの上部に表示されます。

例:

/* Changes color of SampleButton1 to yellow */
    .app-NewPage-SampleButton1 {
      background-image: none;
      background-color: yellow;
    }

    /* Sets font in SampleListPanel1's rows to bold */
    .app-NewPage-SampleListPanel1Row {
      font-weight: bold;
    }

カスタム バリアント

App Maker では、独自のバリアントを作成することもできます。バリアントを作成するには、[Styles] タブの [CSS] セクションを使用し、app-[WidgetType]--[VariantName] の形式の名前を持つクラスを作成します。次に例を示します。

.app-Button--RedButton {
      background-image: none;
      background-color: red;
    }

適切な名前のクラスを作成すると、そのウィジェットが選択されたときにアクションバーの [Variant] プルダウンにバリアントが表示されます。

styles プロパティによるその他のスタイル

プロパティ エディタの [Display] にある styles プロパティを使用して、スタイルパネルの外側にあるウィジェットにスタイルを追加できます。[Style] でクラスを定義して、プロパティに追加します。この方法で割り当てられるスタイルは、通常の app- 接頭辞を必要としません。次に例を示します。

.specialSubmitButton {
      background-image: none;
      background-color: red;
    }