intra-mart Accel Platform UIデザインガイドライン(PC版) 第6版 2022-12-01

6.7. HTML / CSSコーディング Tips

本章では、HTML/CSS コーディングの Tips を記載します。

6.7.1. ブロック要素を横に並べたい、div を横に並べたい

6.7.1.1. 対処方法

親要素に clearfix のクラス、子要素に float 用のクラスを指定してください。

6.7.1.2. 実装例

親要素に clearfix のクラス、子要素に float 用のクラスを指定

6.7.1.2.1. HTML

1
2
3
4
5
6
7
<div class="imui-box-operation cf (1)">
  <div class="float-L (2)pl-10 (3)">
    <imart type="imuiTextbox"/>
    <imart type="imuiButton" value="検索"/>
    <imart type="imuiButton" value="クリア"/>
  </div>
</div>
(1) cf clearfix クラス 各ブラウザでブロック要素の回り込みを解除
(2) float-L float 用クラス float:left が入ります。右に配置する場合は、float-R クラスを指定
(3) pl-10 assist クラス padding-left:10px が入る

6.7.2. 文字リンクを青字/黒字にしたい

6.7.2.1. 仕様

  • 以下は、青字(マウスオーバー時、淡青字+下線)になります。
    • a タグ class 指定なし

    • 以下のテーブル
      • imui-table-box
      • imui-table table
      • imui-table-calendar
      • imui-table-sort
      • imui-table-mixed
      • imui-table-inner
      • imui-form
      • imui-form-search-condition
    • 以下のテーブルの td
      • imui-table-sort
  • 以下は、黒字(マウスオーバー時、濃灰色字+下線)になります。
    • ツールバーの文字リンク

6.7.2.2. 対処方法

  • 黒字の文字リンクをあえて青字にしたい場合、<a class=”imui-accent”> を指定してください。
  • 青字の文字リンクをあえて黒字にしたい場合、<a class=”imui-unaccented”> を指定してください

6.7.2.3. 実装例

6.7.2.3.1. HTML

1
2
3
 <a class="imui-accent">強制青字</a>

 <a class="imui-unaccent">強制黒字</a>

6.7.3. オペレーションボックスにタイトルバー/ツールバーを配置したい

6.7.3.1. 対処方法

CSS Module List のツールボックス「.imui-box-toolbox」 を用意しています。
以下に実装例を示します。詳細は、CSS Module List のツールボックス「.imui-box-toolbox」 を参照してください。

6.7.3.2. 実装例

ツールボックスイメージ

6.7.3.2.1. 構造

HTML を簡単に表すと以下のようになります。
1
2
3
4
5
 <div>ツールボックス</div>
   <div>タイトルバー</div>
   <div>ツールバー</div>
   <div>コンテンツ</div>
 </div>

6.7.3.2.2. HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div class="imui-box-toolbox (1) mt-20">
  <div class="imui-box-title (2) imui-box-toolbox-look (3)">
    <h3>これは、H3</h3>
  </div>
  <div class="imui-toolbar-wrap">
    <div class="imui-box-toolbar-inner">
      <ul class="imui-list-box-toolbar">
        (中略)
      </ul>
    </div>
  </div>
  <div class="imui-box-toolbox-content">
    <!-- 簡単検索 -->
    <imart type="imuiTextbox" class="wd-225px" placeholder="ユーザ氏名、ユーザカナを入力してください。" autofocus></imart>
    <imart type="imuiButton" value="検索" class="imui-button"></imart>
    <imart type="imuiButton" value="クリア" class="imui-button"></imart>
  </div>
</div>

6.7.3.2.3. 追加したスタイル

  1. ツールボックス(imui-box-operation と同じ枠線)

    imui-box-toolbox

  2. タイトルバー(h2, h3は同じ見た目。imui-chapter-title.h2 使用時は、imui-box-title.h3 を使用)

    imui-box-title, imui-box-title.h2, imui-box-title.h3

  3. タイトルバー/ツールバー上部角丸効果((1)にフィットさせる)

    imui-box-toolbox-look

  4. コンテンツ

    imui-box-toolbox-content

  5. ツールバー

    imui-toolbar-wrap, imui-box-toolbar-inner, imui-list-box-toolbar

6.7.4. imuiDialog にツールバーを配置したい

imuiDialog に属性を用意しています。
以下に実装例を示します。詳細は、imuiDialog を参照してください。

6.7.4.1. 対処方法

imuiDialog の toolbarLeft 属性、toolbarRight 属性をご利用ください。 詳細は、APIリスト imuiDialog をご確認ください。

6.7.5. テーマカラーを border 、背景色とし使用したい

テーマカラーを border 、背景色を指定する場合、色情報のみ CSS Module として提供しています。

以下の CSS をご利用ください。

テーマカラーを指定するプロパティ 指定するクラス名
border の色指定 imui-theme-border-color

同じ情報を CSS Module List のテーマカラー線色「.imui-theme-border-color」 にて公開しています。

6.7.5.1. 対処方法

同じ HTML 要素に以下を指定します。

  • class=”imui-theme-border-color”
  • 線の位置と線の太さを指定します。( class 属性、 style 属性どちらで指定も可)

6.7.5.2. 実装例

6.7.5.2.1. left-border に 100px の実線を引く場合

left-border_cdd
6.7.5.2.1.1. CSS

width と style を必ず入れてください。

1
2
3
4
5
6
.new_class {
  border-left-width: 100px;
  border-left-style: solid;

  ...
}
6.7.5.2.1.2. HTML
1
<div class="new_class imui-theme-border-color">左側に 100px の実線が表示されます。色は薄いテーマカラーです。</div>

コラム

色を変更することはできません。

6.7.5.2.2. left-border に 2px の実線を引く場合

6.7.5.2.2.1. CSS

width と style を必ず入れてください。

1
2
3
4
5
6
.new_class {
  border-left-width: 2px;
  border-left-style: solid;

  ...
}
6.7.5.2.2.2. HTML
1
<div class="new_class imui-theme-border-color">左側に 2px の実線が表示されます。色は薄いテーマカラーです。</div>

コラム

色を変更することはできません。

6.7.6. 画面に「ページの説明文」を配置したい

6.7.6.1. 対処方法

画面の操作内容や、凡例などを画面上に表示したい場合、「ページの説明文」を配置します。
以下にアイコンと組み合わせた実装例を1つ示します。
その他は、別ドキュメントの CSS Module List の補足ボックス「.imui-box-supplementation」 を参照してください。

6.7.6.2. 実装例

imui-box-supplementation

6.7.6.2.1. HTML

1
2
3
4
<div class="imui-box-supplementation">
    <span class="im-ui-icon-common-24-information float-L"></span>
    <p class="imui-pgh-section" style="padding-left:30px;">アイコンを組み合わせることも可能です。<br>アイコンは任意の画像を指定します。</p>
</div>

6.7.6.3. 補足

表示アイコン 意味
information 入力フォームの上部に情報を表示するインフォメーション
  • 配置について
    セクションを全体説明する場合はセクション表題( h3 など)の下に説明文を記載します。

    PageMessage