CSSを使ってのデザイン指定

CSSを使ってデザイン要素の指定にトライしてみよう。

基本的な考え方

CSSは"Cascading Style Sheet"の略で、HTMLからデザインに関する指定を抜き出したものである。フォントサイズ、セルの幅などのデザインに関する指定はCSS内で定義して、それらに「申請書の入力用」のような 意味のある名前をつけておく。 HTML内では、直接デザインに関する指定はせずにCSSで定義した名前を指定する、というのが基本的な考えだと理解している。 プログラミングで言えば、「ソースコードで直値を使うな」という感じだろう。

XPagesでは、自分用のCSSはアプリケーション全体の設定で組み込んでおき、各XPageに組み込むことで、自分で作ったCSSが有効になる。

あとは、XPage内の各要素でCSSで定義したデザインを指定すれば、そのデザインが画面に反映される。

CSSについては、いろいろ解説してくれているページがあるのでここでは解説しない(まだ自分でもよくわかってないし)。

CSSの定義方法

XPagesでは、自分のCSSは「リソース/スタイルシート」で定義する。[新規スタイルシート]ボタンを押すと出てくるダイアログで、適当な名前をつけてやる。やっぱり拡張子はCSSだろうなぁ。

CSSの追加

開いたファイルにCSSを書いていく。

CSSの書き方

まだいろいろ試している最中なので、これが正解なのかよくわからないが、たぶん、「クラスセレクタ」なるものを使うのがいいような気がする。 例えば、「申請書」クラスのクラスセレクタを定義しておき、XPageのソースで<div class="申請書">〜</div>で囲んだ要素に適用されるデザインの指定するとか。

例として、以下のXPageにCSSでデザイン要素を指定してみよう。

CSSの追加

この場合、viewPanelは管理部署別のPCの一覧を示しているので、"pclist_by_group"とでもつけますか。

viewPanel全体の幅を指定するなら、以下のように指定する。意味は、viewPanelの幅を親Box(この場合はlotusMainの<div>箱)の85%にするというもの。

  table.pclist_by_group {width: 85%;}
  

viewPanelは最終的には<table>に変換されるので、CSS上で指定するタグはtableになる。 何に変換されるかは、ブラウザで表示した後で、HTMLソースを見ればいい。Firefoxのfirebugを使えば、画面上で要素をさせば対応するHTMLソースが表示されるのでわかりやすいだろう。