必須入力記号「label.imui-required」

入力フォームにおいて、必須入力の記号を表示します。

    文字リンク（標準色）「a.imui-accent」

    intra-mart Accel Platform標準の文字リンクと同じ見た目にします。

    文字リンク
    • aタグに.imui-accentを指定すると、標準の文字リンクと同じ見た目にします。CSSの継承で黒字になってしまう場合等に利用します。

    文字リンク（標準色下線付き）「a.imui-accent-underline」

    intra-mart Accel Platform標準の文字リンクを下線付きで表示します。

    文字リンク（下線付き）
    • aタグに.imui-accent-underlineを指定すると、標準の文字リンクを下線付きで表示します。アンカーを下線付きで表示したい場合に利用します。

    文字リンク（黒文字）「a.imui-unaccented」

    黒文字の文字リンクです。

    文字リンク
    • aタグに.imui-unaccentedを指定すると、黒字の文字リンクにします。

    疑似フォーム部品選択状態「.imui-selection-effect」

    テキストボックスやテキストエリアが選択された時と同じ見た目にします。

    imui-selection-effectを指定したDIV
    imui-selection-effectを指定

    imui-selection-effectを指定していないDIV
    指定なし

    テキストエリア

      疑似ラベル「.imui-text-readonly」

      テキストボックスやテキストエリアをラベルに見えるよう枠線や背景色を消して状態に見せます。

      テキストボックスに.imui-text-readonlyを指定

      テキストエリアに.imui-text-readonlyを指定

      • readonly、disabledを指定しているので、選択時の効果は表示されません。

      テーマカラー線色「.imui-theme-border-color」

      テーマカラーの彩度を落として見やすくしたボーダーを提供します。

      .imui-theme-border-colorと別途作成した.border1を指定したDIV

      .imui-theme-border-colorと別途作成した.border2を指定したDIV
      • border-colorのみの提供です。border-style*、border-width*は別途スタイルシートを用意してください。
      • 上記のサンプルは、intra-mart Accel Platform 標準テーマ (青)を指定した場合の色です。

      テーマカラー背景色「.imui-theme-background-color」

      テーマカラーを見やすい色にした背景色それに合わせた文字色を提供します。

      .imui-theme-background-colorを指定したDIV
      • background-colorとcolorの提供です。widthやheight等は、必要に応じてスタイルシートを用意してください。
      • 文字色は、黒または白となります。テーマカラーと文字色のコントラストにより決定します。
      • 上記のサンプルは、intra-mart Accel Platform 標準テーマ (青)を指定した場合の色です。

      テーマカラー「.imui-theme-color」

      テーマカラーの背景色とそれに合わせた文字色を提供します。

      .imui-theme-colorを指定したDIV
      • background-colorとcolorの提供です。widthやheight等は、必要に応じてスタイルシートを用意してください。
      • 文字色は、黒または白となります。テーマカラーと文字色のコントラストにより決定します。
      • 上記のサンプルは、intra-mart Accel Platform 標準テーマ (青)を指定した場合の色です。

      【比較】テーマカラー背景色とテーマカラー

      テーマカラー背景色「.imui-theme-background-color」、テーマカラー「.imui-theme-color」を指定した場合に、intra-mart Accel Platformが提供するテーマカラー別にまとめました。

      テーマ名
      テーマカラー背景色
      「.imui-theme-background-color」
      テーマカラー
      「.imui-theme-color」
      intra-mart Accel Platform 標準テーマ (青)
      intra-mart Accel Platform 標準テーマ (緑)
      intra-mart Accel Platform 標準テーマ (黄色)
      intra-mart Accel Platform 標準テーマ (ピンク)
      intra-mart Accel Platform 標準テーマ (赤)
      intra-mart Accel Platform 標準テーマ (オレンジ)
      intra-mart Accel Platform 標準テーマ (レッドオレンジ)
      intra-mart Accel Platform 標準テーマ (紫)
      intra-mart Accel Platform 標準テーマ (アイビーグリーン)
      intra-mart Accel Platform 標準テーマ (イエローグリーン)
      intra-mart Accel Platform 標準テーマ (オーキッドピンク)
      intra-mart Accel Platform 標準テーマ (セラドングリーン)
      intra-mart Accel Platform 標準テーマ (ミディアムパープル)
      intra-mart Accel Platform 標準テーマ (ヒアシンスブルー)
      intra-mart Accel Platform 標準テーマ (ローズグレー)
      intra-mart Accel Platform 標準テーマ (コッパーラスト)
      intra-mart Accel Platform 標準テーマ (灰色)
      intra-mart Accel Platform 標準テーマ (ネイビーブルー)
      intra-mart Accel Platform 標準テーマ (黒)
      intra-mart Accel Platform 標準テーマ (ココアブラウン)
      intra-mart Accel Platform 標準テーマ (サーモンピンク)
      intra-mart Accel Platform 標準テーマ (ヨットブルー)
      intra-mart Accel Platform 標準テーマ (ラベンダーグレー)
      intra-mart Accel Platform 標準テーマ (茶色)
      iWP/iAF Version6 互換テーマ (青)
      iWP/iAF Version6 互換テーマ (緑)
      iWP/iAF Version6 互換テーマ (オレンジ)
      iWP/iAF Version6 互換テーマ (赤)
      iWP/iAF Version5 互換テーマ (青)
      iWP/iAF Version5 互換テーマ (緑)
      iWP/iAF Version5 互換テーマ (オレンジ)
      iWP/iAF Version5 互換テーマ (赤)
      • background-colorとcolorの提供です。widthやheight等は、必要に応じてスタイルシートを用意してください。
      • 文字色は、黒または白となります。テーマカラーと文字色のコントラストにより決定します。

      入力済アイテム

      入力した内容に枠線と背景色をつけます。2サイズ、9色提供します。アイコンと組み合わせることも可能です。
      9色のうち、4色はユーザ、会社・組織、パブリックグループ、プライベートグループを表します。カラーバリエーションを参照してください。

      基本構成

      • .aqua は、色名です。その他利用できる色は、カラーバリエーションを参照してください。
      • .small を追加すると、サイズが小さくなります。
      表示ラベル（通常サイズ） 表示ラベル(小サイズ)

        応用

        アイコン、閉じるアイコンとの組み合わせる場合

        • .item-icon は、アイコンと組み合わせて使用します。
        • <a class="item-remove" href="#">×</a>は、閉じるアイコンを表示します。
        表示ラベル（通常サイズ） × 表示ラベル（通常サイズ） × 表示ラベル（通常サイズ）
        表示ラベル(小サイズ)× 表示ラベル(小サイズ) × 表示ラベル(小サイズ)

          カラーバリエーション

          • デザイン例は、通常サイズでアイコンと閉じるアイコンを指定しています。アイコンの有無やサイズは、要件に応じて指定してください。
          • タグアイコンを各カラーと組み合わせて使用できます。
          色名 クラス名 役割 デザイン例 補足
          グレー .gray 会社・組織、タグ 会社・組織×
          グレータグ×           		デザイン例のアイコンは、次のとおり指定します。
          • 会社・組織を表すアイコンは、
            .im-ui-icon-common-16-department
          • グレータグを表すアイコンは、
            .im-ui-icon-common-16-tag-gray
          ブルー .blue ユーザ、タグ ユーザ×
          ブルータグ×           		デザイン例のアイコンは、次のとおり指定します。
          • ユーザを表すアイコンは、
            .im-ui-icon-common-16-user
          • ブルータグを表すアイコンは、
            .im-ui-icon-common-16-tag-blue
          レッドオレンジ .red-orange パブリックグループ、タグ パブリックグループ×
          レッドオレンジタグ×           		デザイン例のアイコンは、次のとおり指定します。
          • パブリックグループを表すアイコンは、
            .im-ui-icon-common-16-public-group
          • レッドオレンジタグを表すアイコンは、
            .im-ui-icon-common-16-tag-red-orange
          ブルーグリーン .blue-green プライベートグループ、タグ プライベートグループ×
          ブルーグリーンタグ×           		デザイン例のアイコンは、次のとおり指定します。
          • プライベートグループを表すアイコンは、
            .im-ui-icon-common-16-private-group
          • ブルーグリーンタグを表すアイコンは、
            .im-ui-icon-common-16-tag-blue-green
          アクア .aqua タグ、他 アクアタグ× デザイン例のアイコンは、次のとおり指定します。
          • アクアタグを表すアイコンは、
            .im-ui-icon-common-16-tag-aqua
          レッド .red タグ、他 レッドタグ× デザイン例のアイコンは、次のとおり指定します。
          • レッドタグを表すアイコンは、
            .im-ui-icon-common-16-tag-red
          オレンジ .orange タグ、他 オレンジタグ× デザイン例のアイコンは、次のとおり指定します。
          • オレンジタグを表すアイコンは、
            .im-ui-icon-common-16-tag-orange
          パープル .purple タグ、他 パープルタグ× デザイン例のアイコンは、次のとおり指定します。
          • パープルタグを表すアイコンは、
            .im-ui-icon-common-16-tag-purple
          グリーン .green タグ、他 グリーンタグ× デザイン例のアイコンは、次のとおり指定します。
          • グリーンタグを表すアイコンは、
            .im-ui-icon-common-16-tag-green