CSSの変更がプレビューで直ちに反映されるとっても便利なCSSEditの使い方

友人に勧められるまま、今年の5月に購入した”Espresso”と”CSS Edit”。自分のプログラムを組むようになってからEspressoは毎日使うようになった。でも、CSS EditについてはCSS自体の勉強をしていなかったので、たまにCSSを使う際にはEspressoを使って済ませていた。

しかしここ最近、PHPでサイトをつくることについては、今の時点で自分がやりたいとおもっているレベルはなんとか表現できるようになったので、次のステップはCSSを勉強しビジュアル面を強化したいと思っている。

そんなこんなで、CSSEditも合わせて使い始めた。

で、使ってみて一番感動したのは、CSSを変更するとサイトのプレビューにリアルタイムで反映されること。1pxにするか2pxにするかも、即座に確認できるので、これはすごい便利だ。

ただし、CSSEditの使い方を説明しているサイトが少ないので、自分でわかった範囲だけでも、今後はブログでアップしていきたいと思う。

ちなみに、最初に参考にさせていただいたサイトはこちら、

CSSEditの使い方 | アプリケーション | sakulog


ということで、私なりのCSS Editの使い方

CSSEditStudy

まずは、CSS Editを立ち上げたら、編集したいCSSファイルを選択する。もし、新しくつくる場合は、空のCSSファイルのみを作成してそれを選択。

test01

次に右上にあるPreviewのボタンを押す。

Preview

Previewを押しても、反映させるhtmlファイルが指定されていないので上の様な画面になる。なので、ここで、CSSを反映させるhtmlファイルをAdd Fileというボタンをおして選択する。

Herb Kitchen-オリジナルレシピ

すると、このhtmlファイルに最初選択したCSSファイルの内容が適用されたプレビューが表示させる。ここで、CSS Edit上でCSSを変更・追加すると、直ちにPreview画面にその内容が反映。だから、CSS Editを使う場合は、CSSファイルとプレビュー画面が同時にみれるように、マルチディスプレーでやるとかなり効率があがる感じです。

とりあえず、自分でわかったのはこの辺まで。もっともっと便利な機能はありそうですが、それはわかった時にブログにアップしていきます。

ちなみに、CSS EditとかEspressoのユーザー会とかオフ会とかあったらぜひ出たいので、どなたかご存じでしたら、ぜひ、おしえてください!

あと、CSSの勉強にはこの本を使っています。とってもわかりやすくて、今まで理解できなかったCSSがすんなり頭にはいるようになりました!