(X)HTML/CSS関連の記事が続きましたが，今回と次回の記事では私自身も仕事で活用している，なくてはならないアプリケーション・あると便利なツールを，オンラインツール・デスクトップアプリケーション問わずご紹介します。

今までいろいろなアプリケーション・ツールを試してきている中で，長く使っていて本当に便利だと感じたものかつ，仕事で実際に活用しているもののみを厳選しています。ぜひチェックしてみてください。

なお今回は，テキストエディタ・ブラウザなどの基本的なツールを中心に紹介していきます。

テキストエディタ

簡単な文書を書いたり，一時的なメモをするために気軽に立ち上げられるツールでもあり，HTMLやCSS・各種CMSのテンプレートなどを書くための必須ツールでもあります。

高価なオーサリングソフトを使わなくても，小規模なサイトのHTML/CSSであればこれだけで十分と思えるほどです。

skEdit（Mac）

FTPだけでなくSFTPでもサーバに直接アクセスできるエディタです（エディタだけでサーバにアップロードされているファイルを直接さわることができるため，FTPクライアントを別途必要としなくなります。ただし，サーバでバージョン管理をきちんと行っている環境であることが望ましいです）。タグ補完機能も優れています（HTML・CSS・JS・その他プログラミング言語やMovableTypeのテンプレートのタグも補完してくれます）。そのほか，さまざまなスニペットがあり，コーディング作業を効率化できます。環境設定で文字コード・改行コード・スペース/タブの利用などが設定できます。

mi（Mac）

skEditが環境設定で文字コード・改行コードを設定できるのに対して，個別のファイルごとに文字コード・改行コードを簡単に指定できるところが優れています。UTF-8のBOM検知や，保存時にBOMの有無を選択できる機能など，設定できる内容が豊富です。

秀丸エディタ（Windows）

私自身全ての機能を使いこなせていませんが，長く多くの人に使われているエディタというだけあって機能が豊富なだけでなく軽快な動作で使いやすいです。

ブラウザ

ブラウザはWebデザイナーの仕事をする以上，あらゆる環境で動作チェック・レンダリングチェックを行わなければならないので必須です。

Firefox（Windows/Mac）

バージョン3になってより快適になりました。なんといっても，さまざまな機能を追加できるアドオンが豊富です。ただし，バージョン3では動作しないアドオンもあるため，プロファイルを分けて複数バージョンのFirefoxを共存させています。開発・デザイン用としてはメインブラウザになっています。

IE tester（Windows）

IE5.5/IE6/IE7/IE8 beta1の動作確認を一つのソフトでできるアプリケーションです。少々重たく感じられますが，一つのアプリケーションでこれだけのバージョンをカバーできるので重宝します。

Opera（Windows/Mac）

コピーしたURLを「貼り付けて移動」できるところがとても便利です。レンダリングも速いです。head要素内に含むlinkナビゲーションを表示することもできるところも良いですし，WiiやSmart Phoneのブラウザとしても使われているところも注目すべきところです。

Safari（Windows/Mac）

Macに最初から入っているブラウザなので，動作確認として必須環境なのはもちろんですが，ブラウザとしても速くて快適です。Firefoxのバージョンがあがり，Mac版Firefoxでも十分満足なのですが，SafariではMac OS X標準・ヒラギノファミリのフォントでボールド表示する際に，W6（ウエイトが太いフォント）でレンダリングされることで見た目の美しさの満足度が高まるため，プライベートではSafariがメインになっています。ただし，WindowsのSafariで閲覧すると，デフォルトでアンチエイリアスのかかったMSゴシックで表示されてしまうため違和感を覚えます。

ブラウザの古いバージョンを入手したい場合は，OLD Appsのようなアーカイブサイトを利用するのも一つの方法といえます。
※古いバージョンはセキュリティホールを含むものも多くあるものと思います。自己責任の範囲内でご利用ください。

ブラウザのブックマークレットから起動するツール

Mouseover DOM Inspector

Firefox以外のブラウザでもDOM解析を簡単に行うことができるツールです。このツールを起動してウェブページの任意の場所にマウスカーソルをあてると，あてた場所の要素名・幅・高さ・座標・親要素の名前・子要素の名前が一覧表示されます。特にCSSでボックスの幅と高さを知りたい場面などで重宝します。

Firefoxアドオン

アドオンは紹介しきれないほどたくさんの便利なものがありますが，ここでは「仕事で使っている」ものに絞り込んでみました。

Firebug

閲覧中のHTML/CSS/JavaScriptを解析・リアルタイム編集できます。CSSで継承されている値・上書きされている値なども一目瞭然です。デバッグに欠かせないツールだと思います。

Web Developer（英語版／日本語ローカライズ版）

Firebugとは違った角度で必要な機能があるため，Firebugと併用しています。Cookieの制御・フォームの入力内容の制御・CSSごとの読み込み選択・バリデータの起動などを行えます。

Pearl Crescent Page Saver Basic

閲覧中のページのスクリーンショットを撮ることができるツールです。ページ全体のスクリーンショットを撮ったり，現在のウインドウの内容を撮ることができます。デザインのモックを作る際に，下地としてスクリーンショットを活用することがあるためこのツールはよく活躍します。

S3 Firefox Organizer（S3Fox）

Amazon S3にアップロードするためのツールです。単独のソフトとしてありそうな機能がアドオンとして提供されています。ブラウザを開きながら，隅にFTPクライアントが立ち上がっているようなイメージで使えます。

YSlow

前回の記事でも紹介しましたが，サイトのパフォーマンスをチェックするツールです。このツールを使うためにはFirebugのインストールが必須です。

Live HTTP Headers

文字通りHTTPヘッダを見ることができるツールです。ウェブサーバとブラウザのやりとりがリアルタイムでわかります。