Skip to main content

 

アプリケーションの開発

 

 

OutSystems

カスケーディングスタイルシート(CSS)

カスケーディングスタイルシート(CSS)とは、ブラウザでHTMLコンテンツがどのように表示されるかを記述する言語です。OutSystemsアプリでは、基本テーマとCSSを含むOutSystems UIフレームワークを使用します。新しいスタイルを追加したり、基本テーマからコピーして既存のスタイルを変更したりできます。

これらのアプリのUI要素には、編集可能なCSSがあります。

  • テーマ
  • 画面とメール
  • ブロック
  • ウィジェット(複雑なウィジェットのスタイルは複数)

クラス属性でCSSを適用

プロパティペインのStyle Classesを使用して、要素の静的なCSSクラスを指定することができます。

  • モバイルアプリとリアクティブWebアプリでは、引用符あり、スペース区切りでクラス名を挿入します("bold red"
  • 従来のWebアプリでは、引用符なし、スペース区切りでクラス名を挿入します(bold red

Style ClassesプロパティでのCSSの指定

CSSクラスを動的に指定するには、以下でExpressionを使用します。

  • Style Classesフィールド(モバイルアプリとリアクティブWebアプリ)
  • Extended Propertiesclass属性(従来のWebアプリ)

CSSの編集

CSSコードの編集は、スタイルシートエディタで行います。CSSスタイルが添付されている要素を編集する際は、プロパティペインのStyle Classesプロパティをダブルクリックし、スタイルシートエディタを開きます。

またメインエディタのツールバーの[CSS]ボタンをクリックして、スタイルシートエディタを開くこともできます。アプリ名のタブを選択し、すべての要素で使用できるようにスタイルを定義または編集します。あるいは、現在選択している画面またはブロック名のタブを選択し、その画面またはブロックに対するスタイルのスコープを狭めます。

テーマのCSS

CSSの詳細度

スタイルには異なる優先度があり、Service Studioがスタイルシートをインポートする順序がブラウザがどのようにスタイルシートを適用するかに影響を及ぼします。最後に適用されるスタイルが最も高い優先度です。

  1. グリッドのContainerウィジェットのシステムスタイルシート
  2. ブロックスタイルシート
  3. 基本テーマを含むテーマスタイルシート(指定された場合)
  4. 画面またはメールスタイルシート
  5. グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
  6. スタイルエディタ使用時にService Studioによって生成されるスタイル
  7. AttributesまたはExtended Propertiesで定義したインラインスタイル

インラインCSS

プロパティペインのAttributesパートでインラインCSSを定義します。style属性を追加し、CSSルールを引用符付きで入力します(例: "background-color: yellow;")。

CSSが引用符で囲まれているstyleプロパティ

従来のWebでは、Extended Propertiesstyleを追加してインラインCSSを作成することができます。

従来のWebアプリのインラインCSS

OutSystemsグリッド

OutSystemsは、高度なグリッドシステムを使用しています。Themeグリッド設定の列数を指定すると、要素の幅を列で表すことができます。Margin Left(Auto)プロパティを使用すると、値が自動的に計算されます。

CSSのインポート

スタイルルールを別のロケーションからインポートするには、スタイルシートエディタの@import CSSアットルールを使用します。これをシートの最初の行に追加します。

プリプロセッサ

OutSystemsの開発ツールは、アプリでのCSSプリプロセッサ(SassやLESSなど)の使用をサポートしていません。