JSP ／ CSSコーディング Tips¶
項目
本章では、JSP/CSS コーディングについて、記載します。
ブロック要素を横に並べたい、div を横に並べたい¶
対処方法¶
親要素に clearfix のクラス、子要素に float 用のクラスを指定してください。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>
<div class="imui-box-operation cf （１）">
<div class="float-L （２）pl-10 （３）">
<imui:textbox />
<imui:button value="検索" />
<imui:button value="クリア" />
</div>
</div>
画面イメージ
| （１） | cf | clearfix クラス | 各ブラウザでブロック要素が崩れず表示 |
| （２） | float-L | float 用クラス | float:left が入ります。右に配置する場合は、float-R クラスを指定 |
| （３） | pl-10 | assist クラス | padding-left:10px が入る |
JSP コーディングでは、子要素１つめに float: left を入れると、clear するまで継承されるが、画面開発では各子要素に入れるようにしてください。 （pl-10 が正しくとられない。div が 100% とられる）
文字リンクを青字／黒字にしたい¶
仕様¶
- 以下は、青字（マウスオーバー時、淡青字＋下線）になります。
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
対処方法¶
- 黒字の文字リンクをあえて青字にしたい場合、<a class=”imui-accent”> を指定してください。
- 青字の文字リンクをあえて黒字にしたい場合、<a class=”imui-unaccented”> を指定してください。
参考：処理アイコン／処理リンク
UIコンポーネント、または CSS ボックスアイテムにタイトルバー/ツールバーを配置したい¶
オペレーションボックスにタイトルバー／ツールバーを配置したい¶
対処方法¶
JSP¶
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>
<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">
<!-- 簡単検索 -->
<imui:textbox class="wd-225px" placeholder="ユーザ氏名、ユーザカナを入力してください。" autofocus="true" />
<imui:button value="検索" class="imui-button" />
<imui:button value="クリア" class="imui-button" />
</div>
</div>
- 画面イメージ
※追加したスタイル
ツールボックス（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
実装例¶
left-border に 100px の実線を引きたい¶
（１）CSS（width と style を必ず入れてください）¶
.new_class {
border-left-width: 100px;
border-left-style: solid;
...
}
参考情報¶
/* border of theme color */
.theme-border-color(@top-color: desaturate(@theme-color, 10%), @right-color:desaturate(@theme-color, 10%), @bottom-color: desaturate(@theme-color, 10%), @left-color:desaturate(@theme-color, 10%)) {
border-top-color: @top-color;
border-right-color: @right-color;
border-bottom-color: @bottom-color;
border-left-color: @left-color;
}
画面に説明文を付けたい¶
- 説明文の class、アイコン
- imui-box-supplementation で説明文を囲みます。
- 説明文の前には文の内容に応じたアイコンを付与します。
アイコン 説明 im-ui-icon-common-24-information 情報、項目説明／など im-ui-icon-common-24-confirmation 確認／正常／成功／成功メッセージなど im-ui-icon-common-24-question 確認メッセージなど im-ui-icon-common-24-warning 警告メッセージなど im-ui-icon-common-24-error エラーメッセージなど
サンプルコード¶
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imart" uri="http://www.intra-mart.co.jp/taglib/core/standard" %>
<div class="imui-box-supplementation">
<span class="im-ui-icon-common-24-confirmation float-L"></span>
<p class="imui-pgh-section" style="padding-left: 30px;">
<imart:message id="CAP.Z.IWP.SYSTEM.INITIALSETTINGS.MESSAGE" />
</p>
</div>
- 画面イメージ
