WebCodeToolsでHTMLやCSSを自動生成する!

サイトを作る時に必須なのがHTMLやCSSだけど、「自分で書くの面倒だなあ・・・」とか「あれ、あれどうやって書くんだっけなあ・・・」なんて作っている時に思ってしまいますよね。そんな時に毎回調べて書くと思うんだけど、毎回やるのは結構面倒。だったら最初から自動化されているものを使ってしまえばいいのではないか?みたいなところもあります。

Web Code ToolsはそんなHTMLやCSSを入力によって自動で生成してくれるやつ。まあ使ってみないとなんとも言えないから早速やっていこう。

ちなみにいや、コードほとんど触りたくないわ!っていう場合にはノーコードのツールなんかを使うのもいいですね。

HTMLやCSSを生成してくれるWeb Code Toolsとは

いくつかのツールがあって以下のものがある。

  • CSS Generator
  • HTML Generator
  • JSON-LD Generator
  • Meta Tags Generator
  • Open Graph Generator
  • Twitter Card Generator

それぞれ値を入力するだけでコードを作ってくれるGenaratorなんだけど、例えばHTMLならこんな感じ。input要素だけどNameやPlaceholder、Sizaなんかをいじって自分好みのタグにしていくことができる。

これはinputだけど、種類はたくさんあるから結構いろんなものが作れるはず。

HTMLよりもCSSなんかの方がもしかしたら嬉しいかもしれない。特にこういうアニメーション関連はコードいちいち書いて確認していくのは面倒だからいいね。

なんかこういうの見ていると知らないの結構ある。色々いじってみるとCSSこんな指定できたんだあ・・・みたいな発見があって面白い。コード上だといちいちタイピングしないといけないから簡単に試せないけど、これなら画面ぽちぽちすれば確認できるから良き。

よく使いそうなのはHTMLとCSSだけど、他のJSON-LDやMeta Tagsなんかも軽く見てみましょうか。

JSON-LD(Schema.org)

どうやらJSONを作ってくれるものらしい。これもいろんな要素があるけど、いろんなものをJSON形式で作ってくれますね。

Meta Tags

まあmetaタグですね。そんなにバンバン使うものじゃないと思うから使う機会は少なそうだけど、metaタグの書き方忘れた・・・となって忘れるだろうからコピペできるのはありがたい。

Open Graph

これはOGPかな?TwitterやFacebookなんかのSNSでシェアされた時に正しく情報を伝えるためのものですね。なんか色々ある。

Twitter Card

Twitter Cardっていうのもありますね。

TwitterでURLを共有した時にちゃんと情報を伝えられるようにするもので、こういう風にTwitterでの表示に関連するかな。

こんなのも用意されているなんて中々良いですね。雛形忘れたらとりあえずコピペして持ってきてあとは調整していくっていう感じが良いかもしれない。

まとめ

WebCodeToolsはHTMLやCSSを自動で作ってくれる便利なやつ。それ以外にも作れるものはあるけど、使うものはHTMLとCSSが多そうですよね。コード書くの面倒だなあ・・・とか書き方忘れた・・・なんて時に使ってみると結構使えるんじゃないかなーと思います。

コード書く時って毎回調べる人多いと思うから、とりあえずブックマークしておいてコード書く時にさっとコピペしてくるっていうのが良さそう。

おすすめの記事