CookBook

BloomMaker CSS エディタでコンテナ内だけに CSS を適用する方法

投稿日:

この CookBook では CSS エディタでコンテナ内だけに CSS を適用する方法と、intra-mart Accel Platform 2020 Spring から利用可能になったプレビュー画面とアプリケーション画面において、デザイナ画面と区別して CSS を適用する方法を説明します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートファイル: cookbook_190646_im_bloommaker-data.zip
IM-BloomMaker のインポート画面からインポートしてください。
なお、インポート後には IM-BloomMaker ルーティング定義の認可設定が必要ですのでご注意ください。

レシピ

  1. デザイナのコンテナ内だけに CSS を適用する
  2. プレビューとアプリケーション画面にのみ CSS を指定する
  3. プレビューとアプリケーション画面と区別して デザイナ画面に CSS を指定する

はじめに

まず例として以下のリストがあり、ul 要素にスタイルを適用したい場合を考えます。

このように指定すれば ul 要素にスタイルが適用されるかと思います。
では、実際に CSS を適用してみましょう。

  1. CSS エディタを開いてください。
  2. 先ほどの CSS を設定してください。


3. 「決定」ボタンを押下し、スタイルを適用させます。

すると本来スタイルを適用させたいリスト以外にもスタイルが適用されてしまいました。

この事象を回避するためにデザイナのコンテナ内だけに CSS を適用する方法を以下で紹介します。

デザイナのコンテナ内だけに CSS を適用する

  1. CSS エディタを開いてください。
  2. 以下の CSS を設定してください。


3. 「決定」ボタンを押下し、スタイルを適用させます。

今度は、スタイルを適用させたいリストにのみスタイルを適用することができました。
im-hichee-container クラスを指定することで、デザイナのコンテナ内だけに CSS を適用することができます。

プレビューとアプリケーション画面にのみ CSS を指定する

デザイナ画面でスタイルを適用せず、プレビューとアプリケーション画面にのみ CSS を適用したいケースが出てくることがあるかと思います。
その場合は im-hichee-production-mode クラスを指定します。

  1. CSS エディタを開いてください。
  2. 以下の CSS を設定してください。


3. 「決定」ボタンを押下し、スタイルを適用させます。

デザイナ画面ではスタイルが適用されていませんが、プレビューとアプリケーション画面ではスタイルが適用されました。

デザイナ画面

プレビュー

アプリケーション画面

また、このように指定することでデザイナ画面のみ、プレビューとアプリケーション画面のみを指定することも可能です。

デザイナ画面

プレビュー

アプリケーション画面

まとめ

  • コンテナ全体にスタイルを適用
    • .im-hichee-container を使用
  • アプリケーション画面とプレビューにのみ適用
    • .im-hichee-production-mode を使用
  • デザイナ画面にのみ適用
    • .im-hichee-designer-mode を使用

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

IM-BloomMaker スプレッドシートの入力内容を DB に保存する

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になったスプレッドシートで、セルに入力した値を DB に保存する方法を紹介します。 …

no image

スレッドダンプの取り方

このCookBookでは、スレッドダンプの取り方について紹介しています。 以下に手順を説明しますが、スレッドダンプは必ず問題の事象が発生している時に取得してください。 例えば、動作が重い・非同期処理が …

SQLビルダを利用したクエリ作成例

この CookBook では、 intra-mart Accel Platform 2020 Spring から利用可能になった、ViewCreator の「SQLビルダ」機能を活用し、既存のクエリ編 …

no image

No.1 メールに添付されているExcelファイル読み込み → ワークフロー申請

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、メールサーバと連携し、メールの添付ファイルの内容から自動的にワークフローを申請できます。 …

no image

eBuilderの起動時処理のパフォーマンス改善

このCookBookでは、ローカル環境でe Builderの起動を速くするための設定を行います。 そのために、特定の機能を外して速く起動させる設定の方法について説明します。 ただし本設定を行うことによ …