CSSを使った入力フォームのデザイン

仕事でXPagesを使う場合、申請書などを作るケースも多いと思う。この手の書類の特徴は、

このような申請書をXPagesで作る方法を解説してみる。

基本となるXPages

文書タイプのデータソースを貼り付けただけの基本となるXPageを用意する。

この見栄えはこんな感じ。

基本のデザイン

基本的な考え方

6列くらいの表を用意し、各セルに表題と入力系のコントロールを配置していく。 大きめのセルにしたければ、colspanやrowspanを使って、セルを連結していけばいい。

データソースから貼り付けたコントロールをソースコードレベルでカット&ペーストしていけば、効率がいい。

後は、一番外側の<xp:table>にstyleClass="InputTable"を使って、table要素に適当なクラス名をつけておく。 こうしておけば、CSSの「クラスセレクタ」を使ってこの表自体や表の中の入力コントロールのデザインをまとめて設定できる。

枠線をつける

まずは6列の表を作り、枠線をつけてみる。

まずは、コンテナコントロールから表を貼り付ける。3行×6列くらいの表にしておく。 表の挿入

<xp:table>にstyleClass="InputTable"という属性をつけておく。こうしておくと、HTMLに変換されたときには<table class="InputTable">になる。

これでtable要素に"inputClass"というクラス名が指定されたので、CSSのクラスセレクタを使って、この表だけに適用されるデザインを設定する。

CSSの作成

まずはCSSの設定を書き込みスタイルシートを作成する。

[リソース/スタイルシート/新規スタイルシート]と進み、ここではMyCSSという名前のスタイルシートを作成する。 表の挿入

この中に、以下のような記述をしておく。

  /* 入力用の表のデザイン設定 */
  table.InputTable {
    width: 800px;
    border-collapse: collapse;
    border: 2px rgb(0,128,255) solid;
    background-color:rgb(255,255,255);
  }
  
  /* 入力表の中のセルの枠 */
  table.InputTable td {
    border-collapse: collapse;
    border: 1px rgb(0,128,255) solid;
  }  
  

このCSSをリソースとしてXPageに組み込んでおく。

表の挿入

この結果はこんな感じになる。

表の枠線設定

入力枠の移動

では、データソースから貼り付けた入力枠を今回作った表の中に移動させていく。 移動操作はソースコード上で行う。

表の挿入

セルを大きくしたいときは、colspanやrowspanを使って、複数のセルを連結しておく。 移動させた後の表の見栄えはこんな感じになる。

コントロールの配置換え

いくつかの問題点がある。

これらをひとつづつ調整していく。

見出しに背景色をつけたい

見出し用には<th>というタグが用意されているので、見出し部の<xp:td>を<th>に置き換える。

  □ 変更前
    <xp:td>
      <xp:label value="資産種別:" id="資産種別_Label1" for="資産種別1">
      </xp:label>
    </xp:td>
    <xp:td>
      <xp:radioGroup id="radioGroup1" value="#{document1.資産種別}">
          <xp:selectItems>
              <xp:this.value><![CDATA[#{javascript:@DbLookup("", "設定一覧", "資産種別", "設定値")}]]></xp:this.value>
          </xp:selectItems>
      </xp:radioGroup>
    </xp:td>
  
  ■ 変更後
    <th>
        <xp:label value="資産種別:" id="資産種別_Label1" for="資産種別1">
        </xp:label>
    </th>
    <xp:td>
        <xp:radioGroup id="radioGroup1" value="#{document1.資産種別}">
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:@DbLookup("", "設定一覧", "資産種別", "設定値")}]]></xp:this.value>
            </xp:selectItems>
        </xp:radioGroup>
    </xp:td>
  

その上で、CSSのクラスセレクタにtable.InputTable th {}を追加して、見出し用のデザイン設定を追加する。

  /* 入力枠の見出し部の設定 */
  table.InputTable th {
    border-collapse: collapse;
    border: 1px rgb(0,128,255) solid;
    background-color:rgb(251,248,189);
    text-align: center;
  }
  

列の幅のバランスを取る

いろいろ試した感じとしては、tableにtable-layout:fixedを指定してやり、一番上の行のセルの幅をstyle="width:70px"のように指定してやれば、指定した幅で表が表示されるような気がする。

見出しのデザイン設定とあわせて、こんな感じになる。 幅を指定

入力ボックスの幅と高さを調整

入力ボックスは最終的には<input>、複数行編集ボックスは<textarea>、コンボボックスは<select>に変換されるので、CSSに"table.InputTable input {}" を追加すれば、入力枠の幅も高さも設定できる。ブラウザによっては、 <textarea>の大きさをブラウザ上で枠の右下をドラッグすることで枠の大きさを可変にできるようなので、これも固定にしておく。

CSSには以下の記述を追加する。

  /* 入力枠の幅の指定 */
  table.InputTable input,select {
    width: 90%;
  }
  table.InputTable textarea {
    width: 90%;
    height: 5em; /* 5行分 */
    resize: none;
  }
  

これで見た目は、こんな感じになる。 inputの幅を指定

その他

ボタンのくっつぎ過ぎは、<table>の外側のスキマなので、marginを指定してやればいい。

完成したnsfファイルは、pclist.nsfからダウンロードできる。