読者です 読者をやめる 読者になる 読者になる

codes / cipher

文章置き場

オンラインHTMLエディタ色々 -CSSやJSも使える!-

スポンサーリンク

突然ですが質問です。あなたはタグ手打ち派ですか? それともWYSIWYG派ですか?
私は手打ち派です。どうしても、ワープロ型のエディタだと、余分なタグが付いたり文法の自動修正機能で予期せぬ改変がなされたりする場合があるので、少し知識のある人なら手打ちをこのむ人の方が多いのではないでしょうか。

ところが手打ちの悪い所として、当たり前なんですが「実際にブラウザでどう表示されるのかイメージしにくい」事があります。
また、Wordpressの本文編集画面だと、文字が小さかったりテキストエリアが十分に広くなかったりで、特にアフィリエイトリンク等を本文中に挿入するとなるとタグがごちゃごちゃしてしまってかなり編集が面倒です。
実際にはWPの場合はfunctions.phpを弄る事である程度見やすくしたりする事が出来るのですが、あまり素人向けではありませんし限界があります。

そこで何処でも使えるオンラインの編集ツールを探してみたところ、やはり需要はあるのか結構沢山見つかったので幾つか紹介していきます。

HTML Instant

www.htmlinstant.com

シンプルなHTMLエディタです。リアルタイムでプレビューに反映されます。
CSS等は使えませんが、簡単なタグ作成機能もあり、画面が広く使えるので私はこのエディタに大変お世話になっています。

Cssizer.com

Cssizer.com | Real Time CSS Editing

此方はCSS編集用ですがHTMLの方も編集できます。リアルタイムプレビュー有り。
HTMLとCSSの編集画面がタブ切り替え式なので画面が広いです。Twitterによるログイン機能はAPIが上手く動いていないのか使えませんでした。

scratchpad.io

Scratchpad - Realtime HTML and CSS Editor

此方もリアルタイムプレビュー/CSSに対応していますが、CSSエディタとHTMLエディタが分離しておらず、<style></style>CSSを編集する形になっています。
エディタがグレーの背景なので明るいのが苦手な人には良いかも?

Liveweave

liveweave.com

HTML5、CSS3、JavaScriptが使えます。リアルタイムプレビューもありますが、画面が4分割の為モニターが小さいと少し辛いかもしれません。
JSライブラリをワンクリックで組み込めるなど、多機能です。保存はログインすれば可能な模様(ログインしていないとsaveボタンでURLが生成されるものの再アクセスしても保存されていない)。

JSFiddle.net

jsfiddle.net

此方もHTML、CSS、JSを編集してプレビュー出来るツール。但しリアルタイムプレビューではなく毎回クリックしてプレビューを生成します。
このサービスの便利な所としてコラボレーション機能が使えます。ページ上部のリンククリックで共有用のURLが生成される仕組みです。

番外編

オンラインHTMLエディタ

asomin.net

此方はWYSIWYGエディタです。ソースコードを得られるので、少しWYSIWYGを使いたい時に覚えておくと便利だと思います。


(有料の)ホームページ作成ソフトだとソースが汚くなって私はあまり好きではありませんでしたが、最近はどうなんでしょうね。
今もやっぱりこれがメジャーなのかな。