投稿日
NablarchのJSPカスタムタグでチェックボックスやラジオボタンを自由に並べたい
はじめに
はじめまして。テクノロジー&エンジニアリングセンターの羽部(はぶ)と申します。新人研修や、ITアーキテクト育成などの技術者育成を担当しています。
今回は、Nablarch解説書に記載されていない情報の補完を目的に記事を書きました。「こういう時はどうするの?」といった情報をお伝えします。
Nablarchは、色々なJSPカスタムタグ を提供しています。 その中には、複数のチェックボックスやラジオボタンを表示するものがあります。checkboxes
タグやradioButtons
タグです。
これらのカスタムタグは、DBの値で選択肢を動的に変更させることもできなかなか便利です。表示されるチェックボックスやラジオボタンのフォーマットも、listFormat
属性で指定できます。
しかし、listFormat
属性で指定できるフォーマット以外に並べたい、ということもあるでしょう。
そんな時の解決策を、今回はご紹介します。
チェックボックスやラジオボタンを自由に並べたい
チェックボックスを3列で表示するようにフォーマットする場合を例に説明します。 3列で表示するとは、以下のようなイメージです。こういうフォーマットはlistFormat
属性では指定できません。
□要素1 □要素2 □要素3
□要素4 □要素5
CSSを使ってフォーマットします。基本的な考え方は次の通りです。
checkboxes
タグやradioButtons
タグは、listFormat
属性に指定したHTMLタグで出力されます。ですから、出力されるHTMLを前提にしてCSSでフォーマットを制御してやります。
例えばJSPでcheckboxes
タグのlistFormat
にdiv
を指定します。HTMLでは、チェックボックスはdiv
に囲われて出力されます。ですから、div
タグに対してCSSでフォーマットを定義します。
実例を示しましょう。
チェックボックスを表示する部分の横幅は600pxとします。
/*
* チェックボックスリストの表示領域の全体幅
* チェックボックスの列数 = 全体幅 / チェックボックスの列幅
*/
.checkbox-list {
display : flex;
flex-wrap : wrap;
width : 600px;
}
/* チェックボックスの列幅 */
.checkbox-list > div {
flex-basis : 200px;
}
横幅600pxで3列表示するので、チェックボックス1つあたりの列幅は600÷3=200
となります。これがflex-basis
を200px
としている理由です。 flex-basis
は%で指定することもできます。例えば、2列にしたいなら100%÷2列
で50%
、4列なら100%÷4列
なので25%
といった具合です。チェックボックス1つあたりの幅を決めておきたいのなら、px指定、そうでないのなら%指定、と使い分ければいいでしょう。
CSSを用意したら、JSPの実装です。
<div class="checkbox-list">
<n:checkboxes
~略~
listFormat="div"
/>
</div>
ポイントは2つです。
checkboxes
タグのlistFormat
属性をCSSで「チェックボックスの列幅」を定義したときのタグに合わせる。checkboxes
タグをCSS定義の設定を行ったdiv
タグで囲む。
1つ目に書いた、「CSSで「チェックボックスの列幅」を定義したときのタグ」とは、今回の例で言えば、.checkbox-list > div
なのでdiv
タグの事です。.checkbox-list > span
だったら、span
タグです。
逆に言うと、listFormat
に例えばspan
を指定したいならば、CSSでは.checkbox-list > span
と記述することになります。この辺りは、基本的な考え方として書いた部分です。
2つ目は、今回の例で言えば、checkbox-list
という定義名でチェックボックスリストのCSSを定義しています。つまりclass="checkbox-list"
というclass
属性を定義したdiv
タグの事です。
ちなみに、checkboxes
タグをradioButtons
タグに変えれば、ラジオボタンを整列させることもできます(CSSの定義名がちょっと気持ち悪いですが)。
おわりに
いかがだったでしょうか。JSPカスタムタグが出力するHTMLを想定するところが今回のポイントです。その分ややこしいかもしれませんが、見た目をカスタマイズする考え方としては応用が効くものです。ぜひ覚えておいてください。
本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。