Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス

Post on:2015年7月1日

sponsors

CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオンラインサービスを紹介します。

こういったコード生成は探せば見つかるかもしれませんが、まとまってると便利ですね。

各コードジェネレーターを簡単に説明します。

CSS3では、アニメーション、グラデーション、フィルター、背景、ボックスなどのコードを生成できます。

コード生成はこんな感じ。
対応ブラウザをはじめ、オプションを変更して自分用にカスタマイズしたコードが生成できます。

HTML5では、フォーム、動画や音声などのメディアファイル、HTML5の新要素などのコードを生成できます。

マイクロデータはGoogleによってサポートされた書式でコードを生成できます。

Metaタグはシンプルで、OGPやTwitterカードと併用してご利用ください。

データを入力するだけで、FacebookのOpen Graph Protocolのコードを生成できます。

TwitterカードもOGPと同様で、データを入力するだけでPhotoやSummaryなどのコードを生成できます。