DreamweaverからCodaに変えました

Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか?きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです!


Codaの特徴を簡単に

coda

詳しい説明はリンクをクリックでジャンプします。

はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて!ちなみに私はCoda英語版をインストールしているため、スクリーンショットが全て英語版のものとなっています。

美しいビジュアル

Codaのインターフェイスデザイン

Dreamweaverはなんだかごちゃごちゃしたイメージがあるのですが…(私だけ?)、Codaのデザインはすっきりシンプル。Apple Design Awardにも輝いています!

 サイトのサムネイル画像

サイトのサムネイル画像。ペタッと貼り付けた感じがかわいい。

» CodaのWebサイトから体験版をダウンロード!

Codaの特徴 目次へ。

便利なプレビュー画面

画面を分割

Codaの最大の特徴(たぶん)として、自由に画面レイアウトを設定できる機能があります。Dreamweaverでも分割できるのですが、HTMLファイルを開いていたなら、そのコードビューとデザインビュー(WYSIWYGモード)のみ。CodaだとHTMLファイル・CSSファイル・プレビュー画面が一度に表示することができます。

Codaの画面レイアウト

右上の分割アイコンで分割。デフォルトでは横分割ですが、オプションキーを押しながらクリックすると縦分割できます。また、環境設定からオプションを押さなくても縦分割できるように設定できます。

↓分割する方法を簡単に説明。初めて動画を作った&Youtubeにアップした…どきどき。

コマンドキーと 1-6 でもモードを切り替えられます。コマンド+2、コマンド+3はエディターとプレビューを切り替えるのでとても便利!

いろんなブラウザーでチェック

ブラウザーチェック

プレビュー画面の右上にあるブラウザーアイコンを長押しするとプレビューするブラウザーを選択できます。し・か・も、VMWare Fusionをインストールしている場合、IEで確認もできます!(IEが起動します)詳しい方法は 「VMWare 上の Internet Explorer でプレビューする」が参考になります。

ホームにジャンプ

ツールバーの「サイト」にある 「ホームページを表示」を選択するとダイレクトに設定されたルート URL にジャンプ。何気に便利。

» CodaのWebサイトから体験版をダウンロード!

Codaの特徴 目次へ。

PHPやJavaScriptの動作確認も

JavaScriptの動作確認

プレビュー画面で、Dreamweaverではまったく表示されなかったPHPやJavaScriptの動作を確認しながら作業できます。jQueryも!動くんです!

追記: Dreamweaver CS4〜の「ライブビュー」機能を使うとPHP、JavaScriptの動作確認ができます。Adobeさん失礼しました!

PHPの動作確認

Hello World!PHPがうまく表示されない場合は「動的にローカルの内容をプレビューする 」が参考になります。

ブロック編集機能

複数行まとめてコメントアウト。オプションキーを押しながらドラッグするとブロック編集モードになり、行のはじめに文字を入力すると、選択された範囲のすべての行に同じ文字が入力されます。エスケープで解除。

» CodaのWebサイトから体験版をダウンロード!

Codaの特徴 目次へ。

素早いタグ打ちが可能

基本のタグ打ち

これはカスタマイズされたDreamweaverでは実現可能と言えますが、一応紹介。例えば<div>と打つと閉じタグも同時に挿入されたり、ヒントもスムーズに表示されます。

クリップを挿入

画面下の「クリップ」をクリックすると、よく使うフレーズやタグが表示されます。「挿入」をクリック、またはドラッグ&ドロップで挿入可能。自分で好きなタグを登録することもできるので、自分仕様にカスタマイズできます!

色をドラッグ&ドロップでWebカラー16進数の数値を表示

WordPressモード

Codaプラグイン WordPressモード

プラグインもいろいろでてます。Dreamweaverでいうエクステンションですね。こちらはWordPress用タグが簡単に挿入できるプラグイン「WordPress Mode」。書式もしくは画面左下のギアアイコンの 構文モード からWordPressを選択するとヒントが表示されるようになります。

Zenコーディング

Zenコーディングのプラグイン Tea for Coda

Zenコーディングのプラグインが「Tea for Coda」という名前で配布されています。F1キーで展開できます。Zenコーディングの詳しい使い方は「知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた」がわかりやすいです。

» CodaのWebサイトから体験版をダウンロード!

Codaの特徴 目次へ。

他にもFTPサーバーにアップロードするのが簡単!リファレンスブックを登録できる!ターミナルがついてる!値段もDreamweaverの49,875円に比べて格安です!15日間無料体験版があるので、ぜひ試してみてください!さよならDreamweaver!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)