編集中のソースをプレビューできるHTMLエディター「AmBuilder」

非常にシンプルなHTMLの編集ソフトです。内部にプレビュー機能を持つだけではなくて、WYSIWYG編集（ページを見たまま編集できる）機能も備えています。タグの挿入機能は一般的ですが、見た目もシンプルなので非常に使いやすいと思います。詳細は続きで。

AmBuilder の使い方

最初からHTMLファイルを作成していくのも良いですが、今回は元々あったHTMLファイルを編集していきたいと思いますので、ツールバー上の「開く」アイコンか、「ファイル⇒開く」として、目的のHTMLファイルを選択してください。

↓
HTMLが本体ウィンドウ内部の子ウィンドウとして開かれますので、編集のしやすいように最大化ボタンを押されることを奨励いたします。こうするとことで、子ウィンドウがいっぱいに広がって作業スペースが広がります。

↓
さて。まずは自分の編集のしやすい環境に設定しましょう。「表示⇒エディタの設定」としてください。ここから、HTMLのタグを編集するエディタの文字色や、フォントの設定を行えます。

↓
ここから、エディタの要素ごとの色を変更できます。自分が分かりやすいように、見やすいように設定を行えば、自然とHTMLの編集効率が上がるうえに、要素ごとのまとまりが一目で分かります。

↓
続いては、外観の設定です。「表示⇒ウィンドウの外観を変更する」からお好きなテーマをお選びください。若干ですが、ウィンドウの外観が変わります。個人的には、「Office 2000」が好きなテーマでした。

↓
好きなテーマを選んだら、「表示⇒現在のウィンドウを変更する⇒「エディタの設定」で変更されたオプションを反映」としてください。こうすることで、先ほど変更したテーマが反映されます。

↓
では、いよいよタグの編集に入っていきます。ここでは全てを説明することは出来ません。基本的な挿入タグは「挿入」項目から選ぶことが出来ます。ちなみに、エディタ上を右クリックしても「挿入」操作は出来ます。今回は「画像」を選択しました。

↓
そうすると、このように挿入する画像を選択する画面が出てきます。自動的に相対パスに変更されますので、面倒なことを考えずに挿入することが出来ます。もちろん、同じパスでFTPアップロードするしかありません。

「サイト」ディレクトリに元々のHTMLファイルがあったとします。その「サイト」ディレクトリ内部の「画像」フォルダの「画像.png」を選択した場合、その「画像.png」だけをアップロードするのではなくて、「画像」フォルダごとアップロードするということです。

「サイト/画像/画像.png」を挿入したい場合、「画像」フォルダごとアップロードしなくてはならないということです。私の説明は非常に分かりにくいものがあると思いますので、混乱してしまった場合は、綺麗サッパリお忘れください。
↓
さて。続いてユーザー独自のタグ設定機能です。「挿入⇒ユーザ定義タグ・定型文⇒登録/編集」としてください。こうすることで、自分が好きなタグの定型を簡単に挿入できるようになります。

↓
定型登録画面が出てきたら、まずは「開始タグ・定型文」に項目を入力しましょう。タグを選択した場合は、「終了タグ」も指定しなければなりません。開始タグと対応した終了タグを入力しましょう。

↓
先ほど登録した定型は、「挿入⇒ユーザ定義タグ・定型文⇒先ほど登録した際の名前」で挿入できます。この定型を上手く利用することで、HTMLの編集作業の効率が格段にアップします。

↓
上のタブの「プレビュー」を押すことで、現在のHTMLのプレビューが可能です。プレビューは、デフォルト設定だとIEのレンダリングを利用します。すぐにプレビュー可能という点が、非常に良いですね。

↓
続いて「ページ編集」タグですが、こちらのタブ内部では直接的にページの編集が可能になります。HTMLについてよく分からないという場も、この機能を使えば非常に簡単にHTML編集が可能になります。