prettyFormsで、フォーム画面をちょっとおしゃれに。アシアルブログスマートフォン用の表示で見るアシアルブログアシアルの中の人が技術と想いのたけをつづるブログです2008-11-13prettyFormsで、フォーム画面をちょっとおしゃれに。TechTweetこんにちは。新型MacBookのデザインの可愛さに惹かれつつも、いまいち購入に踏み切れないないでいる橋本です。あと500グラム軽ければ、迷うこと無く購入に踏み切るのですが...。今日は「prettyForms」というツールを紹介します。このブログを読んでくださっている方の中には、普段業務システムの開発に携わっておられる方もいらっしゃると思います。業務システムを作成する際には、以下のようなシンプルなフォーム画面を目にすることも多いのではないでしょうか。機能的には問題ないのですが、シンプルすぎてなんだか見た目がちょっと寂しいとは思いませんか。思ったとしても、実際業務を行う中でこのようなシンプルなフォーム画面のデザインに、多くの時間を費やすことは中々難しいのではないかと思います。今回紹介するツールは、そういったお悩みを解決するツールです。1.まずは「prettyForms」を以下のサイトからDLし、中身をフォームのhtmlと同じフォルダに展開します。Forms2.フォームのhtmlに以下の記述を加えます。onload="prettyForms()"></body>3.改めてフォームを表示します。先ほどのシンプルなフォームがちょっとおしゃれなフォームに変わりましたね。いやー、すばらしい!!...と、手放しに喜びたいところなのですが、このツールを使用するには、いくつか注意点があります。皆さんお気づきかと思いますが、ソースコード中にlabel要素が多用してあります。実は、このツールはlabel要素を基準としてレイアウトを行います。そのため、表示する全ての要素に対してlabel要素を追加する必要があります。/>というタグが多数あるのですが、この「clearAll」というクラス名は元々定義されているクラス名で、自動で行われるレイアウト(labelの右側にフォーム部品が回り込むようなレイアウト)を解除するために使用します。回り込みのレイアウトを解除するためには、いちいちこのタグを挿入する必要があり、この点が少し面倒です。label要素の記述が必須だったり、clearAllクラスを使って回り込みレイアウトを解除したりしなければいけなかったりと、使用するには不便なことも多いのですが、デザインに時間をかけられない案件などで手軽に見栄えのするフォームを作りたい際には重宝するのではないかと思います。一度使ってみてはいかがでしょうか。12:29prettyFormsで、フォーム画面をちょっとおしゃれに。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。