私は数年前（10年くらい前？）に、WEB制作ツールをDreamweaverからCodaとEspressoに乗り換えました。
それまでDreamweaver CS6を使っていて、そのプレビューの不確かさと遅さが嫌になったからです。
HTMLコーディングやCSS設定は、Dreamweaverの機能に頼ることが多かった私ですが、CodaとEspressoの両方を使えば、スムーズに移行することが出来ました。
今ではこの2つのアプリケーションがなければホームページを作ることができません。
CodaとEspressoは仕事上必須のアプリケーションになりました。
どちらも有料のHTMLエディタ・CSSエディタですが、その対価にあまりある作業環境を提供してくれます。
Macユーザーにとって最適なWEB開発アプリケーションです。
Contents
Coda
CodaはPanic, Inc.が開発したHTMLエディタです。
参照 Coda（panic.com）
Codaで行うWEBサイトのコーディングは今まで使用したどんなHTMLエディタより高速でした。
さらにプレビュー、FTPなどの付帯機能も申し分ありません。
画面分割を工夫すればDreamweaverと同じような使い方もできます。
上の画面はHTMLコード、プレビュー、CSS、サイトファイルを画面分割で表示した場合です。
プレビューではJavaScriptやJQueryも実行されます。
このような見通しの良い作業環境が制作の効率を上げてくれます。
画面を横に分割する
上記の様に画面を横に分割する場合は環境設定を変更して下さい。
Dreamweaverとの比較
Dreamweaverの方が良い部分もあります。
それはプレビューで画像や文字を選択するとHTMLコードの該当箇所が分かりやすいということです。
しかし、この機能ゆえにソフトウェアの速度が遅くなっているような気もします。
Espresso
Codaだけでは満足できないのがCSSの編集です。
この点をサポートし、DreamweaverのCSSスタイルパネルと同様のわかりやすさを持ったアプリが、MacRabbitが開発したEspressoです。
現在はWarewolfが取り扱っています。
参照 Espresso（espressoapp.com）
Espressoの素晴らしさはCSS編集を行えば分かります。
プレビューから該当要素のスタイルを探すのも簡単です。
①プレビューボタンをクリック
②該当の要素をクリックすると要素に適用されているスタイル一覧がApplied Stylesポップアップに表示されます
※レスポンシブでCSSファイルを分割していても、このポップアップに一括表示してくれます。
③さらに要素のスタイルをクリックするとCSSが表示され編集可能になります。
CSS設定を変更してみます。以下の赤枠で縦に100pxを指定してみました。
リアルタイムで該当の要素がどうなるかを確認出来ます。
このCSS設定とプレビュー機能があれば、デザインするようにCSS設定ができるので便利です。
Coda＋Espresso
私は基本コーディングをCodaで行い、CSS設定をEspressoで行っています。
更新ファイルをセーブすればどちらのアプリも自動的に読み込んでくれますので、連携が可能なのです。
Codaだけ使っているというような場合はEspressoも導入してみてはいかがでしょうか？
by T.Y.
