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;
}

などの部分がキモのようです。