> 記事 > WordPress プログラミング > リアルタイムHTMLエディタ

リアルタイムHTMLエディタ

2013.09.25.(Wed)Masahiro Natori By.Masahiro Natori
カテゴリー:WordPress プログラミング

こんにちは、Masaです。みなさん、お元気でしょうか?

ここパースは相変わらず、毎日のように雨に見舞われています。

雨だけでなく強風伴ってストームとなる場合が多く、

風の音、塀がミシミシ言う音でなかなか夜眠れなかったりします。

(今住んでいるのが造りが古い家なので、隙間風も・・)

ただ、聞いたところではこの時期を過ぎるとまったく雨が降らないようなので、

しばしの我慢ですね。

 

今日は、とても便利なサイトを発見したのでご紹介しようと思います。

最近はWebサイトを作成するときにもWordPressなどの

CMS(コンテンツマネジメントシステム)の発達により、裏にあるHTMLを書かな

くてもウェブサイトが作成できるようになって来ましたが、やはり、細かいところ

(特にレイアウトなど)はHTMLなりCSSなりのコードを手作業で修正する方が

簡単にできたりします。

 

例えば今回、とある固定ページに、<div>で灰色の四角いボックスを作成する

必要があったのですが、このようなときに、ボックスの色、マージン、パディング、枠線、

などの調整をどのような方法で編集するのがよいか、ということが自分の中で

ずっと課題でした。

 

これまでは、ローカルPC上に仮のHTMLファイルを作成し、エディタで編集し、

ブラウザでそのファイルを開く・・というような作業をしていました。

しかし、この方法だと、エディタとブラウザ、それぞれのウインドウを

行き交う必要があります。

もっと楽に、できればコードを書くとリアルタイムで

その結果が表示されるようなものがほしいと思いました。

 

イメージ的には「Google翻訳」です。

左側のペインに日本語を書いて行くと、リアルタイムに英語に

翻訳されたものが表示されたり、

google翻訳2

もちろん、英語を書いて日本語を表示させることも可能です。

これは、英語のWriting(英作文)をするときに参考になります。

(あくまで参考・・)

google翻訳

例えば、自分が英語で作成したい文章があったときに、

左側のテキストボックスに英語を入力してそれが自分の

いいたい文章とニュアンスが近いものが表示されるか、

という確認をしてます。

 

話が脱線しました。このように、HTMLコードを記述すると、リアルタイムで

HTMLイメージが反映されるものを発見しました。

 

それが、「HTML Instant 」です!

アクセスすると、このような画面がでてきまして・・

htmlinstant1

左側の画面にHTML(あるいはCSS)を書いて行くと、

htmlinstant2

このように、そのコードをブラウザで表示した場合のイメージが

リアルタイムに表示されました。

この便利さ、なかなかのものです。

・・実は作業用PCにはDreamWeaverが入っているので、

そっちを使えばもっと簡単だということに後から気づいたのですが。

Masahiro Natori

Masahiro Natori
こんにちはMasaです。39歳の時に16年勤めた会社を辞め、2013年4月に家族で日本からパースに引っ越してきました。2013年6月よりGITSに勤務。2014年1月にGITSのサポートでProgrammerとして457ビザを取得。 趣味は音楽を聴くことと、部屋のレイアウトを変えること、ドライブすること。
  • facebook
  • twitter