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

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

関連記事

no image

フォーム内の入力値を案件名に自動入力する方法

このCookbookでは、IM-FormaDesignerで作成した申請画面から入力内容を案件名に設定する方法を紹介します。 この方法を利用するとIM-FormaDesignerの入力内容をIM-Wo …

no image

IMBox の「Like!」を別のキャプションにする方法

この Cookbook では、IMBox の「Like!」を別のキャプションにする方法を紹介します。 具体的には、「Like!」を「確認」に変更する方法を紹介します。 この Cookbook では、日 …

no image

IM-BloomMaker スプレッドシート 特定のセルを編集できないようにするには?

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になった「スプレッドシート」エレメントで、特定のセルを編集できないようにする方法を …

no image

IMBox に投稿種別を追加する方法(iframe)

この CookBook では、IMBox に投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミ …

FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法をご紹介します。 サンプルでは、スプレッドシート・グリッドテーブル・明細テーブルを使用し …