Webデザインの質を高める：HTMLとCSSコードを美しく整理する方法

Web開発には大きく分けて2つのアプローチがあります。1つはテキストエディタを使う方法、もう1つはGUIエディタを使う方法です。

テキストエディタ方式は、主に上級者向けの手法です。コードを深く理解し、自分が何を作りたいか明確で、視覚的な補助なしでもページを構築できる開発者が選びます。Vim、Emacs、Notepad++、Kateなどのテキストエディタで作業し、完成度を確認したくなったときだけブラウザでページを読み込みます。このアプローチはミニマルで効率的ですが、そのぶん難易度も高いのが実情です。

WYSIWYGエディタの落とし穴

一方、多くの人が利用するのはGUIエディタ方式です。コードをユーザーから隠して、コンテンツ制作に集中できるようにするプログラム、いわゆる「Webエディタ」を使います。これらの多くは「WYSIWYG（What You See Is What You Get／見たままが得られる）」方式に分類され、エディタ画面に表示される内容が最終結果と一致します。KompoZer、Dreamweaver、Quanta、Bluefishなどが代表的な存在で、ブロック遊びのような感覚でページを作れる手軽さが魅力です。WYSIWYGエディタはテキストエディタより格段に扱いやすい反面、効率では劣ることが多いのです。

そして最大の問題点は、余計な「ゴミ」を大量に残すことです。

テキストエディタで作業すれば、ファイル内のコードはすべて自分が書いたものです。ところがWebエディタは、自動生成されたメタフィールドや自己宣伝的なコメント、不要な改行や空白を平気でコードに混ぜ込むため、意図以上にファイルサイズが肥大化しがちです。

この余分なデータを気にしない人も大半でしょう。しかし、クリーンで整然としたスパルタンなスタイルでWeb開発を行いたい、それでもGUIエディタの利便性は手放したくない——そんな方には、コードをスマートに保つためのツールがあります。

それが「lint／tidyユーティリティ」と呼ばれるツール群です。HTMLや関連ファイルの出力をより小さく、よりクリーンで、整ったレイアウトに仕上げてくれます。本記事では、私自身が実際に使っているものを中心に、これらのユーティリティをご紹介します。コレステロールゼロのエレガントなWeb開発を、あなたも体験してみましょう。

HTML Tidy

HTML Tidyは、おそらく最も有名なHTML整形ユーティリティです。この小さなプログラムはコードに驚くべき効果をもたらし、不正なHTMLの修正、余分な空白文字の削除、最終的なマークアップのレイアウトやインデントの改善などをサポートします。

主要なOSすべてで利用可能です。さらに、多くのWebエディタは自前のGUIからTidyを実行できるため、作業とコード管理を同時に行えます。

以下はLinux Mint 6 Felicia上のBluefishでの例です。

こちらはWindows XP上のKompoZerにおけるTidy設定の例です。

この2つの優れたWebエディタについては、関連記事もぜひご覧ください。人気のWindows用テキストエディタNotepad++にはTidyプラグインが標準搭載されているため、エディタから離れることなくコードを整形できます。

Tidyの動作例を見てみましょう。空のテキスト文書に数語書いて、Tidyを実行してみます。Tidyは出力を美化するだけでなく、欠けている必須のHTML（XHTML）タグを補完し、適切なインデントまで作成してくれます。

処理前：

処理後：

さらに、HTMLからXHTMLへの変換、XMLへの変換や再インデント、折り返し設定、さらにはMicrosoft Word文書のクリーニングまでも可能です！

基本的にTidyはコマンドラインユーティリティです。「tidy filename.html」のように対象のHTMLファイルを指定して実行するだけです。ただし、拡張子以外のドットや空白がファイル名に含まれていると、正常に動作しない場合があります。これは一般的な「良い」コーディング規約にも合致する話ですね。

同様に、Webエディタ内からTidyを呼び出した場合、設定によっては発見された不整合・エラー・警告の一覧を詳細なレポートとして受け取れます。Bluefishならこの機能を利用できます。

Tidyの入手方法

Tidyにはさまざまな形態があります。最新情報は公式サイトが最良の情報源です。オリジナル開発者であるDave Raggett氏のページも参考になりますが、現在の開発・修正・改善はすべてSourceForgeのプロジェクトサイトに集約されています。

Linuxの場合

主要な人気ディストリビューションのリポジトリにはTidyが含まれているため、入手に困ることはまずありません。

Windowsの場合

Windowsユーザーには複数の選択肢があります。Notepad++を使う方法、Windows向け実行ファイルをダウンロードしてコマンドラインからHTMLファイルに対して実行する方法、あるいはKompoZerのようなWebエディタのプラグイン経由で呼び出す方法です。

コマンドラインが苦手な方には、Dirk Paehl氏が開発したGUI版もあります。他のOS向けバージョンも提供されています。

オンラインサービス

Tidyはインストール不要で、オンライン上で直接利用することもできます。W3C（国際WWW標準化団体）をはじめ、複数のWebサイトがこのサービスを提供しています。HTMLファイルのURLを指定してTidyに通すだけで完了です。

Firefox拡張機能

Firefox用の拡張機能も存在します（Windows専用）。ダウンロードサイズは2.6MBとやや重めですが、ブラウザ内で高度な検証機能を利用できます。詳細は公式サイトをご確認ください。

さらに、Java版、Python版、PHP版、Ruby版のTidyも存在します。対応形態のリストはほぼ無限と言えるでしょう。

CSSTidy

CSSTidyはオープンソースのCSSパーサー兼オプティマイザーです。HTML Tidyと同じく、CSSファイルのコードをクリーンアップするために使われ、プロパティ文字列の16進コードへの変換、空白文字の削除、重複プロパティの削除や統合などを行います。これにより、CSSTidyはCSSファイルの総サイズを数十％も削減できることがあります。

CSSTidyはクロスプラットフォーム対応で、Linux、Windows、Macで利用できます。C++版とPHP版も用意されており、5言語に対応したオンライン版フォーマッター＆オプティマイザーもあり、HTML Tidyのオンラインサービスとよく似た使い勝手です。

HTML Tidyと同様、CSSTidyもコマンドラインユーティリティで、非常にシンプルに扱えます。

CSSTidyでCSSファイルを最適化している様子の例です。

Weblint

もう1つ検討に値するHTML最適化ユーティリティがWeblintです。ただし、HTML 4.0文書にしか対応しておらず、HTML Tidyほど強力でも移植性も高くありません。Bluefishには標準で付属しています。一般にWeblintはLinux（リポジトリ）限定で提供されています。

まとめ

HTML・CSSの整形ユーティリティは、アマチュアかプロフェッショナルかを問わず、非常に有用なツールです。厳しい国際標準への準拠を目指した高品質コンテンツを作りたいなら、導入を検討する価値は十分にあります。

これらのツールは、出力のレイアウト向上やファイルの圧縮に役立つだけでなく、Web標準に従うことで思考や作業の進め方そのものを変えてくれます。Webドキュメント全体の品質と一貫性が向上し、読者はブラウザや解像度を気にすることなく、ファーストクラスのコンテンツを楽しめるようになるのです。

これからWeb開発の世界に足を踏み入れようとしている方、あるいは最初の一歩を踏み出したばかりの方こそ、今こそHTML TidyとCSSTidyを使い始める絶好のタイミングです。自分の作業が快適になるだけでなく、巨大なコードの世界を少しずつより良い場所にできます。ささやかな貢献でも、確実に意味があるのですから。