前記事でも書いた、行われたPiF(PHP in Fukuoka) vol.8の勉強会で「CSSでformデザイン」の中でお見せしたスライドやデータを公開します。
○CSSでformデザインのサンプル
FancyなForm
「CSSでformデザイン」と言っておきながら、このサンプルではFancyForm v0.9というjavascriptのライブラリで、 radio、checkboxの切り替えを行ってます（汗
Mac/Safari2は非対応なのでご注意。
テキストエリアのボーダーが消せないのでSafari3での実装を待たないといけません。
○ <input type=”text”>の各ブラウザのスクリーンショット
<input type=”text”>（１行の入力フォーム）だけですが、主要ブラウザで いろんなCSSのプロパティを反映されるかを試してみました。
尚、 [.sample15]の:hover、[sample16]の:focus は実際にマウスオーバー・フォーカスさせてる状態でスクリーンショットを撮っています。
試したブラウザは以下の通りです。
- Windows XP
- IE6
- IE7
- FF2
- NS7
- NS9
- Opera9
- Safari3 Beta
- Mac OS X
- FF2
- NS7
- NS9
- Opera9
- Safari2
今回自分が勉強した結論として、
cssだけでformのデザインは限界があって、より凝ったデザインをHTMLベースで組もうとするとJavaScriptは使わざえる得ない、って事です。（何を今さらですが・・・）
もちろんFlashを部分的に使う、という方向もあると思いますし、その辺も試してみたいですね。
スライド内容や配布データに不備があったら、ご指摘お願いします。
（勉強しなおして修正します。）
○追記
他のスピーカー達の資料も公開されたのでこちらもぜひ。
- 「初めてのWordPressカスタマイズ『楽に更新したか?』」by 西嶋氏＠ Nishiaki’s Log
- http://nishiaki.probo.jp/2007/10/php-in-fukuoka-web.html
- 「俺流Webサービスの作り方」by rytich氏 ＠ [foool]丘の上
- http://d.hatena.ne.jp/rytich/20071101/1193914944
- 「いろのはなし」 by Yoshikawa氏 @ 福岡Webデザイナーズ
- http://www.grafdottee.com/grafoo/blog/archives/fwd-study-01
- 「ベジエ曲線を克服しようby Mutsuki @ 福岡Webデザイナーズ
- http://design.fww.cc/2007/10/blog-post.html
コメント