複雑なコードは不要!簡単に使えるHTML/CSSジェネレーター22選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。

CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。

ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。

WAIT! Animate

waitanimate

http://waitanimate.eggbox.io/#/

CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。

Stylie

stylie

http://jeremyckahn.github.io/stylie/

複雑なアニメーションのCSSを生成してくれるサービスです。Keyframesを追加することで新しいパスを作れます。イージング調整や保存機能もあり非常に多機能なサービスです。

Single Element CSS Spinners

css-spinners

http://projects.lukehaas.me/css-loaders/

ローディングなどで使用される8つのスピナーのアニメーションのコードを取得できます。背景色とスピナーの色がカスタマイズ可能です。

FLEXY BOXES

flexyboxes

http://the-echoplex.net/flexyboxes/

flexboxのCSSを生成してくれるサービスです。flexコンテナのカスタマイズもできます。そのまま雛形としても使えますし、flexboxの仕組みを学びたい方にもおすすめのサービスです。

Colorful CSS Gradient Background Generator

colorful-background

http://www.webcore-it.com/colorful-background/#

背景のグラデーション用CSSを生成してくれるサービスです。細かい色の調整を手動でできますが、中心にあるボタンを押すことで別パターンのグラデーションを自動的に生成できます。

CSS GRADIENT ANIMATOR

css-gradient-animator

https://www.gradient-animator.com/

背景グラデーションのアニメーションCSSを生成してくれるサービスです。2種類以上の色を選択し、Previewボタンを押すことでアニメーションを確認できます。

Blend

blend

http://colinkeany.com/blend/

2つの色を選択しブレンドした背景色のCSSを生成してくれるサービスです。ブレンド方法は丸型と四角型の2種類あります。右上の四角形のアイコンのボタンを押すことで調整用のスライダーが利用できます。

FilterBlend

filterblend

http://ilyashubin.github.io/FilterBlend/

画像にbackground-blend-modeとfilterのプロパティの様々な値を試せるサービスです。画像はいくつも追加でき、自分の画像をアップロードすることもできます。

Patternify

patternify

http://www.patternify.com/

最大10x10のドットパターンの背景CSSを生成してくれるサービスです。生成された画像はBase64でエンコードされます。作成したパターンのURLを生成して共有することも可能です。

CSS Hexagon, Please!

csshexagon

http://csshexagon.com/

6角形のCSSを生成してくれるサービスです。カスタマイズも簡単で背景にWeb上の画像を適用できます。リアルタイムにプレビューを確認できるので非常に使いやすいです。

CSS3 Generator

css3generator

http://css3generator.com/

13個のCSS3の主要なデザインのコードを生成してくれるサービスです。フォームで入力した値がリアルタイムに反映され非常に使いやすいです。

2.5dBUTTON

2_5dbutton

http://noht.co.jp/2_5dbutton

フラットデザインなどで使えるボタンのHTML/CSSを生成してくれるサービスです。カスタマイズの項目も豊富でスライダーで値を調整するだけで簡単にボタンを生成できます。

CSSButton

cssbutton

http://cssbutton.me/

CSSボタンを生成してくるサービスです。hoverやactiveの状態のときのデザインやアニメーションもGUIを使ってカスタマイズできます。

CSS Button Generator

css-button-generator

http://www.bestcssbuttongenerator.com/

カスタマイズしたボタンのHTML/CSSを生成してくれるサービスです。40種類ものテンプレートが用意されており、そのテンプレートを自分好みにカスタマイズできます。

GRIDLOVER

gridlover

http://www.gridlover.net/

フォントのサイズや行間などを設定し見出しやパラグラフに関するCSSを生成してくれるサービスです。リアルタイムで変更が反映されるため、ページ全体のテキストのバランスを確認するのに便利です。

HTML Table Style Generator

html-table-style-generator

http://tablestyler.com/

カスタマイズしたテーブルのHTML/CSSを生成してくえるサービスです。行ごとに色を変更したり、行や列の高さや幅を簡単にカスタマイズできます。

Tridiv

tridiv

http://tridiv.com/app/

ブラウザ上で作成した3DモデルをHTML/CSSとして書き出せるサービスです。無料で使えるサービスとは思えないほど高機能です。生成したCSSはFireFoxやIEには対応していません。

csstypeset

csstypeset

http://csstypeset.com/

テキストに関するCSSを生成してくれるサービスです。下にあるGUIを使用してカスタマイズを行うと、左側のフォームに入力されたテキストがリアルタイムに変更されます。

CSS3 Generator

css3-generator

http://ds-overdesign.com/

シャドウ、アニメーション、フィルターなどのHTMLやCSSのコードを生成できるサービスです。カスタマイズの簡単でリアルタイムでプレビューを確認できます。画像用のフィルターを作りたいときに便利です。

coveloping { }

coveloping

https://coveloping.com/generators

開発を効率化する便利なジェネレーターが20個まとめられているサービスです。また、CSSやHTMLだけでなくQRコードやセキュアなパスワードなども生成できます。さらに有料会員になればテンプレートや57個のジェネレーターが使用できます。

CSS matic

cssmatic

http://www.cssmatic.com/

Border Radius、Box Shadow、グラデーション、ノイズパターンの4種類のCSSを生成できるサービスです。細かい調整も簡単にできます。

CSS Portal

cssportal

http://www.cssportal.com/

15個のCSSジェネレーターがまとめられたサイトです。ジェネレーターは画面上の「CSS Generators」のメニューから選択できます。このサイトには他にも便利な情報が豊富に掲載されているので、ブックマークしておくといいでしょう。


イベント

2017/12/05(火)
Design Thinking Square