
コーディング不要で簡単にデザインパーツが作成できるCSSジェネレーター10選
CSSでは様々なデザインを設定できますが、記述が難しかったり、記述量が多かったりして億劫になることがあるかと思います。やりたいことさえ決まっているのなら、その記述方法を瞬時に提案してくれる「CSSジェネレーター」が便利。
今回はオススメのCSSジェネレーターを10個に絞ってご紹介します。ぜひリッチなデザインのサイトを効率的に作っていきましょう。
CSSジェネレーター10選
1. CSS3 Generator
UIがとても使いやすく、調整できる項目も多いジェネレーターです。Border RadiusやRGBAなど設定したいメニューを選択し、イメージを見ながら調整してくれるので、最終的に作成したいものへ近づけながら、作っていくことが可能です。
順次必要なCSSの記述をCopyし、手元のCSSファイルへ貼り付けていけば欲しいCSSが完成します。
2. CSS3 Button Generator
ボタンに特化したCSSジェネレーターです。画面上部のSHOWCASEメニューから、完成イメージに近いボタンを選択し、DETAIL画面で編集していきましょう。
こちらも各メニューから調整すると、ダイレクトにイメージに反映され、構成するHTML・CSSもその都度更新されます。CSSが不慣れな方にとっても分かりやすく、CSSの勉強をしたいという方にも良いでしょう。
ここで編集したコードは、出力できるので本番環境への反映にも便利です。
3. OneClickCSS
作成したHTMLコードを貼り付けてボタンを押すだけで、すぐにid,クラス名に対応したCSSの箱を生成できるツールです。HTML上で設定してある順にCSSを表示してくれるので、作成する過程で汚くなってしまったCSSを整理するのにも便利です。
RubyやPHPなど余計な設定がHTMLに含まれていても問題なく作動してくれます。また、SCSSやSassの形式にも対応しており、新しい記述方法を覚えることなく、効率的に対応することも可能。
4. css2sass
http://css2sass.herokuapp.com/
こちらは、もともとあるCSSを一気にSassやSCSS等に変換してくれるサイトです。SassやSCSSを試してみたい方や、サイトリニューアルと合わせて一斉に記述方法をSassに統一したい方などにとって重宝します。
ただし、こちらのツールは、フォントサイズや色の指定などでCSS以外の言語が含まれているとエラーが出ますので、注意が必要です。
5. Ultimate CSS Gradient Generator - ColorZilla.com
http://www.colorzilla.com/gradient-editor/
グラデーションを作成してくれるツールです。Presetの一覧から作成したいイメージに近いものを選んで編集しましょう。グラデーションのかかっていないベタのPresetを選択して、自分で一から作成していくことも可能です。
また、import する機能も付いていますので、気になるサイトのグラデーションのCSSを取り込んで、それを編集することもできます。CSSにはスポンサーのコメントが入っていますが、「Comments」のチェックを外せば取ることができます。hexやRGBAなどカラーコードを選んだり、「switch to scss」からSCSSで出力することも可能。
6. CSS三角形作成ツール
http://apps.eky.hk/css-triangle-generator/ja
広告のランディングページ等で、画面下へスクロールを促す際に活用することの多い三角形を作成するジェネレーターです。それ以外では、フロー図としても活用シーンがあるのではないでしょうか。
7. GRAD3
国産のグラデーションツールです。レーダーのようなポインタを合わせれば、円形のグラデーションも簡単に作ることができます。グラデーションを切るポイントも、バー間の余白をクリックすれば新規でバーが立ち上がります。
細かく設定することが可能です。色も円形のパレットをドラッグしながら直感的に決めることができるので、悩んだ時にはこのツールで色々いじっていると、良いデザイン案が浮かんでくるかもしれません。
8. CSS Border Radius Generator
その名の通り、border-radius(輪郭を丸めるプロパティ)に特化したツールです。4隅を個別に調整できるので、クローバーの葉っぱのような形や、半月形なども作れます。WebKit, Gecko, CSS3すべて表示してくれます。
9. Css3 drop shadow generator
http://www.themeshock.com/css-drop-shadow/
Boxに影をつけるツールで、影の種類も複数揃っています。Shadow Styleから選択したら、座標やBlur等で調整しましょう。際立たせたいBoxがあるときには効果付けとして重宝します。Boxの高さ・幅も一緒に構成できてしまうので便利です。
10. CSS3 Text Shadow Generator - CSS3gen
http://css3gen.com/text-shadow/
テキストに影を付けてくれるツールです。触ってみていただくと分かりますが、タイトル等の演出を簡単に行うことが可能です。Blurを弱めに設定するだけで、テキストを重ねて表示する装飾も簡単です。
他にも、本ツールの下部では関連ツールが紹介されています。StartとEndを設定してアニメーションを作れるCSS3 Animationや、3Dの箱を作ることができるCSS 3D Transformなど、同じ操作感で色々なツールを触ることができるので、このサイトのツールに慣れると効率的かもしれません。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- 広告
- 広告とは販売のための告知活動を指します。ただし、広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの3要素を含む場合を指すことが多いようです。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
ツール紹介記事
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・サイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ解析・BI
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O・OMO
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- マーケティングお役立ちレポート
- Web接客・チャットボット
- Web会議
- 動画マーケティング
- フォーム作成
- CRM(顧客管理)
- ABM
その他のカテゴリ
