2014/10/28
CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」
CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと味もふた味も違うようです。
これでのCSSジェネレーターというと、ワンテーマもしくは数テーマに対象が絞られていました。
たとえば、ボタン、グラデーション、角丸、トランジションなどです。
しかし、今回ご紹介するジェネレーターはこれまで個別にあった機能がまとめられ、複数の機能が1つになったジェネレーターです。
これは作業時間の大幅な短縮にもなりそうですし、「CSS3がいまいちわからない」という方にとっても強力な武器になりそうですね。
ご参考になれば幸いです。
もはや手入力は不要!CSS全般を網羅したジェネレーター「ENJOY CSS」
EnjoyCSSは、WYSIWYGエディタでCSS3を編集してコードを生成できてしまうジェネレーターです。
ボタンやフォーム、テキストのほか、パターンの生成やボックスシャドウ、角丸、グラデーション、トランジション、トランスフォームなどを作成できます。
制作も、仕上がりを確認しながら、WYSIWYGエディタで行うことができるので、非常にわかりやすくて便利です。
ここではボタンを作ってみましょう。
最初にボタンを選択します。

エディタ画面にすでにボタンが出来上がっているので、右側にある「Text」「Background」などの項目を触って、見た目を調整していきます。
フォントでは、デフォルトのフォントのほか、Googleフォント、AdobeフォントのWEBフォントも選択可能です。

ボタンではホバー用のボタンも作成できます。
トランジション効果も簡単に設定できますよ。
もちろん、仕上がりもすぐに確認可能です。

見た目の調整が完了したら、右上の角にある「Get the Code」をクリックすれば、コードが生成されています。
対応ブラウザまで表示してくれるのがにくい!

こちらのサービスでは、ギャラリーも併設されています。
ほかの人がつくった作品をみて参考にするのもいいですね。
ギャラリーにある作品は編集することも可能です。

どんどん活用したいジェネレーターです。
EnjoyCSS
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?
-
-
これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22
CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。
-
-
プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100
HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ
-
-
セキュリティー/プライバシーにすぐれたブラウザ6選
IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが
-
-
CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル23
CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。 掲載され
-
-
背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」
最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく
-
-
これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」
簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ
-
-
WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」
WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid
-
-
WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」
WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ
-
-
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ
