【CSS】超簡単にそして綺麗にフォームやボタンが作れる便利なアイテム

css

ボタンやフォームを作成するときに、いろいろデザインのことで悩んだりしませんか?

CSSを一から書いて綺麗なデザインを作るのは、結構ホネで何回も修正したりして大変だなとよく思います。

綺麗なフォームを作成するにはどうしたらいいか?

そこで便利なテンプレートを使うことにしました。

このサイトはwordpressで作ってるけど、本当にhtmlで直接作ったりphpのサイトでフォームのデザインに迷った時はPureを使うと本当に早くサイトを仕上げることができます。

Pure
A set of small, responsive CSS modules that you can use in every web project.

YahooのAPIを使うんですが、パーツごとにクラスが設定されているので、シンプルなデザインでボタンやフォームを作るときに困ったときとかcssをいちいち書いてる暇がない場合とかすごく重宝します。

僕は、レイアウトでシンプルなデザインを速攻で使いたい人とかはこういうAPIを使うのがいいんじゃないかなと思う。

使い方は簡単で以下のようなコードを書けばあとはルールに従って書けばすぐに綺麗なデザインがすっきりできます。


差し込むコードはこれだけですぐに利用することが可能です。

フォームを作る場合は以下

A compact inline form

解説

fieldsetは四角いボックスでlegendは下線のCSSがつくplaceholderは、薄く表示したい文字を印字みたいな感じで表現してくれる。
灰色の薄い線なのでレイアウトがしやすくすごく便利です。

コメント

スポンサーリンク
タイトルとURLをコピーしました