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 | このブログの読者になる | 更新情報をチェックする

かすった

"Ruby on Rails"じゃなくて、"rails"とかでも調べないといけないんじゃないの、とか異論はいろいろあると思いますが、“とりあえず”かすったみたいなので記念に。全体的な流れとしては、PHPフレームワークがじわじわ伸びています。

20080508trend.PNG

ラベル:cakephp ruby on rails
posted by SDozono at 09:58| 東京 ☀| Comment(0) | TrackBack(0) | PHP Framework | このブログの読者になる | 更新情報をチェックする
×

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