CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
Post on:2017年5月30日
CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmicrodataやMetaタグなどのコードを簡単に生成できるオンラインツールを紹介します。
コードごとに対応ブラウザも表示されるので、かなり便利です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053002.png)
CSS3のコードを生成
CSS3では、アニメーション、グラデーション、フィルター、背景、ボックスなどのコードを生成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-01.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-02.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-03.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-04.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-05.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-06.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-07.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-08.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-09.png)
HTML5のコードを生成
HTML5では、フォーム、動画や音声などのメディアファイル、HTML5の新要素などのコードを生成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-10.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-11.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-12.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-13.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-14.png)
OGP, Twitterカード, Metaタグのコードを生成
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-15.png)
データを入力するだけで、FacebookのOpen Graph Protocolのコードを生成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-16.png)
TwitterカードもOGPと同様で、データを入力するだけでPhotoやSummaryなどのコードを生成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-19.png)
Metaタグはシンプルで、OGPやTwitterカードと併用してご利用ください。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017053003-17.png)
マイクロデータはGoogleによってサポートされた書式でコードを生成できます。
sponsors