<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/05/webcode-tools.png" alt="" width="592" height="309" class="alignnone size-full wp-image-30970" /></p>
<p>サイトを作ったり、改善しているときに、HTML5やCSS3、あるいは構造化マークアップを追加するためにMicrodataやJSON-LDを書いてリッチスニペットに対応するようなシーンも多くあるかと思います。</p>
<p>リソースが潤沢であれば、こういった作業も進めやすいのでしょうが、リソースが不足しているならばなるべくこういった作業を気軽にサクッと行いたいですよね。</p>
<p>今回は、そんなときに役立ちそうな、コードのジェネレーターをご紹介します。</p>
<!--more-->


<h3 class="header-label">HTML5やCSS3、メタタグなどのジェネレーター「Web Code Tools」</h3>
<p>「<a target="_blank" href="https://webcode.tools/">Web Code Tools</a>」は、<strong>HTML5やCSS3、メタタグやOpen Graphなど、ウェブサイトに使われる各種コードを生成</strong>してくれるWEBツール。</p>
<p>日付やメールアドレスの入力タグやレシピ、イベントの構造化マークアップをするためのJSON-JD等々、形式の決まったテンプレートに基づいて実装するコードを、必要最低限の情報を入力することで生成することができます。</p>

<h4 class="tips">各種コードを生成</h4>
[caption id="attachment_30969" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/webcode-tools-html5.png" alt="" width="592" height="308" class="size-full wp-image-30969" /> HTML5のジェネレーター一覧。[/caption]
<p>対応しているコードは以下の8種類。</p>
<ul><li>CSS3</li><li>HTML5</li><li>Microdata</li><li>JSON-LD</li><li>Meta Tags</li><li>Open Graph</li><li>Twitter Card</li><li>ファイル名（MP3の曲名やトラック番号など）</li></ul>
<p>たとえばHTML5であれば、入力フォームまわりやリッチメディアの埋め込みコード、プログレスバーなどといった少し特殊なコードも簡単な操作で生成することができます。</p>
<p>WordPressでプラグインを使いがちなOpen Graphのタグを生成できるのもうれしいですね。</p>

[caption id="attachment_30968" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/webcode-tools-html5-date-time.png" alt="" width="592" height="256" class="size-full wp-image-30968" /> 日付入力フォームの生成。[/caption]
<p>生成するタグに対応していないブラウザも明記。必要最低限の情報を入力することで、右側にコードを生成。これをコピーして使うことができます。</p>

[caption id="attachment_30967" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/webcode-tools-html5-list.png" alt="" width="592" height="284" class="size-full wp-image-30967" /> ひらがなのリストスタイルを生成。[/caption]
<p>ひらがなやカタカナのリストスタイルなどといったマニアックなコードの生成もできます。</p>

[caption id="attachment_30966" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/webcode-tools-css3-gradient.png" alt="" width="592" height="247" class="size-full wp-image-30966" /> 背景色のグラデーションCSS。[/caption]
<p>背景色のグラデーションCSSも生成してくれます。</p>

[caption id="attachment_30965" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/webcode-tools-css3-box-shaddow.png" alt="" width="592" height="347" class="size-full wp-image-30965" /> Box Shadowの生成。[/caption]
<p>Box Shadowも生成できるのは何気に助かりますね。</p>

<p>その他にもCSS3では角丸やカラムレイアウト、テキストシャドウなどといった、普段使いのジェネレーターも完備しています。</p>

<p>興味がある方は<a target="_blank" href="https://webcode.tools/">Web Code Tools</a>へどうぞ。</p>
