読者です 読者をやめる 読者になる 読者になる

Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

見栄えをよくしてくれるWebツールまとめ - CSS編

 

今日はCSSでのデザインをより簡単にしてくれる優れたWebツールをご紹介したいと思います。

 

Webツール - CSS

グラデーションやボックス、グリッドなどがメインとなります。

 

CSS3gen

※ Box Shadow only

Box Shadowを調節してくれるツールです。

左から角度・距離・ぼかし・色・透明度の順で調整できます。

コピペですぐ実装できます。

 

CSS3 PIE

※ border-radius ○ box-shadow ○ gradient ○

CSSでグラデーションが作れるツールです。

グラデーション以外にも角丸やBox shadowもできます。

こちらはIEではどう表示されるのかも確認できるので、

古いブラウザーを対応するお仕事の時に役立ちますね。

 

CSS3 Generator

※ border-radius ○ box-shadow ○ text-shadow ○ RGBA ○

 @Font Face ○ Multiple Columns ○ Box-Resize ○ Box Sizing ○

 Outline ○ Transitions ○ Transform○ gradient○

こちらは結構多くのCSSの設定ができるサイトです。

色々対応しているので、これをベースにし、

自分に合うWebツールを何個か一緒に使えるのがよいかと思います。

 

 

  CSS3 MULTI COLUMN

カラムとその間隔などを調整し、CSSで書き写してくれるツールです、

書籍関連や記事などを載せる際に良さそうですね。

使い方も簡単です!

I want [分けたいカラム数] columns with a gap of [カラム毎の間隔]px and a rule of [線を入れたい時/無しは0を入力]px thick

文章の中の数字をいじるだけですぐ作れます。

 

 

Boxの方向や配置、グルーピングなどグリッドデザインをする際に役立つツールです、

相対でサイズが設定されているので、多くのブラウザやデバイスに最適化の案件や課題がある時、使えそうですね。

 

 

CSSでのボタンを簡単に作ってくれるツールです。

Textの内容と色も編集でき、色はデフォルトで6テーマあるのですが、

カラーコードを選択すると、他の色もできます。

角丸や余白なども設定できて、すぐコードとしてもらえます!

  

 

FormをきれいにCSSで作ってくれるツールです。
Hoverされた時の調整など細かいところまで修正が利くので、
便利ですね!
 
 
 
制作の時に、ぜひ参考にしてみてください!!