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では、ページ遷移後にグローバルナビを非表示にする方法について説明していきます。 特別な理由でページ遷移後にグローバルナビを非表示にしたい場合に利用してください。 また、iframe …

no image

IM-Workflowの一覧を業務別に使い分けるには

この記事では、”もっと効率的に” IM-Workflowを利用した業務ができるように、一覧画面に表示するフローや案件を絞り込んで表示するための手順をご紹介します。 「フローグループ」機能を利用し、一覧 …

no image

intra-martを初めて使う開発者が、まずは e Builder で「Hello world!」する方法

e Builder は、intra-mart Accel Platform で動作するアプリケーションを開発するための開発支援ツールです。 このレッスンでは、intra-martを初めて使う開発者が …

no image

WebServer へのリクエスト情報から動的に BaseURL を決定する方法(IIS 編)

ここでは、WebServer(IIS)へのリクエスト情報から BaseURL を動的に決定する方法を BaseUrlProvider のサンプル実装、IIS との連携例と共に紹介します。 製品標準の設 …

no image

スクリプト開発で登録フォームを作成する

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。 第1回:スクリプト開発で登録フォームを作成する 第2回:フォームに入力した内容をデータベースに登録 …