ハシウェブ

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

難しいデザインもコピペだけ!おすすめCSSジェネレータサイト11選

難しいデザインもコピペだけ!おすすめ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を動かしながらプレビューを確認して設定できるのでユーザビリティはいいです。

box-shadowのジェネレーターとプロパティについて | bad-company

要素に影を落とすためのCSSプロパティであるbox-shadowを確認するためのジェネレーターページです。またプロパティの設定方法についても解説をしています。

テキストシャドウ

bad-company

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

text-shadowのジェネレーターとプロパティについて | bad-company

画像の形に影を落とすのによく使われるfilter関数のdrop-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が作成できます。
吹き出しの三角のところがちょっと難しいですがジェネレータで簡単につくれます。

CSS Arrow Please - By Simon Hoejberg - @shojberg

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. Each spinner is created from a single div with animation, styling and pseudo-elements applied via CSS.

総合

CSS3 Generator

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

まとめ

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

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

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