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

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

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

サイトのキャプチャ

Web Code Tools

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

サイトのキャプチャ

CSS3 Code Generators

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

サイトのキャプチャ

CSS Animation Generator

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

サイトのキャプチャ

HTML5 Code Generators

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

サイトのキャプチャ

HTML5 Microdata Generators

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

サイトのキャプチャ

Meta Tags Generator

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

サイトのキャプチャ

Facebook Open Graph Generator

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

サイトのキャプチャ

Twitter Card Generator

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

top of page

©2017 coliss