6.7. HTML ／ CSSコーディング Tips¶
本章では、HTML/CSS コーディングの Tips を記載します。
項目
6.7.1. ブロック要素を横に並べたい、div を横に並べたい¶
6.7.1.1. 対処方法¶
親要素に clearfix のクラス、子要素に float 用のクラスを指定してください。
6.7.1.2. 実装例¶
6.7.1.2.1. HTML¶
1 2 3 4 5 6 7 | <div class="imui-box-operation cf （１）">
<div class="float-L （２）pl-10 （３）">
<imart type="imuiTextbox"/>
<imart type="imuiButton" value="検索"/>
<imart type="imuiButton" value="クリア"/>
</div>
</div>
|
| （１） | cf | clearfix クラス | 各ブラウザでブロック要素の回り込みを解除 |
| （２） | float-L | float 用クラス | float:left が入ります。右に配置する場合は、float-R クラスを指定 |
| （３） | 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 （１） mt-20">
<div class="imui-box-title （２） imui-box-toolbox-look （３）">
<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. 追加したスタイル¶
ツールボックス（imui-box-operation と同じ枠線）
imui-box-toolbox
タイトルバー（h2, h3は同じ見た目。imui-chapter-title.h2 使用時は、imui-box-title.h3 を使用）
imui-box-title, imui-box-title.h2, imui-box-title.h3
タイトルバー／ツールバー上部角丸効果（（１）にフィットさせる）
imui-box-toolbox-look
コンテンツ
imui-box-toolbox-content
ツールバー
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.6. 画面に「ページの説明文」を配置したい¶
6.7.6.1. 対処方法¶
画面の操作内容や、凡例などを画面上に表示したい場合、「ページの説明文」を配置します。以下にアイコンと組み合わせた実装例を1つ示します。その他は、別ドキュメントの CSS Module List の補足ボックス「.imui-box-supplementation」 を参照してください。
6.7.6.2. 実装例¶
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. 補足¶
表示アイコン 意味 入力フォームの上部に情報を表示するインフォメーション
