サイト制作で便利なCSSジェネレーターをまとめてみました

  1. ホーム
  2. Webのコト
  3. サイト制作で便利なCSSジェネレーターをまとめてみました

普段からWEBサイト制作でお世話になっている便利なCSSジェネレーターを集めてみました。

目次

  • 複雑な角丸もコピペでOK
  • グラデーションを作成
  • 三角の吹き出しをつくる
  • 三角形に特化したジェネレーター
  • CSS Spriteが簡単
  • テキストシャドウ、ボックスシャドウからトランスフォームまでなんでもあり
  • RGBへ変換
  • ジェネレーターのおまけ：データURI スキームを作成

    • 複雑な角丸もコピペでOK


    border radius
    4角が全て違う場合などでも簡単に作ることができます。

    ベンダープレフィックスも選択して出力可能です。

    グラデーションを作成


    Ultimate CSS Gradient Generator
    これは高い頻度でお世話になっているサービスです。

    ↑細かく指定するとこんなボタンみたいなグラデーションも作成できます。

    三角の吹き出しをつくる


    CSS ARROW PLEASE!
    これを知るまでは、三角だけは画像で作っていました。
    CSSで作成できるので簡単に修正もできますし便利です。
    吹き出しとかで利用もできますね。

    三角形に特化したジェネレーター


    CSS triangle generator
    これは様々な三角形を作成できます。

    ↑このような変形三角も簡単に作成できます。

    CSS Spriteが簡単

    CSS Sprite Generator

    画像をzipで投げるとスプライト画像（並べた画像）にしてくれます。

    ↑しかもこんな感じにCSSも作ってくれます。

    テキストシャドウ、ボックスシャドウからトランスフォームまでなんでもあり


    CSS3 Playground
    多機能過ぎて使いづらいです。
    ただ、CSSがどのような動きをするのかはすごく勉強になります。

    ↑いじりまくると、このような形もCSSで作成することができます。

    RGBへ変換

    Yellowpipe Internet Services

    CSS3で使用頻度の高いrgbaで書く時に変換するのに利用します。

    こんな感じで。


    ジェネレータのおまけ

    データURI スキームを作成

    img2data

    data:image/png;base64,を作成する時に利用します。
    スマホなどは特に表示を早くしたい場合が多いので、リクエストを減らして速度を上げる工夫ですね。