IM-BloomMakerのエレメント
ここでは、IM-BloomMakerの基本的なエレメントについて説明します。表内のリンクをクリックすると、エレメント固有プロパティの設定が確認できます。
コンテンツ種別（imui・Bulma・imds）の部品または標準部品によってデザインの方向性が異なるため、利用可能なエレメントの種類も変わります。コンテンツ種別の部品は、それぞれの種別で専用のエレメントが用意されています。一方で、標準部品はintra-mart Accel Platformで汎用的に利用できるエレメントが揃っています。コンテンツ種別の違いについては、「画面コンテンツの作成 > コンテンツ種別について」を参照してください。
本マニュアルでは、「画面レイアウトとデザイン調整」ページ内で紹介したエレメントのみ記載しています。その他のエレメントについて確認したい場合は、「IM-BloomMaker ユーザ操作ガイド - 13.3. エレメント一覧」を参照してください。
レイアウト・構造部品
レイアウトやページ全体の構造を作成するための部品群です。レイアウトに必要なエレメントを配置し、基本的な枠組みを整えます。
基本レイアウト
ページ全体の構造や要素の配置を決めるエレメントです。
- ヘッダ／フッタ
- セクション
- ボックス
- コンテナ
- カラム
- タイル
- ヒーロー
ヘッダ／フッタ
ページの上部や下部に共通情報やナビゲーションを表示するためのレイアウト要素です。
名称 標準 imui Bulma imds カテゴリ 用途 ヘッダ ー ー ● ● レイアウト（Bulma）
レイアウト（imds）ページの上部に表示されるエレメントです。 フッタ ー ー ● ● レイアウト（Bulma）
レイアウト（imds）ページの下部に表示されるエレメントです。 コラムコンテンツ種別「imui」の場合はテーマが適用されるため、ページの上部や下部にヘッダやフッタが自動で表示されます。そのため、特別な設定やエレメント配置をしなくても、標準テーマのヘッダ・フッタが適用されます。
参考コンテンツ種別「Bulma」では、テーマが適用されないため、必要に応じて「サイドメニューコンテナ」エレメントに「ヘッダ」・「フッタ」エレメントを配置する必要があります。詳細は「CookBook - IM-BloomMaker サイドメニューの使い方」を参照してください。
セクション
画面やページの中で特定の区画（まとまり）を作るためのレイアウト要素です。
主な特徴と使用例：
- 区切り・グルーピング：複数の部品（入力欄・テキスト・画像など）を一つのセクションとしてまとめることができる
（例：ポータル画面でお知らせ・各種サービス・分析パネルをそれぞれセクションごとに区切る）- タイトルの設定：各セクションにタイトルやサブタイトルを設定し、「見出し」エレメントと組み合わせることで内容が把握しやすくなる
（例：スクロールが長くなる画面で、章・節・項目ごとに見出しを入れて区切る）- 入れ子構造に対応：セクション内に、さらに別のセクション・ボックス・カラム・タイルなどを配置し、複雑な階層構造を作ることができる
（例：フォーム画面を、申請者情報・明細・承認フローなどといった機能ごとにセクションでまとめる）
名称 標準 imui Bulma imds カテゴリ 用途 セクション ー ー ● ● レイアウト（Bulma）
レイアウト（imds）上下に余白を取り、セクションを表現するエレメントです。 コラムセクションエレメント自体にはフォーム部品やデータ表示機能がないため、画面上のまとまりを作るための枠として使用します。実際の内容は、その中に「ボックス」「カラム」「テキスト」「見出し」などの他エレメントを配置します。
ボックス
複数のエレメント（例：テキスト・ボタン・画像・フォーム部品など）をグループ化し、まとめて配置・装飾するためのレイアウト要素です。
主な特徴と使用例：
- グルーピング：関連する部品をグループ化することで、画面の視認性とレイアウトの統一感を向上させることができる
（例：ユーザ情報の入力欄全体をボックスで囲む）- レイアウト調整：ボックス内の要素は縦方向に整列し、入れ子構造にも対応しているため、柔軟にレイアウトを調整できる
（例：ラジオボタンやチェックボックスなどの部品をまとめて縦並びにする）- 装飾の設定：背景色や枠線、余白（マージン・パディング）をボックス単位で設定できる
（例：通知や警告などのメッセージを枠組みで表示する）
名称 標準 imui Bulma imds カテゴリ 用途 ボックス ● ー ● ● レイアウト
レイアウト（Bulma）
レイアウト（imds）配下をグループ化するエレメントです。Bulma／imdsでは、箱のように見せるために使用します。 ボックス（繰り返し） ● ー ー ー 繰り返し 「ボックス」エレメントを繰り返し配置するエレメントです。 レイアウト調整ボックス ー ● ー ー レイアウト（imui） 配下のエレメントの位置を調整するためのエレメントです。 オペレーションボックス ー ● ー ー レイアウト（imui） 配下のテキストボックスやボタンを囲むためのエレメントです。 ツールボックス ー ● ー ー レイアウト（imui） 配下のエレメントをひとまとめにするためのエレメントです。 補足ボックス ー ● ー ー レイアウト（imui） 画面の操作方法や注意事項を表示するためのエレメントです。 コラムコンテンツ種別「imui」の「ボックス」エレメントは、用途に応じて次のように使い分けることができます。
- レイアウト調整ボックス：エレメントの配置やレイアウト調整、部品のグループ化に使用します。
- オペレーションボックス：主要な操作ボタンのまとまりや、アクションを強調する用途に使用します。
- ツールボックス：補助的な操作やサブ機能、条件入力などに使用します。
コンテナ
複数のエレメントをまとめてグループ化し、レイアウトや構造を整理するためのレイアウト要素です。
主な特徴と使用例：
- レイアウトの枠組み： 画面全体を複数の領域（ヘッダ・メイン・サイドバー・フッタなど）に分割する
（例：画面中央に業務データやフォーム入力領域としてコンテナを配置する）- グルーピング・整列：複数の部品（例：テキスト・ボタン・入力欄など）をまとめて一つのグループとして管理・配置できる
（例：一括処理ボタンやエクスポート・インポートボタンだけを別の操作コンテナに配置する）- レイアウト調整：横並び・縦並び・入れ子構造など、レスポンシブにも対応した柔軟なレイアウトを実現できる
（例：「フレックスコンテナ」エレメントで画面サイズによって横並び・縦並びのレイアウトを自動で切り替える）- 装飾や役割の明示：見出しや枠線、背景などで視覚的に区切りをつけたり、サイドメニュー領域など、役割ごとに明示したりする
（例：「サイドメニューコンテナ」エレメントを使って、メニューリストやユーザ情報を表示する）
名称 標準 imui Bulma imds カテゴリ 用途 サイドメニューコンテナ ● ー ー ー レイアウト サイドメニューを表示するエレメントです。環境変数が有効でない場合、このエレメントは利用できません。 フレックスコンテナ ● ー ー ー レイアウト 横並びまたは縦並びでエレメントを配置するエレメントです。 インラインフレックス
（繰り返し）● ー ー ー 繰り返し 横並びにエレメントを繰り返し配置するエレメントです。 フォームコンテナ ー ● ー ー レイアウト（imui） 親エレメントの横幅から、指定した割合の枠線を表示するエレメントです。 コンテナ ー ー ● ● レイアウト（Bulma）
レイアウト（imds）横幅を指定するエレメントです。画面幅に合わせてサイズが指定できます。 水平コンテナ ー ー ● ● レイアウト（Bulma）
レイアウト（imds）水平方向の配置を指定するためのエレメントです。左右にエレメントを配置できます。 中央揃え水平コンテナ ー ー ● ● レイアウト（Bulma）
レイアウト（imds）水平方向の配置を指定するためのエレメントです。エレメントを均等に配置できます。 コラム「ボックス」エレメントと「コンテナ」エレメントは、どちらも複数のエレメントをまとめてグループ化できますが、用途に応じて次のように使い分けます。
- ボックス：単純なグループ化・区切りのみを行う場合に使用します。
- フレックスコンテナ：柔軟なレイアウトやレスポンシブ対応が必要な場合に使用します。
- サイドメニューコンテナ：サイドメニューやナビゲーション併設ページを作成する場合に使用します。
カラム
複数のエレメントを横方向または画面幅に応じて柔軟に並べ替え、整列させるためのレイアウト要素です。
主な特徴と使用例：
- 横並びの段組みレイアウト：見た目や数値を設定せずに直感的に複数列を構成でき、内容を左右均等や指定比率で分割できる
（例：入力フォームを2列または3列で整然と配置する）- レスポンシブ対応：画面幅が狭いデバイス（例：スマートフォン）では、自動的に縦並び（1カラム）に折り返す
（例：カード一覧・サービスメニュー・カラムグリッドなどのレイアウトに最適）- 幅の自動割り振りまたは比率指定：横並び部分の幅はプリセット（例：1:1, 2:1, 1:2, 3:1など）から選択でき、数値指定は不要
（例：左に説明文、右に図やボタンなどを3:1の比率で配置する）
名称 標準 imui Bulma imds カテゴリ 用途 カラム ー ー ● ● レイアウト（Bulma）
レイアウト（imds）横並びにエレメントを配置するエレメントです。 カラム（繰り返し） ー ー ● ● 繰り返し（Bulma）
繰り返し（imds）カラムエレメントを繰り返し配置するエレメントです。画面幅に応じて、縦並びにエレメントを配置します。 注意幅の指定は「カラム」エレメントであらかじめ用意されたパターンから選択する形式のため、自由なカスタム幅は設定できません。カラム間の余白や折り返しなど、細部の見た目を調整したい場合は、CSSエディタを活用してください。
コラム「カラム」エレメントと「タイル」エレメントは、どちらもレスポンシブに対応したレイアウトが可能ですが、用途に応じて次のように使い分けます。
- カラム：1行に複数の要素を段組みで整然と配置したい場合に使用します。
- タイル：複数行・複数列の項目をグリッドやカード状にきれいに並べたい場合に使用します。
タイル
複数のエレメントをレンガのようなブロック状に並べるためのレイアウト要素です。
主な特徴と使用例：
- タイル状（複数行・複数列）のレイアウト：同じサイズや異なる幅・高さのコンテンツを、美しく整列させて表示できる
（例：商品やサービスのタイル型サムネイル配置）- レスポンシブ対応：画面サイズに応じてタイルの数や配置が自動的に調整され、スマートフォンでは縦並び、PCでは複数列の横並び表示にできる
（例：社内ポータルやダッシュボードの「メニューアイコン一覧」や「インフォメーションボード」）- 入れ子構造：タイルの中にさらにタイルを配置し、階層的で柔軟なレイアウトを構築できる
（例：アプリや機能のランチャーメニュー（複数タイルの中にさらに機能アイコンを配置））
名称 標準 imui Bulma imds カテゴリ 用途 タイル ー ー ● ● レイアウト（Bulma）
レイアウト（imds）自由にグリッドレイアウトを構築するためのエレメントです。 コラム「カラム」エレメントと「タイル」エレメントは、どちらもレスポンシブに対応したレイアウトが可能ですが、用途に応じて次のように使い分けます。
- カラム：1行に複数の要素を段組みで整然と配置したい場合に使用します。
- タイル：複数行・複数列の項目をグリッドやカード状にきれいに並べたい場合に使用します。
ヒーロー
大型見出しやメインビジュアル領域を作成するためのレイアウト要素です。
主な特徴と使用例：
- 目立たせたい情報の強調：タイトル、キャッチコピー、重要な通知などを目立たせて表示できる
（例：サービス名やキャンペーン名といったファーストビューのページタイトルに使用する）- カスタマイズ可能なデザイン：背景色やサイズを変更できるため、アプリやWeb画面の雰囲気に合わせてアレンジしやすい
（例：横幅いっぱいに広げてページ全体の区切りとして使用する）- 柔軟なレイアウト対応：テキスト・画像・他のエレメントを内包でき、幅広いレイアウト構成が可能
（例：背景に画像を設定し、前景にテキストやアイコンを重ねる）
名称 標準 imui Bulma imds カテゴリ 用途 ヒーロー ー ー ● ● レイアウト（Bulma）
レイアウト（imds）全幅のバナーを表示するエレメントです。ファーストビューやナビゲーションメニューに利用できます。
テーブル表示
表形式で要素を整列させるためのエレメントです。
- テーブル（レイアウト）
- テーブル（データ表示）
テーブル（レイアウト）
画面上のエレメントを表形式（行と列）で整然と配置するためのレイアウト要素です。
主な特徴と使用例：
- 格子状のレイアウト：入力欄やラベルを縦横に揃えて整然と配置できる
（例：入力フォームで「見出し」と「入力欄」を上下・左右に揃える）- 複数行・複数列の構成：1行に複数の入力欄を並べて配置できる
（例：申請情報や各種設定値などを表形式で整理する）- グリッド構造：「横に見出し＋右隣に入力欄」といった構造を簡単に作成できる
（例：複数項目を整列させたグリッド状の帳票デザインを作成する）
名称 標準 imui Bulma imds カテゴリ 用途 テーブル（レイアウト） ● ー ー ー レイアウト 表形式でエレメントを配置するエレメントです。 テーブル（繰り返し） ● ー ー ー 繰り返し 表形式でエレメントを繰り返し配置するエレメントです。 テーブルコンテナ ー ー ● ● レイアウト（Bulma）
レイアウト（imds）表形式でエレメントを配置するエレメントです。 テーブルコンテナ
（繰り返し）ー ー ● ● 繰り返し（Bulma）
繰り返し（imds）テーブルコンテナエレメントを繰り返し配置するエレメントです。 注意「テーブル（レイアウト）」または「テーブルコンテナ」エレメントを多用すると、ブラウザが画面を描画する際の処理負荷が増え、パフォーマンス（レンダリング速度）に影響する可能性があります。そのため、表形式が必要な箇所でのみ使用することを推奨します。
階層構造やレイアウト制御を目的とする場合は、次の「コンテナ」エレメントを利用してください。
- テーブル（レイアウト）：フレックスコンテナを代替品として利用します。
- テーブル（繰り返し）：インラインフレックス（繰り返し）を代替品として利用します。
- テーブルコンテナ：カラムを代替品として利用します。
- テーブルコンテナ（繰り返し）：カラム（繰り返し）を代替品として利用します。
テーブル
画面上に表形式（行と列）でデータを表示・整列するためのレイアウト要素です。
主な特徴と使用例：
- データの一覧表示：データ（リスト・明細・レコードなど）を動的に一覧として表示する
（例：申請一覧や明細管理テーブルを表示する）- データの管理機能：データのソート・絞り込み・ページング・行選択などの管理機能に対応
（例：データのソートやページの切り替えに対応する）- データの繰り返し表示：データベースから取得したデータや配列データを繰り返し表示する
（例：マスタデータや取引履歴を表示・選択する）
名称 標準 imui Bulma imds カテゴリ 用途 横方向のテーブル ー ● ー ー レイアウト（imui） 見出しを左部に配置した横方向のテーブルエレメントです。 横方向のテーブル
（繰り返し）ー ● ー ー 繰り返し（imui） 「横方向のテーブル」エレメントを繰り返し配置するエレメントです。 縦方向のテーブル ー ● ー ー レイアウト（imui） 見出しを上部に配置した縦方向のテーブルエレメントです。 縦方向のテーブル
（繰り返し）ー ● ー ー 繰り返し（imui） 「縦方向のテーブル」エレメントを繰り返し配置するエレメントです。 見出し付きテーブル ー ● ー ー レイアウト（imui） 見出し付きのテーブル内部に入れ子テーブルを配置するエレメントです。 入れ子テーブル ー ● ー ー レイアウト（imui） テーブルの中に入れ子で配置するテーブルエレメントです。 入れ子テーブル
（繰り返し）ー ● ー ー 繰り返し（imui） 「入れ子テーブル」エレメントを繰り返し配置するエレメントです。 横方向汎用テーブル ー ● ー ー レイアウト（imui） 表のデザインを最小限にし、自由にエレメントを配置できる汎用性のある横方向のテーブルエレメントです。 横方向汎用テーブル
（繰り返し）ー ● ー ー 繰り返し（imui） 「横方向汎用テーブル」エレメントを繰り返し配置するエレメントです。 入力フォーム用テーブル ー ● ー ー レイアウト（imui） 入力フォーム部品を配置するためのテーブルエレメントです。 検索条件用テーブル ー ● ー ー レイアウト（imui） 検索条件を配置するためのテーブルエレメントです。 コラムコンテンツ種別によって、テーブルエレメントの用途が異なります。
- テーブル（レイアウト）（標準）／テーブルコンテナ（Bulma／imds）：部品を表形式で配置するために使用します。
- テーブル（imds）：データを動的に表示・操作するために使用します。
見出し
ページ内の構造を示し、内容を論理的に分類するためのエレメントです。
見出しレベル1～6
タイトルや各セクションの区切り、論理構造を示すために使用するレイアウト要素です。
名称 標準 imui Bulma imds カテゴリ 用途 見出しレベル1 ● ● ● ● レイアウト
レイアウト（imui）
レイアウト（Bulma）
レイアウト（imds）ページタイトルなど、最上位の見出しを表示するエレメントです。 見出しレベル1（小窓用） ー ● ー ー レイアウト（imui） 小さいウィンドウ用の見出しを表示するエレメントです。 見出しレベル2 ● ● ● ● レイアウト
レイアウト（imui）
レイアウト（Bulma）
レイアウト（imds）章やセクションなど、最上位から2番目の見出しを表示するエレメントです。 見出しレベル3 ● ● ● ● レイアウト
レイアウト（imui）
レイアウト（Bulma）
レイアウト（imds）項目内のサブセクションなど、最上位から3番目の見出しを表示するエレメントです。 見出しレベル4 ● ● ● ● レイアウト
レイアウト（imui）
レイアウト（Bulma）
レイアウト（imds）見出しレベル3の下位で、最上位から4番目の見出しを表示するエレメントです。内容を細かく整理するための小見出しです。 見出しレベル5 ● ● ● ● レイアウト
レイアウト（imui）
レイアウト（Bulma）
レイアウト（imds）見出しレベル4の下位で、最上位から5番目の見出しを表示するエレメントです。さらに細かい内容を区分けするための小見出しです。 見出しレベル6 ● ● ● ● レイアウト
レイアウト（imui）
レイアウト（Bulma）
レイアウト（imds）見出しレベル5の下位で、最上位から6番目の見出しを表示するエレメントです。最も細かい階層の小見出しとして使用します。 コラム画面の論理構造を意識し、たとえば「見出しレベル2」エレメントの下に「見出しレベル3」エレメントを階層的に並べることで、アクセシビリティや構造的な可読性を向上させることができます。
リスト表示
項目を縦方向に並べるためのエレメントです。
リスト
画面上にリスト形式で情報を表示するためのレイアウト要素です。
名称 標準 imui Bulma imds カテゴリ 用途 リスト（レイアウト） ● ー ー ー レイアウト 順序のないリスト形式でエレメントを配置するエレメントです。 リスト（繰り返し） ● ー ー ー 繰り返し 「リスト（レイアウト）」エレメントを繰り返し配置するエレメントです。 連番付きリスト
（レイアウト）● ー ー ー レイアウト 順序のあるリスト形式でエレメントを配置するエレメントです。 連番付きリスト
（繰り返し）● ー ー ー 繰り返し 「連番付きリスト（レイアウト）」エレメントを繰り返し配置するエレメントです。 アイコン付きリスト ー ● ー ー レイアウト（imui） 処理リンクや処理ボタンを横並びで配置するためのエレメントです。 バレットリスト ー ● ー ー レイアウト（imui） リスト形式でテキストコンテンツを表示するエレメントです。 バレットリスト
（繰り返し）ー ● ー ー 繰り返し（imui） 「バレットリスト」エレメントを繰り返し配置するエレメントです。 アイコン付きリンクリスト ー ● ー ー レイアウト（imui） アイコン付きのリスト形式でテキストコンテンツを表示するエレメントです。 アイコン付きリンクリスト（繰り返し） ー ● ー ー 繰り返し（imui） 「アイコン付きリンクリスト」エレメントを繰り返し配置するエレメントです。 コラムコンテンツ種別「Bulma」/「imds」の場合は、基本レイアウトのエレメントを配置し、データの繰り返し設定や変数・データソースの活用、CSSカスタマイズを組み合わせてリストを作成してください。
テキスト構成
文章や内容の記述に使用するエレメントです。
段落
テキストや説明文など、文章のまとまりを表現するためのレイアウト要素です。
名称 標準 imui Bulma imds カテゴリ 用途 段落 ● ー ー ー レイアウト 通常の文章ブロックです。1つの話題や説明を構成します。 コンテンツ ー ー ● ● レイアウト（Bulma）
レイアウト（imds）段落・見出し・リストなど、配下に配置されたエレメントのテキストサイズを指定できるエレメントです。 コラム
- 「段落」エレメントは、テキスト主体の情報を表示するためのエレメントです。他のエレメントや複雑なレイアウトと組み合わせる場合は、「ボックス」や「フレックスコンテナ」エレメントを使用してください。
- 「コンテンツ」エレメントは、複数の要素（見出し・説明文・リスト・注釈など）を1つのパネル内に集約できます。
ナビゲーション・補助
情報の誘導や補足説明など、装飾するためのエレメントです。
- ページ移動・階層表示
- メニュー・タブ操作
- ナビゲーションバー
- アコーディオン
ページ移動・階層表示
ページやコンテンツの位置を示したり、階層的に移動するためのナビゲーション要素です。
名称 標準 imui Bulma imds カテゴリ 用途 ハイパーリンク ● ー ー ー 汎用 ページ遷移をするためのエレメントです。 パンくずリスト ー ● ー ー レイアウト（imui） Webページのリンクを階層順にリストアップするためのエレメントです。 パンくずリストコンテナ ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）Webページのリンクを階層順にリストアップするためのエレメントです。 ページネーション ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）ページ送りのナビゲーションを表示するエレメントです。 メニュー・タブ操作
ユーザが選択・切り替えなどの操作を行うためのナビゲーション要素です。
名称 標準 imui Bulma imds カテゴリ 用途 メニュー ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）垂直型のナビゲーションを構築するエレメントです。 タブ ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）タブを表示するエレメントです。 ステッパー ー ー ー ● コンポーネント（imds） ユーザが複数のステップで行うべき作業を、順番に実行するためのエレメントです。 ナビゲーションバー
ヘッダやフッタに設置して全体の操作をまとめるためのナビゲーション要素です。
名称 標準 imui Bulma imds カテゴリ 用途 ナビゲーションバー ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）ナビゲーションバーを表示するエレメントです。 ナビゲーションバー
リンクアイテムー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）「ナビゲーションバー」、「ナビゲーションバードロップダウンアイテム」に配置する、ページ遷移をするためのエレメントです。 ナビゲーションバー
エレメント配置アイテムー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）「ナビゲーションバー」、「ナビゲーションバードロップダウンアイテム」に配置する、配下にエレメントを配置するためのエレメントです。 ナビゲーションバー
ドロップダウンアイテムー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）「ナビゲーションバー」に配置する、ドロップダウンメニューのエレメントです。 ナビゲーションバー
水平罫線ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）「ナビゲーションバードロップダウンアイテム」に配置する、水平の罫線を表示するエレメントです。
フォーム・入力部品
ユーザが情報を入力・選択するための部品群です。フォームや入力部品を配置し、データの取得や操作を行う画面を構成します。
入力フィールド
ユーザから文字列や数値、選択情報などを受け取るためのエレメントです。
- テキスト入力
- パスワード入力
- 数値入力
- 日付・時刻入力
- メールアドレス入力
- 電話番号入力
テキスト入力
ユーザが文字情報を入力するためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 テキスト入力 ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）一行テキストボックスを表示するエレメントです。 テキストエリア ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）複数行テキストボックスを表示するエレメントです。 リッチテキストボックス ● ー ー ー フォーム部品 書式設定、画像、テーブル、およびその他のリッチコンテンツを編集可能なテキストボックスを表示するエレメントです。 パスワード入力
ユーザがパスワードを入力するためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 パスワード入力 ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）パスワードボックスを表示するエレメントです。 数値入力
ユーザが数値を入力するためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 数値入力 ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）数値ボックスを表示するエレメントです。 数値入力
（フォーマット）● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）数値ボックスを表示するエレメントです。3桁区切りや0埋めのフォーマットを利用できます。 日付・時刻入力
ユーザが日付または時刻を入力するためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 日付入力 ● ー ー ー フォーム部品 日付入力ボックスを表示するエレメントです。 日付入力 ー ● ー ー フォーム部品（imui） 日付選択をするためのカレンダーエレメントです。 日付入力 ー ー ● ● フォーム部品（Bulma）
フォーム部品（imds）日付入力フォームを表示するエレメントです。 日付入力
（カレンダー）ー ー ● ● フォーム部品（Bulma）
フォーム部品（imds）日付選択をするためのカレンダーエレメントです。 時刻入力 ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）時刻入力ボックスまたは入力フォームを表示するエレメントです。
選択フィールド
選択肢の中からユーザに選択してもらうためのエレメントです。
- ボタン
- ボックス
- スイッチ
- プルダウン
- ドロップダウン
ボタン
複数の選択肢の中から、1つだけを選択できるフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 ラジオボタン ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）複数の選択肢から一つを選ぶためのラジオボタンを表示するエレメントです。 ボックス
複数の選択肢の中から、1つまたは複数を選択できるフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 チェックボックス ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）複数の選択肢またはON/OFFを選ぶためのチェックボックスを表示するエレメントです。 スイッチ
オン・オフなど、2つの状態を切り替えることができるフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 トグルスイッチ ● ー ー ● フォーム部品
フォーム部品（imds）オン・オフを視覚的に切り替えるトグルスイッチを表示するエレメントです。 プルダウン
メニュー項目を表示するためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 プルダウン ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）単一選択のメニュー項目を表示するエレメントです。 複数選択 ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）複数選択可能なメニュー項目を表示するエレメントです。 コンボボックス ● ー ー ー フォーム部品 メニュー項目から選択可能なテキストボックスを表示するエレメントです。 ドロップダウン
選択肢のリストを折りたたんだ状態で表示し、必要に応じて展開して1つを選択するフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 ドロップダウン ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）ドロップダウンメニューのエレメントです。 ドロップダウンリンクアイテム ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）ドロップダウンメニューに配置する、ページ遷移をするためのエレメントです。 ドロップダウンエレメント配置アイテム ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）ドロップダウンメニューに配置する、配下にエレメントを配置するためのエレメントです。 ドロップダウン水平罫線アイテム ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）ドロップダウンメニューに配置する、水平の罫線を表示するエレメントです。
ファイルアップロード
ファイルのアップロードに関するエレメントです。
ボタン
ユーザがローカル環境からファイルを選択し、アプリケーションやWeb画面に送信するためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 ファイル選択 ● ー ー ー フォーム部品 ファイル選択ボックスを表示するエレメントです。 ファイルアップロード ● ー ー ー フォーム部品 ファイルをサーバにアップロードして保持し、後からダウンロード可能な機能を提供するエレメントです。 マルチファイルアップロード ● ー ー ー フォーム部品 複数ファイルをサーバにアップロードして保持し、後からダウンロード可能な機能を提供するエレメントです。
アクションボタン
ユーザ操作に反応するトリガーとなるエレメントです。
ボタン
ユーザの操作を実行するための各種ボタンや操作部品を提供するフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 ボタン ● ー ● ● フォーム部品
フォーム部品（Bulma）
フォーム部品（imds）汎用的なボタンを表示するエレメントです。 ボタン ー ● ー ー フォーム部品（imui） テーマによるスタイルの指定が可能なボタンエレメントです。 送信ボタン ● ー ー ー フォーム部品 フォームのデータを送信するボタンエレメントです。 削除ボタン ー ー ● ● フォーム部品（Bulma）
フォーム部品（imds）削除ボタンを表示するエレメントです。 アイコン付きボタン ー ● ー ー フォーム部品（imui） アイコン＋ラベルの組み合わせで視認性を高めたボタンエレメントです。 オペレーションパーツ ー ● ー ー フォーム部品（imui） ボタンを横並びで中央に表示するためのエレメントです。
汎用表示・制御部品
視覚的な装飾や補足表示、アクセントなどの用途で使われる部品群です。
- テキスト表示
- メッセージ
- アイコン
- タグ
- 進捗表示
- 罫線
テキスト表示
画面上にテキストやラベルを表示するための要素です。
名称 標準 imui Bulma imds カテゴリ 用途 マークダウン ● ー ー ー 汎用 マークダウン形式で入力した内容を表示するエレメントです。 ラベル ● ー ー ー 汎用 テキストラベルを表示するエレメントです。 強調ラベル ● ー ー ー 汎用 強調テキストラベルを表示するエレメントです。 テキスト表示 ー ー ● ● フォーム部品（Bulma）
フォーム部品（imds）読み取り専用のテキストボックスを一行で表示するエレメントです。 メッセージ
画面上に通知やメッセージなどの情報を表示するための要素です。
名称 標準 imui Bulma imds カテゴリ 用途 通知ボックス ー ー ● ● パーツ（Bulma）
パーツ（imds）通知用のボックスを表示するエレメントです。 メッセージ ー ー ● ● コンポーネント（Bulma）
コンポーネント（imds）メッセージボックスを表示するエレメントです。 入力規則エラーメッセージ ● ー ー ー 汎用 変数の入力規則エラーが発生した時にエラーメッセージを表示するエレメントです。 アイコン
画面上にアイコンを表示するための要素です。
名称 標準 imui Bulma imds カテゴリ 用途 アイコン ー ● ー ー パーツ（imui） アイコンを表示するエレメントです。CSS Sprite Image Listのクラスを指定します。 アイコン ー ー ● ● パーツ（Bulma）
パーツ（imds）アイコンを表示するエレメントです。Font Awesome 6のアイコンを指定します。 参考
- コンテンツ種別「imui」のアイコンは、「CSS Sprite Image List」を参照してください。
- コンテンツ種別「Bulma」／「imds」のアイコンは、「Font Awesome」を参照してください。
タグ
画面上にタグを表示するための要素です。画面や処理などのメタ情報、ステータスを端的かつ視覚的に表します。
名称 標準 imui Bulma imds カテゴリ 用途 タグ ー ー ● ● パーツ（Bulma）
パーツ（imds）タグを表示するエレメントです。
コンポーネント・組み合わせ部品
ユーザが操作や表示を行うための部品群です。複数のエレメントを組み合わせて、ボタンやナビゲーション、装飾付きの操作パネルなどの画面コンポーネントを構成します。
- フォーム
- フィールド
- リッチテーブル
- カード
- メディアオブジェクト
- 空状態コンテナ
フォーム
ユーザが情報を入力・送信したり、入力内容や操作履歴を管理・表示するためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 フォーム ● ー ー ー フォーム部品 入力・送信フォームを作成するためのエレメントです。 フォームコンテナ ー ● ー ー フォーム部品（imui） 親エレメントの横幅から、指定した割合の枠線を表示するエレメントです。 フォームコンテナ ー ー ー ● フォーム部品（imds） 「フィールドグループ」を適切な間隔で配置するためのエレメントです。 リッチフォームコンテナ ー ー ー ● フォーム部品（imds） 見出しの付いた複数項目のフォームを作成できます。 履歴・コメント ● ー ー ー フォーム部品 コメントや操作履歴などを表示・記録するエレメントです。 フィールド
入力項目やフォーム部品を整理・配置し、複数項目のグループ化や水平配置などのレイアウトを行うためのフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 フィールド ー ー ● ー フォーム部品（Bulma） 入力・送信フォームを作成するためのエレメントです。項目同士の配置を指定できるエレメントです。 水平フィールド ー ー ● ー フォーム部品（Bulma） 入力・送信フォームを作成するためのエレメントです。項目を水平方向に配置できるエレメントです。 フィールドグループ ー ー ー ● フォーム部品（imds） 複数の「フィールド」エレメントをグループ化して配置するためのエレメントです。項目同士の配置を指定できるエレメントです。 インプットグループ ー ー ー ● フォーム部品（imds） 配下のエレメントをグループ化して表示するエレメントです。「フィールド」エレメントの配下に配置します。 エレメント配置アイテム ー ー ● ● フォーム部品（Bulma）
フォーム部品（imds）フィールドに配置する、配下にエレメントを配置するためのエレメントです。 フィールドエレメント配置アイテム（繰り返し） ー ー ● ● 繰り返し（Bulma）
繰り返し（imds）フィールドに配置できるエレメントを繰り返し配置するエレメントです。 リッチテーブル
テーブルに複数の機能が追加されたフォーム要素です。
名称 標準 imui Bulma imds カテゴリ 用途 リッチテーブル ● ー ー ー フォーム部品 ソート・ページング・簡易検索・データ編集機能を持つテーブルエレメントです。 カード
カード型の構成でエレメントを配置できるコンポーネント要素です。
名称 標準 imui Bulma imds カテゴリ 用途 カード ー ー ● ● フォーム部品（Bulma）
フォーム部品（imds）ヘッダ・フッタ、画像、段落を構成するエレメントです。
共通マスタ連携部品
intra-martのマスタデータ（ユーザ・組織・会社）を検索・選択するための部品群です。
- ユーザ検索
- 会社検索
- 組織検索
ユーザ検索
共通マスタに登録されたユーザ情報を検索・選択するための要素です。
名称 標準 imui Bulma imds カテゴリ 用途 単一選択ユーザ検索 ● ー ー ー 共通マスタ 共通マスタに登録されている一人のユーザを検索するエレメントです。 複数選択ユーザ検索 ● ー ー ー 共通マスタ 共通マスタに登録されている複数のユーザを検索するエレメントです。 所属組織による単一選択ユーザ検索 ● ー ー ー 共通マスタ 共通マスタに登録されている一人のユーザを所属組織から検索するエレメントです。 所属組織による複数選択ユーザ検索 ● ー ー ー 共通マスタ 共通マスタに登録されている複数のユーザを所属組織から検索するエレメントです。
メディア表示・埋め込み部品
画像・動画・音声といったメディアや外部リソースを埋め込むための部品群です。
ユーティリティ
画面の動作制御や非表示データ送信など、アプリケーションの実行に関わる機能を提供する部品群です。
| 名称 | 標準 | imui | Bulma | imds | カテゴリ | 用途 |
|---|---|---|---|---|---|---|
| タイマー | ● | ー | ー | ー | その他 | アクションを任意のタイミングで実行するエレメントです。 |
| 排他制御 | ● | ー | ー | ー | その他 | 画面の排他制御を可能にするエレメントです。同ページを閲覧しているユーザ一覧を表示できます。 |
| 隠しパラメータ | ● | ー | ー | ー | フォーム部品 | アプリケーションの実行時に表示されない非表示データを送信するエレメントです。 |