JSF2.2入門 第6回スタイルシート


kanban6

katatsumuriJSFにCSSを適用する

HTMLと同様にJSFコンポーネントにもスタイルシートを適用できます。スタイルシートを使うとリッチな表現ができますよね。

leafCSSの適用方法

スタイルはHTMLと同じで、適用する方法は2つあります。

  1. CSSファイルにスタイルを書いてそれを読み込む
  2. JSFファイルのHEAD部分にstyleタグでCSSを書く
  3. JSFタグの中のstyleプロパティに書く

leaf方法1:CSSファイルにスタイルを書いてそれを読み込む

たとえばこの画面のように、

  • フォーム全体に色を付ける
  • ボタンの文字を立体的に表示する
  • 入力欄にカーソルが置かれたらその欄の背景色を変える

160607-5style

160608-2style

CSSファイルは次のとおりです。ボールドで示した部分の5つのスタイルを設定しています。

  • BODYはフォントを設定しています。
  • tx1はテキスト入力欄で大きさや丸みを少し付けています。
  • tx1:focusはテキスト欄にカーソルが置かれたときに背景色を変えるようにしています。
  • grid1は前回学習したpanelGridコンポーネントの色を設定しています。
  • bt1はボタンにシャドーを付けたりしています。

[formStyle.css]

body{
font-family: “Hiragino Kaku Gothic ProN”,”メイリオ”, sans-serif;
font-size: 12pt;
}
.tx1 {
border-radius: 2px;
width: 300px;
height: 20px;
margin-top: 2px;
margin-bottom: 2px;
}
.tx1:focus {
background-color: #FFCCFF;
}
.grid1{
background-color: #00CCCC;
padding: 10px 20px 0px 20px;
margin: 5px;
}
.bt{
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 13pt;
font-weight: bold;
text-shadow: 0px -2px 2px rgba(255, 255, 255, 0.8);
}

このCSSファイルはどこに置いても構いませんが、JSFページから参照しますから、そこからアクセスしやすいところがいいですね。整理しやすくするためにcssというディレクトリに入れたほうがよいと思います。配置はWebページの下にしましょう。

160608-1cssfile

JSFページでCSSを使うには次のように、h:head内でlinkタグ内でformStyle.cssを読み込みます。

JSFのタグの中にstyleClassプロパティがスタイルシートのセレクタとして機能しますので、それを使います。

[inputWithStyle.xhtml]

<?xml version=’1.0′ encoding=’UTF-8′ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:h=”http://xmlns.jcp.org/jsf/html”
xmlns:f=”http://xmlns.jcp.org/jsf/core”>
<f:view>
<h:head>
<title>User Registration and Navigation</title>
<link rel=”stylesheet” type=”text/css” href=”css/formStyle.css”/>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns=”2″ styleClass=”grid1″ >
お名前<h:inputText styleClass=”tx1″ value=”#{userInfoBean4.userName}”/>
生年月日(yyyy/MM/dd)<h:inputText styleClass=”tx1″ value=”#{userInfoBean4.birthDay}”/>
<h:panelGrid columns=”1″></h:panelGrid>
<h:panelGrid columns=”2″>
<h:commandButton type=”submit” styleClass=”bt” value=”送信” action=”result4″/>
<h:commandButton type=”reset” styleClass=”bt” value=”キャンセル” />
</h:panelGrid>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>

この方法が一番よい方法だと思います。多くのページに共通で適用したり、ここに色々なスタイルを用意しておいて適当に適用していくといったことができます。あとでスタイル変更も1つのCSSの編集だけですから簡単ですね。

leaf方法2:JSFファイルのHEAD部分に書く

次のコードはHEAD部分だけを抜き出したのもですが、ここにstyleタグを使ってスタイルシートを書くこともできます。JSFのタグ側はさきほど同様にstyleClassを使います。

<h:head>
<title>User Registration and Navigation</title>
<style>
.grid1{
background-color: #00CCCC;
padding: 10px 20px 0px 20px;
margin: 5px;
}
</style>
</h:head>
<h:body>
・・・
<h:panelGrid columns=”2″ styleClass=”grid1″ >
・・・

この方法は、そのページだけに適用するCSSである場合やちょこっとした少量のCSSならばよい方法です。

また方法1で別のCSSファイルを読み込んで適用することを原則とするのだが、このJSFページだけはちょっと変更したいんだという場合には方法1と方法2を併用することもできます。同じセレクタ、ここではgrid1ですが、にはこのページで指定したスタイル設定が優先されます。それが「カスケード」という意味です。

leaf方法3:JSFタグの中に書く

タグの中にCSSを書き込んでしまう方法もあります。

その場合にはstyleClassでなくstyleプロパティを使います。HTMLタグと同じです。

<h:panelGrid columns=”2″ style=”background-color: #00CCCC;” >

この方法は方法1、2よりもさらに「個別」のスタイル設定方法です。ちょこっとしたスタイル設定に向いています。とにかくもっとも簡単な方法ですね。

leafまとめ

方法1: CSSファイルにスタイルを書いてそれを読み込む
【CSS設定】
<link rel=”stylesheet” type=”text/css” href=”css/formStyle.css”/>
【適用】
<h:panelGrid columns=”2″ styleClass=”grid1″ >

 

方法2: JSFファイルのHEAD部分にstyleタグでCSSを書く
【CSS設定】
<style>
.grid1{
background-color: #00CCCC;
padding: 10px 20px 0px 20px;
margin: 5px;
}
</style>
【適用】
<h:panelGrid columns=”2″ styleClass=”grid1″ >

 

方法3: JSFタグの中のstyleプロパティに書く
【CSS設定】【適用】
<h:panelGrid columns=”2″ style=”background-color: #00CCCC;” >

previousnext

JSF2.2のすべてをまとめたkindle電子書籍 「JavaServer Faces2.2 入門」もぜひご覧ください。パソコン、iPhone、Androidどんな端末用にもamazonが無料のKindle電子書籍リーダーを用意しています。それをつかってKindle本を手軽にお楽しみください。あなたが今お使いの端末用Kidle電子書籍リーダーのご案内

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA