はじめに

はじめまして。テクノロジー&エンジニアリングセンターの羽部(はぶ)と申します。新人研修や、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 の「表示—継承」に準拠しています。