クリーンなコードのための Web デザインの 12 の法則 [グラフィック]

美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にのみ存在します。クリーンでセマンティックな HTML コードは、Web サイトをより堅牢にします。この記事では、Web デザインに携わるすべての人に適した、クリーンな Web デザインコードを実現するための 12 の法則について説明します。

1. 厳格なDOCTYPE
正しくやりなさい。 HTML 4.01 または XHTML 1.0 のどちらでも、Strict モードが提供されています。Strict モードを使用すると、コードにエラーが隠れないようにすることができます。

参考文献:

W3C: Web ドキュメントで使用する推奨 DTD
適切な DOCTYPE でサイトを修正しましょう!
移行型DOCTYPEはもうやめてください

2. 文字セット宣言、特殊文字のエンコード文字セット宣言は、ブラウザがタイトルを含む Web ページ内のすべてのコンテンツを表示する方法を認識できるように、<head> セクションの先頭に配置する必要があります。さらに、& などの一部の特殊文字は & に置き換えるのが最適であり、これが最も安全な方法です。

参考文献:

ウィキペディア: UTF-8
文字コードの問題に関するチュートリアル
拡張ASCIIテーブル

3. 適切なロックとインデントは Web ページのレンダリングには影響しませんが、ソースコードの読み取りエクスペリエンスを大幅に向上させます。インデントには特別なルールはありませんが、常に一貫性を保つことをお勧めします。

参考文献:

HTML TIDYでWebページを整理する

4. CSS と JavaScript を外部ファイルに格納します。CSS と JavaScript を参照用の外部ファイルに格納すると、単一の Web ページのサイズが小さくなるだけでなく、他の Web ページでこれらのコードを共有できるようになります。さらに、ブラウザのキャッシュメカニズムにより、同じコードの繰り返しダウンロードを効果的に減らすことができます。

5. 以下のようにタグを正しくネストします。コードの最初の行では、<h1> タグが <a> タグ内にネストされています。ほとんどのブラウザでは正しくレンダリングされますが、これは良い習慣ではありません。タグはブロックオブジェクトではなくインラインオブジェクトであり、インラインオブジェクトにはブロックオブジェクトを含めないでください。

6. 不要な <div> を削除する
<div> はよく乱用されます (特に、現在私たちが陥っている DIV+CSS 神話では - 翻訳者)。人々は CSS スタイルを割り当てるためにすべてを <div> 内に配置したいと考えますが、この乱用は肥大化につながります。

参考文献:

分裂炎：それが何であるか、そしてそれをどのように治療するか。

7. より適切な命名規則を使用する下の図に示すように、Cat の CSS クラスの名前は red italic になっており、Cat が赤い斜体を使用していることを示しています。Cat を blue bold に変更したい場合はどうすればよいでしょうか。

8. 下の図に示すように、CSS を使用してテキストのレイアウトを制御します。大文字を直接使用しないでください。CSS を使用してこれらのテキストレイアウトの形式を制御すると、より柔軟になります。

9. <body> に別のクラス/IDを割り当てる
ページ内のすべてのオブジェクトは body 内に配置されているため、body タグに別のクラス/ID を割り当てることは、ページ内の任意のオブジェクトを見つけるのに適した方法です。

参考文献:

CSS の制御と詳細度を高めるためにボディを ID 化する
ケーススタディ: body クラスでスタイルを再利用する

10. 検証言うまでもなく、Web ページのコードはできる限り検証する必要があります。一部のコードエラーはブラウザによって自動的に修正されますが、一部のエラーは、特に Strict モードの場合に悪い結果をもたらします。たとえ何も起こらなかったとしても、緑色の W3C 検証マークを見ると、少なくとも気分が良くなるでしょう。

ウェブサイトが W3C の検証に合格するかどうかについて、あまり厳格に考える必要はありません。ウェブデザインには、他にも考慮すべき点がたくさんあります。W3C の検証結果だけに固執すると、より重要な要素に影響する可能性があります。たとえば、IE6 には W3C 標準のバグが多数あります。W3C の検証に 100% 合格するためにウェブサイトが IE6 をサポートしていないと発表すると、少なくとも中国では、利益よりもトラブルの方が大きくなります。 - 翻訳者

参考文献:

W3C マークアップ検証サービス
XHTML-CSS バリデーター
無料のサイト検証ツール（1ページだけでなくサイト全体をチェックします）

11. 合理的な構造順序 Web ページの構造を論理的な順序に保ちます。

12. ベストを尽くすゼロから作成する場合、上記の原則に従う方がはるかに簡単です。古いコードを変更する必要がある場合は、面倒な作業になります。一部の CMS システムはコーディングが貧弱で、作業が遅くなったり、Web サイトが大きく、変更する点が多すぎたりすることがあります。いずれにしても、常に良い習慣を維持することが非常に重要です。