Skip to main content

 

アプリケーションの開発

 

OutSystems

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

カスケーディングスタイルシート(CSS)とは、コンテンツがどのように表示されるかを記述する言語です。コンテンツ(HTML)を体裁から分離しやすくすることを目的としています。OutSystemsで使用するOutSystemsモバイルUIフレームワークとOutSystems Web UIフレームワークには、それぞれに独自のCSSが付属しています。新しいスタイルを追加したり、基本テーマからコピーして既存のスタイルを変更したりできます。

これらの要素には、編集可能な独自のCSSがあります。

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

クラスアトリビュートでCSSを適用

Style Classesを使用する、またはExtended Propertiesを使用して[Property]フィールドをclassとして設定することで、プロパティペインで要素のクラスを指定できます。

Style Classesを使用して静的クラスを特定するには、以下の手順を実行します。

  • Webアプリケーションでは、引用符なし、スペース区切りでクラス名を挿入します。(bold red
  • モバイルアプリケーションでは、引用符あり、スペース区切りでクラス名を挿入します(bold red

動的クラスを特定するには、以下の手順を実行します。

  • Webアプリケーションでは、Expressionを使用してExtended Propertiesclassアトリビュートを定義します。**
  • モバイルアプリケーションでは、[Style Classes]フィールドのExpressionを使用します。

CSSの編集

CSSは、スタイルシートエディタで編集します。CSSを持っている可能性のある要素を編集する際は、プロパティペインのStyle Classesプロパティをダブルクリックし、スタイルシートエディタを開きます。

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

CSSの詳細度

すべてのスタイルが同じ優先度や順番を持っているわけではなく、Service Studioでは、ブラウザがどのようにしてスタイルを適用するかに影響を及ぼすスタイルシートをインポートします。最後に適用されるスタイルが最も高い優先度です。

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

インラインCSS

Webでは、Extended Propertiesstyleを追加してインラインCSSを作成し、CSSルールを入力します(「background-color: green;」など)。

モバイルでは、プロパティペインの[Attributes]パートでインラインCSSを定義します。

OutSystemsグリッド

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

CSSのインポート

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