ウェブ デザインを改善する - HTML と CSS コードを整理する

Web 開発には、テキスト エディターによる方法と GUI エディターによる方法の 2 つの方法があります。最初の方法は、主に、コードを理解し、必要なものを知っており、Web ページを作成するために視覚補助を必要としない、より高度な開発者を対象としています。彼らは、vim、emacs、Notepad++、Kate、またはその他のテキスト エディターなどのプログラムで作業し、作業の最終結果を確認する必要があると感じたときに、単に Web ページをブラウザーにロードします。このアプローチは最小限で効率的ですが、難しいものです。

2 番目の方法は、ほとんどの人が行っている方法です。通常はコードをユーザーから隠してコンテンツに集中できる何らかのプログラムを使用します。この目的で使用されるプログラムは、Web エディターとして知られています。さらに、それらは What You See Is What You Get (WYSIWYG) のカテゴリに分類されます。つまり、エディタの GUI 内に表示されるページは最終結果と一致します。より人気のあるタイトルには、KompoZer、Dreamweaver、Quanta、Bluefish などのフレンドリーな Web 開発ソフトウェアが含まれており、人々はレゴ ビルディングの考え方で主題に取り組むことができます。 WYSIWYG エディターは、テキスト エディターよりもはるかに使いやすいですが、通常は効率的ではありません。

そして、彼らはたくさんの汚れを残します。

テキスト エディターで作業する場合、Web ファイル内のコードのすべてのバイトは、ユーザーによってそこに配置されています。一方、Web エディターは通常、自動生成されたメタ フィールド、自己宣伝用のコメント、不要な改行や空白を大量にコードに追加し、意図したよりもはるかに大きなコードをレンダリングします。

ほとんどの人は余剰に気づいたり気にしたりしませんが、Web 開発をクリーンで整然とした質素な方法で行いたいが、それでも GUI エディターを使用したい場合は、リーンを維持するのに役立つツールがいくつかあります。そしてきちんとしたコード。

これらのツールは lint/tidy ユーティリティとして知られており、HTML および付随するファイルの出力を小さく、きれいに、より適切にレイアウトするために使用されます。このチュートリアルでは、これらのユーティリティのコレクションを紹介します。そのほとんどは私が個人的に使用しているものであり、よりエレガントでコレステロールのない Web 開発を楽しむことができます。はじめましょう。

HTML 整頓

HTML tidy は、おそらく最も人気のある HTML tidy ユーティリティです。この小さなプログラムは、無効な HTML を修正したり、余分な空白文字を削除したり、最終的なマークアップのレイアウトとインデントを改善したりして、コードに驚異的な効果をもたらします。

すべての主要なオペレーティング システムで使用できます。さらに、ほとんどの Web エディターは独自の GUI 内から適切に実行できるため、作業とクリーンなコードの維持の両方が容易になります。

以下は 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 ファイルに対して呼び出すことだけです。 HTML ファイルには、ユーティリティの機能を損なう可能性があるため、予想される拡張子または空白を除いて、ドットを含めることはできません。これは理にかなっており、一般的な「適切な」コーディング ガイドラインです。

同様に、いずれかの Web エディター内で Tidy を呼び出すと、構成方法によっては、検出されたすべての不一致、エラー、および警告の長いレポートが表示される場合があります。 Bluefish がこれを行います:

整理整頓

Tidy にはさまざまな形や形があります。一番の情報源は公式ページです。また、元の開発者である Dave Raggett のページもご覧ください。ただし、プロジェクトの開発、修正、改善はすべて SourceForge サイトに統合されています。

Linux

Tidy は、ほとんどの一般的なディストリビューションのリポジトリに含まれているため、入手するのに問題はありません。

窓

Windows ユーザーにはいくつかの選択肢があります。たとえば、Notepad++ を使用するか、Windows 実行可能ファイルを使用して、HTML ファイルに対してコマンド ラインから呼び出すか、KompoZer などの Web エディターを使用してプラグインの 1 つを介して呼び出すことができます。

コマンド ラインが苦手な方のために、Dirk Paehl は GUI バージョンも開発しており、他のオペレーティング システムでも利用できます。

オンライン サービス

Tidy はオンラインで直接使用することもでき、インストールは不要です。 W3C 国際 WWW 標準化団体自体を含む、いくつかの Web サイトがこのサービスを提供しています。 HTML ファイルの URL にリンクして、Tidy で実行するだけです。

Firefox 拡張機能

Windows のみですが、Firefox 拡張機能も利用できます。この拡張機能は 2.6 MB のダウンロードとかなり重いものですが、ブラウザ内で拡張された検証機能を提供します。詳細については、公式サイトもご覧ください。

次に、Tidy の Java、Python、PHP、および Ruby バージョンもあります。リストはほとんど無限です。

CSSTidy

CSSTidy は、オープンソースの CSS パーサーおよびオプティマイザーです。 HTML Tidy と同様に、CSS ファイルのコードのクリーンアップ、可能な場合はプロパティ文字列の 16 進コードへの変換、空白文字の削除、重複するプロパティの削除とマージなどに使用されます。このようにして、CSSTidy は CSS ファイルの合計サイズを数十パーセント削減できます。

CSSTidy は、Linux、Windows、および Mac で利用できるクロスプラットフォーム ソリューションです。 C++ と PHP のバージョンも利用できます。 HTML Tidy で見たものと非常によく似た、5 つの言語で利用できるオンライン フォーマッタとオプティマイザもあります。

HTML Tidy と同様に、CSSTidy はコマンド ライン ユーティリティであり、非常に簡単に使用できます。

以下は、CSS ファイルを最適化する CSSTidy の例です:

ウェブリント

これは HTML 4.0 ドキュメントでのみ動作するため、HTML Tidy よりも強力ではなく、移植性も劣りますが、検討する必要がある別の HTML 最適化ユーティリティです。ブルーフィッシュに同梱されています。一般に、Weblint は Linux でのみ利用できます (リポジトリ内)。

結論

HTML および CSS の整頓ユーティリティは、アマチュア開発者であろうとプロの開発者であろうと、非常に便利です。コンプライアンスの厳格な国際基準を満たす高品質のコンテンツを作成しようとする場合は、それらの使用を検討する必要があります。

それらは、より適切に配置された出力を作成し、ファイルをよりコンパクトにするのに役立つだけでなく、Web 標準に準拠することによって、考え方や作業の方法を変えることを余儀なくされます。 Web ドキュメントの全体的な品質と一貫性が向上します。また、読者は、このブラウザーやその解像度で出力がどのように見えるかを気にすることなく、一流のコンテンツを楽しむことができます。

Web 開発の世界に入りたい、または最初の一歩を踏み出している場合は、HTML Tidy と CSSTidy の使用を検討するのに最適な時期です。自分の作業をより快適にするだけでなく、コードの大きな世界を少しだけ改善するのに役立ちます。ねえ、すべての謙虚な貢献が重要です。

乾杯。