記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

目的別レスポンシブサイト制作に役立つCSSジェネレーター8選

目的別レスポンシブサイト制作に役立つCSSジェネレーター8選

レスポンシブサイトではボタンなどは画像よりもCSSで調整する方がいい場合があります。今回はCSSを使って簡単にボタンやメニューを生成できるジェネレーターや、その他便利なツールをご紹介したいと思います。

目次
  1. グラデーションを調整する。
  2. 角丸、シャドウ、フォントなどを調整する。
  3. 吹き出しボックスを作る。
  4. Photoshopの様なUIでグラデーションや角丸などを生成する。
  5. HTMLに含まれるidやclassを抽出する。
  6. 膨大な量のCSSを省略し、ダイエットしてくれる。
  7. 様々なタイプのグローバルメニューを生成する。
  8. 水平メニューを生成する。

Ultimate CSS Gradient Generator
ドラッグアンドドロップでボタン内のグラデーションを細かく調整することができます。プリセットからカラーを選ぶこともできるので、便利です。
Ultimate CSS Gradient Generator

CSS 3.0 MAKER
ボックスの角丸やテキストシャドウ、角度やカラーなど自由に設定することができるジェネレーターです。ベンダープレフィックスも生成してくれます。
css3.0maker

CSS ARROW PLEASE!
今まで吹き出しなどを作る時は画像を使っていましたが、このジェネレーターを使えば吹き出しもCSSで生成することが可能になります。
CSS ARROW PLEASE!

LAYERSTYLES
Photoshopのレイヤースタイルのようなインターフェイスで、ボックスシャドウ内側&外側、グラデーション&透明度、ボーダー、角丸を生成することができます。
LAYERSTYLES

Primer
こちらはボタンなどの生成ではないのですが、HTMLで記述したソースをこのジェネレーターへコピーして貼り付けると、そのHTMLで使われているidやclassが読み出されます。cssを記述する時にどんな指定がされているか分かりやすくなりますね。
Primer

CLEANCSS
生成したcssをコピーし貼付け、右側でどの程度ダイエットをするのか選択します。
設定によって省略の方法は異なるので、コメントアウトなど消されたくない場合は注意が必要です。
CLEANCSS

CSS MENU MAKER
ドロップダウンやフライアウト、タブメニューなどの生成することができ、カラーやグラデーションを調整することができます。
CSS MENU MAKER

CSS Menu Generator
こちらは水平メニューのみですが、多くのデザインの中から選ぶことができます。
CSS Menu Generator

 

以上、レスポンシブサイト制作に役立つCSSジェネレーターでした。

ネット上には上記の他にも役に立つジェネレーターがたくさんあるので、是非積極的に検索して探してみて下さい。

photo credit: Simon Pow via photopin cc
                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

レスポンシブWebデザインカテゴリの最新記事