ブラウザ上でHTMLを編集してすぐにプレビューできるWEBサービス「HTML Instant」

CでHTMLを作成して保存し、それをブラウザに読ませればどんな表示になるかを確認することはできます。しかし、いちいちPC上のファイルを編集してブラウザに再読込させるのが面倒なときもあるでしょう。そんな時に便利なのがHTML Instantというサービスです。

もくじ

  • 「HTML Instant」の概要
  • 使い方

「HTML Instant」の概要

HTML Instant」は、ブラウザ上でHTMLを打ち込むと即座にプレビューしてどのように表示されるかを確認することが出来るWEBサービスです。PCにHTMLファイルを保存して表示を確認するのが面倒な時・不可能な時などに便利です。また、一部のタグについては入力支援機能もついています。

使い方


HTML Instantにアクセスすると、こんな風に2つに別れた画面が表示されます。左側にHTMLを入力すると、右側にはHTMLをブラウザが解釈した結果(普段我々がブラウザを通じてWEBページとしてみているもの)が表示されます。なお、画面を2つに仕切っているバーをドラッグするか、バーの中央部にある青・赤・緑のボタンを押すことでHTML入力画面(左側)とHTML描画画面(右側)の割合を変更できます(青:入力画面100% 赤:入力画面と描画画面が半分ずつ 緑:描画画面100%)


画像を表示させるHTMLタグを書き込めば、画像もきちんとプレビューされます。

また、HTML入力画面の上方には様々なHTML入力支援ボタンがあるので、これを使えばHTML入力作業を楽に行うことが出来るでしょう。各ボタンで出来ることは左側から、

  • 太字の「B」:<strong></strong>タグ(重要なテキストを強調)の入力
  • 斜体の「I」:<em></em>タグ(強勢・アクセントを付ける)の入力
  • アンダーライン付きの「U」:<ins></ins>タグ(追加された部分であることを示す)の入力
  • 打ち消し線が引かれている「abc」:<del></del>タグ(削除された部分であることを示す)の入力
  • チェーンのようなアイコン:ハイパーリンク(<a href=””>)の作成
  • 画像のアイコン:画像を表示させるタグ(<img src=””>)の作成
  • 箇条書きのアイコン:順不同リスト(<ul></ul>及び<li><li>)の作成
  • 頭に数字が書かれた箇条書きのアイコン:順序リスト(<ol></ol>及び<li><li>)の作成
です。また、一番右側のボタンを押すとHTMLのテンプレートやHタグなどを入力できるボタンが出てきます。

このブログを応援する・寄付する

当ブログでは暗号通貨による寄付を募っております。

モナゲボタン モナゲボタン

Bitcoin:

Monacoin:

Litecoin: