今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。
CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。
ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。
WAIT! Animate
http://waitanimate.eggbox.io/#/
CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。
Stylie
http://jeremyckahn.github.io/stylie/
複雑なアニメーションのCSSを生成してくれるサービスです。Keyframesを追加することで新しいパスを作れます。イージング調整や保存機能もあり非常に多機能なサービスです。
Single Element CSS Spinners
http://projects.lukehaas.me/css-loaders/
ローディングなどで使用される８つのスピナーのアニメーションのコードを取得できます。背景色とスピナーの色がカスタマイズ可能です。
FLEXY BOXES
http://the-echoplex.net/flexyboxes/
flexboxのCSSを生成してくれるサービスです。flexコンテナのカスタマイズもできます。そのまま雛形としても使えますし、flexboxの仕組みを学びたい方にもおすすめのサービスです。
Colorful CSS Gradient Background Generator
http://www.webcore-it.com/colorful-background/#
背景のグラデーション用CSSを生成してくれるサービスです。細かい色の調整を手動でできますが、中心にあるボタンを押すことで別パターンのグラデーションを自動的に生成できます。
CSS GRADIENT ANIMATOR
https://www.gradient-animator.com/
背景グラデーションのアニメーションCSSを生成してくれるサービスです。２種類以上の色を選択し、Previewボタンを押すことでアニメーションを確認できます。
Blend
２つの色を選択しブレンドした背景色のCSSを生成してくれるサービスです。ブレンド方法は丸型と四角型の２種類あります。右上の四角形のアイコンのボタンを押すことで調整用のスライダーが利用できます。
FilterBlend
http://ilyashubin.github.io/FilterBlend/
画像にbackground-blend-modeとfilterのプロパティの様々な値を試せるサービスです。画像はいくつも追加でき、自分の画像をアップロードすることもできます。
Patternify
最大10x10のドットパターンの背景CSSを生成してくれるサービスです。生成された画像はBase64でエンコードされます。作成したパターンのURLを生成して共有することも可能です。
CSS Hexagon, Please!
６角形のCSSを生成してくれるサービスです。カスタマイズも簡単で背景にWeb上の画像を適用できます。リアルタイムにプレビューを確認できるので非常に使いやすいです。
CSS3 Generator
13個のCSS3の主要なデザインのコードを生成してくれるサービスです。フォームで入力した値がリアルタイムに反映され非常に使いやすいです。
2.5dBUTTON
フラットデザインなどで使えるボタンのHTML/CSSを生成してくれるサービスです。カスタマイズの項目も豊富でスライダーで値を調整するだけで簡単にボタンを生成できます。
CSSButton
CSSボタンを生成してくるサービスです。hoverやactiveの状態のときのデザインやアニメーションもGUIを使ってカスタマイズできます。
CSS Button Generator
http://www.bestcssbuttongenerator.com/
カスタマイズしたボタンのHTML/CSSを生成してくれるサービスです。40種類ものテンプレートが用意されており、そのテンプレートを自分好みにカスタマイズできます。
GRIDLOVER
フォントのサイズや行間などを設定し見出しやパラグラフに関するCSSを生成してくれるサービスです。リアルタイムで変更が反映されるため、ページ全体のテキストのバランスを確認するのに便利です。
HTML Table Style Generator
カスタマイズしたテーブルのHTML/CSSを生成してくえるサービスです。行ごとに色を変更したり、行や列の高さや幅を簡単にカスタマイズできます。
Tridiv
ブラウザ上で作成した3DモデルをHTML/CSSとして書き出せるサービスです。無料で使えるサービスとは思えないほど高機能です。生成したCSSはFireFoxやIEには対応していません。
csstypeset
テキストに関するCSSを生成してくれるサービスです。下にあるGUIを使用してカスタマイズを行うと、左側のフォームに入力されたテキストがリアルタイムに変更されます。
CSS3 Generator
シャドウ、アニメーション、フィルターなどのHTMLやCSSのコードを生成できるサービスです。カスタマイズの簡単でリアルタイムでプレビューを確認できます。画像用のフィルターを作りたいときに便利です。
coveloping { }
https://coveloping.com/generators
開発を効率化する便利なジェネレーターが20個まとめられているサービスです。また、CSSやHTMLだけでなくQRコードやセキュアなパスワードなども生成できます。さらに有料会員になればテンプレートや57個のジェネレーターが使用できます。
CSS matic
Border Radius、Box Shadow、グラデーション、ノイズパターンの４種類のCSSを生成できるサービスです。細かい調整も簡単にできます。
CSS Portal
15個のCSSジェネレーターがまとめられたサイトです。ジェネレーターは画面上の「CSS Generators」のメニューから選択できます。このサイトには他にも便利な情報が豊富に掲載されているので、ブックマークしておくといいでしょう。
