Adobe Edge Code CCを使ってみた その1

シリーズ物は全く続いた事がありませんが、タイトルをシリーズ化しました。
今回、新しいHTMLエディタは無いかと探していたところ、
「そういえば1年前にAdobe Edgeとかいうのが発表されてたな」というのを思い出しまして、
早速インストールしてみました。

現在チュートリアルを見ながら操作方法を学んでいます。
ローカライズされていないため、ちょっととっつきにくい印象はありますが、
操作を覚えてしまえば、意外と便利かもしれないなと思いました。

取りあえず、チュートリアルの動画で学んだ内容を3つほどご紹介します。

まずはこちらがEdge Code CCの画面です。

いたってシンプルな画面構成です。
英語なのが難点ですが、慣れてしまえば問題なさそう。

■機能1　Live Preview
画面右上の稲妻のようなアイコンをクリックすると、Chromeと連携してプレビュー表示してくれます。

■機能2　ハイライト表示
タグやクラス名をクリックすると、Live Previewで表示された画面の対象箇所がハイライト表示されます。

■機能3　お手軽CSS編集
Live Previewではほぼリアルタイムに更新内容が反映されていきます。
CSSも同様ですが、今までのように「別ファイルを開いて、対象のタグ（クラス）を探して・・・」
という作業が必要無くなりました。

編集したいCSSと関連付けされているタグ、もしくはクラス/IDをクリックし、
「Ctrl + E」で直接CSSが編集可能になります。
これが非常に使えそうで期待しています。

まだチュートリアルの途中ですが、ここまででも無料で十分な機能を持ったエディタではないでしょうか！