個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと味もふた味も違うようです。
これでのCSSジェネレーターというと、ワンテーマもしくは数テーマに対象が絞られていました。
たとえば、ボタン、グラデーション、角丸、トランジションなどです。
しかし、今回ご紹介するジェネレーターはこれまで個別にあった機能がまとめられ、複数の機能が1つになったジェネレーターです。
これは作業時間の大幅な短縮にもなりそうですし、「CSS3がいまいちわからない」という方にとっても強力な武器になりそうですね。
ご参考になれば幸いです。

もはや手入力は不要!CSS全般を網羅したジェネレーター「ENJOY CSS」

EnjoyCSSは、WYSIWYGエディタでCSS3を編集してコードを生成できてしまうジェネレーターです。
ボタンやフォーム、テキストのほか、パターンの生成やボックスシャドウ、角丸、グラデーション、トランジション、トランスフォームなどを作成できます。
制作も、仕上がりを確認しながら、WYSIWYGエディタで行うことができるので、非常にわかりやすくて便利です。
ここではボタンを作ってみましょう。
最初にボタンを選択します。
CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」
エディタ画面にすでにボタンが出来上がっているので、右側にある「Text」「Background」などの項目を触って、見た目を調整していきます。
フォントでは、デフォルトのフォントのほか、Googleフォント、AdobeフォントのWEBフォントも選択可能です。
CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」
ボタンではホバー用のボタンも作成できます。
トランジション効果も簡単に設定できますよ。
もちろん、仕上がりもすぐに確認可能です。
003
見た目の調整が完了したら、右上の角にある「Get the Code」をクリックすれば、コードが生成されています。
対応ブラウザまで表示してくれるのがにくい!
04
こちらのサービスでは、ギャラリーも併設されています。
ほかの人がつくった作品をみて参考にするのもいいですね。
ギャラリーにある作品は編集することも可能です。
CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

どんどん活用したいジェネレーターです。
EnjoyCSS

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 6

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方をご紹介

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方

Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで

記事を読む

レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16

レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW

記事を読む

売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法

「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」

CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

リボン風の見出しをCSS3だけで実装する方法

リボン風の見出しをCSS3だけで実装する方法

見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む