スタイルシートの作成

スタイルシートでデザインを作成

プレビュー

このトピックでは、スタイルシートを使用するログイン ダイアログを表すスクリーンパーツおよびスタイルシートを作成します。

以下の画像は、スタイルシートを使用するログイン スクリーンパーツを示します。このスタイルシートは indigodesigned.com からアクセスできます。

概要

以下は主な手順です。

  1. 新しいスタイルシートを作成
  2. スタイルシートで要素を追加してスタイル設定
  3. スクリーンパーツで要素にスタイル設定を適用
  4. プレビューを実行

詳細手順

(a-1) 1.新しいスタイルシートの作成

  1. アプリケーションメニュー開く/新規 ペインで [新しいプロジェクトの開始] ボタンをクリックします。

  2. スタイルシート オプションを選択します。

    Indigo Studio は新しい空のスタイルシートを作成します。

    プロジェクトで最初の作成されたスタイルシートはデフォルトのスタイルシートです。プロジェクトでデフォルトのスタイルシートを変更するには、デザイナーで 既定スタイルシート ボタンをクリックします。

(a-2) 2.スタイルシートに要素を追加してスタイル設定

  1. Alt を押してクリックするか、ボタンを ツールボックス からドラッグします。

    要素の追加については、スクリーンの作成 を参照してください。

  2. さらに要素を追加します。

    この手順を行うには、以下が必要です。

    • 2 つのボタン
    • タイトル
    • ラベル
    • リンク
    • テキストボックス
    • パスワード ボックス
    • チェック ボックス
    • アイコン

  3. ボタンを選択し、以下のスタイル プロパティに値を設定します。

    • 丸め: 20
    • 幅: 0
    • フォント色: 白色
    • 背景色: 紫色

  4. スタイルに名前を付けてください。この例では、ボタンを Primary と名付けます。

  5. スタイルシートのその他の要素のスタイルを定義します。以下の画像は完了したときの外観の例を示します。

(a-3) 3.スクリーンパーツの要素にスタイル設定を適用

  1. スクリーンパーツを追加します。

    キャンバス サイズを 300 x 500 ピクセルに設定し、背景色を #203741 に設定します。

    詳細については、スクリーンパーツの作成を参照してください。

  2. タイトルを追加し、テキストを LOGIN に設定します。

  3. プロパティ パネル から Title スタイルを選択します。

  4. 残りの要素を追加し、相対するスタイルを選択します。

(a-4) 4.プレビュー を実行します。

デザイナーの上にある「スクリーンパーツの実行」ボタンをクリックします。プレビューが新しいウィンドウで開きます。

この例のすべての要素を追加した場合、スクリーンパーツはこのトピックの最初の画像のように表示されます。このトピックで使用されるスクリーンパーツおよびスタイルシートを cloud.indigo.design からダウンロードできます。

スタイルシートを複製して要素の外観を変更します。新しいスタイルシートをデフォルトとして設定すると、スクリーンパーツの外観は変更されます。

関連トピック