PiF vol.8のスライドとデータを公開します

前記事でも書いた、行われたPiF(PHP in Fukuoka) vol.8の勉強会で「CSSでformデザイン」の中でお見せしたスライドやデータを公開します。

○CSSでformデザインのサンプル
FancyなForm
FancyなForm

「CSSでformデザイン」と言っておきながら、このサンプルではFancyForm v0.9というjavascriptのライブラリで、 radio、checkboxの切り替えを行ってます(汗
Mac/Safari2は非対応なのでご注意。
テキストエリアのボーダーが消せないのでSafari3での実装を待たないといけません。

○ <input type=”text”>の各ブラウザのスクリーンショット
<input type=

<input type=”text”>(1行の入力フォーム)だけですが、主要ブラウザで いろんな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

コメントを残す

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

CAPTCHA


*