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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+
サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で
-
-
ファイルのウイルス・マルウエアを無料でスキャンできるオンラインサービス9
ファイルのウイルスやマルウエアを無料でスキャンできるオンラインサービスセキュリティーサービスをご紹介
-
-
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail
-
-
CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた
CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき
-
-
WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」
WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ
-
-
全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121
2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン
-
-
通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」
隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」がリリースされました。
-
-
画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法
アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を
-
-
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ
-
-
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ
