2008年05月08日

FormHelperとCSS

CakePHP1.2のスタイルシートには最初からフォームデザイン部分のcssが入っていますが、iPodなどで表示させるには便利でも、実際にたくさんのデータを入力するにはちょっと…というデザインだと思います。実際に使用する時には、「ラベルが左側で入力テキストボックスが右側に同じ行内に並ぶ」ようなデザインも使いたいのではないでしょうか。

思い通りの位置に表示させるには、cssのパラメータに関する知識が必要です。

このあたりをうまく説明してくれる何かがないかな、と思っていたところ、こんなサイトを見つけました。以前に、CakePHPのgooglegroupで話題になっていたサイトです。

CSS-Only, Table-less Forms
http://jeffhowden.com/code/css/forms/

ここにあるデザインとCakePHPのFormHelperの出力するタグ類は、考え方がほぼ一緒です。

divがあって、labelがあって、inputがあって、最後に/divでくくる、という流れでデザインされています。

なので、cake.generic.css の form部分を、そっくり上記のサイトのデザインで変更してみると、なかなか勉強になります。

form div {
clear: left;
}

form div label {
float: left;
width: 130px;
padding: 3px 5px;
margin: 0 0 5px 0;
text-align: right;
}

などの部分がキモのようです。
ラベル:cakephp CSS
posted by SDozono at 14:43| 東京 ☀| Comment(0) | TrackBack(0) | CakePHP template | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
手(パー)To make a comment: Please type your name and comment. at the validation field box, type 'cakephp'. And there two glay buttons. "Preview"/"Submit". Thank you!
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。