CSS

これは便利!CSSジェネレーター『Live Tools』

更新日:

Twitter Bootstrapでは、いまいちデザインがしっくりこないログインフォーム、何かいいCSSジェネレーターはないかと探してみたら、かなり便利なCSSジェネレーター『Live Tools』を見つけましたので、ご紹介します。

1. まず下記のURLからLive Toolsのトップページへ行きます。

http://livetools.uiparade.com/index.html

css001

2. Button Builder、Form Builder、Icon Builder、Ribbon Builderと4つのジェネレーターがあります。それでは、Form Builderをクリックしてみます。既にログインフォームの原型が出来ています。

css003

3. ほとんど説明する必要も無いほど簡単ですが、一応3つのパーツに分かれています。まず、①Form Containerは、フォーム全体のデザインです。②From Fieldはフォームの入力領域のデザインです。そして③Button SettingがSubmitボタンのデザインです。フォーム作成後、④Generate HTMLでHTMLを生成し、⑤Generate CSSでCSSを生成します。

4. このままでもほとんど使えますが、デザインの変更方法を調べてみましょう。まずForm Containerの部分です。

5. Form Titleを①ログインに変更します。Corner Roundnessは②フォームの角丸の大きさを変更します。Border Ticknessはフォームの③ボーダーラインの大きさを変更します。

css004

6. 次にフォームの色を変更してみたいと思います。Top Gradient Colorは①フォーム上部のグラデーションカラーで、Bottom Gradient Colerは、②フォーム下部のグラデーションカラーです。Border Colerは③フォーム境界線のカラーです。Label Text ColorとLabel Text Shadow Colorは、ラベルの文字色とシャドウ色を指定します。

css005

7. Form Fieldsも同様に、フィールド名とフィールドカラーを変更します。

css006

8. 最後に、ボタンのデザインを変更します。ボタンは、Button Normal State(何も操作されていない状態)、Button Hover State(カーソルが乗っている状態)、Button Press State(ボタンが押された状態)のデザインを作成します。

css007

9. フォームのデザインが完成したら、Generate HTMLでフォームのHTMLタグが生成されますので、コピーして作成中のHTMLファイルに貼り付けます。

css008

10. 最後にCreate CSSボタンを押して、作成されたCSSをコピーして適当な名前(例:mystyle.css)をつけて保存します。

css009

11. 完成したログインフォームを見てみたいと思います。下記のようになりました。

css010

尚、自動生成されたCSSでは、フォームは左端にくっついた形になってしまいます。mystyle.cssの.form-containerの最後の行に下記の1行を追加すれば、ブラウザの真ん中に表示されます。

margin:auto;

12. Ribbon Builderと組み合わせて下記のようなものも簡単に作成できます。面白いですね。

css012

本日は以上です。

-CSS
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.