レスポンシブサイトではボタンなどは画像よりもCSSで調整する方がいい場合があります。今回はCSSを使って簡単にボタンやメニューを生成できるジェネレーターや、その他便利なツールをご紹介したいと思います。
- グラデーションを調整する。
- 角丸、シャドウ、フォントなどを調整する。
- 吹き出しボックスを作る。
- Photoshopの様なUIでグラデーションや角丸などを生成する。
- HTMLに含まれるidやclassを抽出する。
- 膨大な量のCSSを省略し、ダイエットしてくれる。
- 様々なタイプのグローバルメニューを生成する。
- 水平メニューを生成する。
Ultimate CSS Gradient Generator
ドラッグアンドドロップでボタン内のグラデーションを細かく調整することができます。プリセットからカラーを選ぶこともできるので、便利です。
CSS 3.0 MAKER
ボックスの角丸やテキストシャドウ、角度やカラーなど自由に設定することができるジェネレーターです。ベンダープレフィックスも生成してくれます。
CSS ARROW PLEASE!
今まで吹き出しなどを作る時は画像を使っていましたが、このジェネレーターを使えば吹き出しもCSSで生成することが可能になります。
LAYERSTYLES
Photoshopのレイヤースタイルのようなインターフェイスで、ボックスシャドウ内側＆外側、グラデーション＆透明度、ボーダー、角丸を生成することができます。
Primer
こちらはボタンなどの生成ではないのですが、HTMLで記述したソースをこのジェネレーターへコピーして貼り付けると、そのHTMLで使われているidやclassが読み出されます。cssを記述する時にどんな指定がされているか分かりやすくなりますね。
CLEANCSS
生成したcssをコピーし貼付け、右側でどの程度ダイエットをするのか選択します。
設定によって省略の方法は異なるので、コメントアウトなど消されたくない場合は注意が必要です。
CSS MENU MAKER
ドロップダウンやフライアウト、タブメニューなどの生成することができ、カラーやグラデーションを調整することができます。
CSS Menu Generator
こちらは水平メニューのみですが、多くのデザインの中から選ぶことができます。
以上、レスポンシブサイト制作に役立つCSSジェネレーターでした。
ネット上には上記の他にも役に立つジェネレーターがたくさんあるので、是非積極的に検索して探してみて下さい。
