ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

Web制作・コーディングに役立つおすすめCSSジェネレータ 11選

Web制作・コーディングに役立つおすすめCSSジェネレータ 11選

「あまり使わないCSSを覚えられない」
「複雑なCSSデザインを簡単につくりたい」

悩み

こういった悩みにお答えします。

目次
  1. おすすめCSSジェネレータ
    1. グラデーション
      1. Ultimate CSS Gradient Generator
      2. CSS Gradient
      3. Blend
    2. ボックスシャドウ
      1. bad-company
    3. テキストシャドウ
      1. bad-company
    4. ストライプ
      1. CSS STRIPE GENERATOR
    5. ボタン
      1. Button Generator
    6. 吹き出し
      1. CSS ARROW PLEASE!
    7. アニメーション
      1. CSS EASING ANIMATION TOOL
    8. スピナー
      1. Single Element CSS Spinners
    9. 総合
      1. CSS3 Generator
  2. まとめ

おすすめCSSジェネレータ

グラデーション

Ultimate CSS Gradient Generator

グラデーション(線形、円形)のCSSが作成できます。
対応するブラウザやバージョンのメモがコメントとして表示されます。
これはありがたいようで迷惑なようで、コピペとは別のところに書いてもらいたいかなと思います。

Ultimate CSS Gradient Generator from ColorZilla

A powerful Photoshop-like CSS gradient editor

CSS Gradient

グラデーション(線形、円形)のCSSが作成できます。
ブラウザの幅全体でプレビューが表示されるので見やすいです。

Blend

グラデーション(線形、円形)のCSSが作成できます。
ブラウザ画面全体でプレビューが表示されるので見やすいです。

ボックスシャドウ

bad-company

要素の影と角丸のCSSが作成できます。
rangeを動かしながらプレビューを確認して設定できるのでユーザビリティはいいです。

CSS3 box-shadowとborder-radiusジェネレーター

CSS3で使うbox-shadowのジェネレーターです。React Nativeのも作ってくれます。ざっくりと作ってくれます。ついでにborder-radiusも設定出来ます。

テキストシャドウ

bad-company

テキストの影のCSSが作成できます。
rangeを動かしながらプレビューを確認して設定できるのでユーザビリティはいいです。

CSS3 text-shadowジェネレーター

CSS3で使うtext-shadowのジェネレーターです。ざっくりと作ってくれます。ちなみにいくつも指定できます。

ストライプ

CSS STRIPE GENERATOR

ストライプのCSSが作成できます。
ストライプは、そんなに頻繁に使うわけではないので、毎回調べているので、こういったジェネレータがあると助かります。

CSS STRIPE GENERATOR

ストライプCSSジェネレーター

ボタン

Button Generator

ボタンのCSSが作成できます。
サンプルデザインが40個あるので、サンプルのままでも使えそうですが、ページの色にあわせて調整できます。

A useful tool for designing css buttons

Button generator is a free online tool that allows you to create cross browser css button styles.

吹き出し

CSS ARROW PLEASE!

吹き出しのCSSが作成できます。
吹き出しの三角のところがちょっと難しいですがジェネレータで簡単につくれます。

cssarrowplease

CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.

アニメーション

CSS EASING ANIMATION TOOL

CSSアニメーションの動きを調整できます。
これは見た目ではないですが、アニメーションの動きを細かく調整したい場合は便利です。

Ceaser - CSS Easing Animation Tool - Matthew Lein

Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.

スピナー

Single Element CSS Spinners

ローディングスピナー8つのサンプルの色が調整できます。
スピナー自体の動きやデザインを調整できるわけではありません。

Single Element CSS Spinners

A collection of loading spinners animated with CSS

総合

CSS3 Generator

13のジェネレータがまとめてあるサイトです。
数値がrangeではなく直接入力なのがユーザビリティ的にはもう少しかなと思います。

まとめ

おすすめCSSジェネレータを紹介しました。

  • グラデーション
  • ボックスシャドウ
  • テキストシャドウ
  • ストライプ
  • ボタン
  • 吹き出し
  • アニメーション
  • スピナー

CSSに詳しくなくてもコピペで難しいデザインを実現できるので便利です。