Web 開発者が知っておくべき 15 のコーディング原則

HTML は 20 年近くの開発を経てきました。 HTML4 から XHTML、そして最近非常に人気のある HTML5 に至るまで、インターネット全体の発展をほぼ目撃してきました。ただし、現在でも、開発者が細心の注意を払う必要がある基本的な概念や原則が数多くあります。以下に、守るべき開発原則を紹介します。

1. レイアウトに DIV を上手に活用する

Web ページを開発するとき、最初に考慮すべきことは、ページのフォーカスを区別することです。これらのコンテンツを DIV タグに含めることで、ページ上のコードがきれいにインデントされて表示されます。

<div id="header"></div> 
<div id="body-container"> 
        <div id="content"> <!-- Content -- > </div>   
        <div id="right-side-bar"> <!-- Right Side Bar Content Area -- ></div> 
</div>   
<div id="footer"></div>

2. HTML タグと CSS スタイル シートを分離する

適切なページでは、HTML タグと CSS スタイル シートを分離する必要があります。これは、すべての Web 開発者が初めて Web 開発に取り組むときに知っておくべき原則です。しかし、今日に至るまで、この原則に厳密に従っていない開発者がまだ多くいます。

HTML タグにスタイルシートコードを埋め込まないでください。開発者は、CSS スタイル シートを保存するための別のファイルを作成する習慣を身に付ける必要があります。これにより、他の開発者がコードを変更するときに作業を迅速に完了することが容易になります。

<p style="color: #CCC; font-size:16px; font-family: arial">
　　　　An example to illustrate inline style in html</p>

3. CSS コードを最適化する

現在では、複数の CSS ファイルを Web サイトに追加することが非常に一般的になっています。ただし、Web サイトに含まれる CSS ファイルが多すぎると、Web サイトの応答速度が遅くなります。解決策は、コードを合理化し、複数の CSS ファイルを最適化し、それらを 1 つのファイルにマージすることです。この方法により、Web サイトの読み込み速度が大幅に向上します。さらに、CSS Optimizer、Clean CSS など、CSS ファイルの最適化に使用できるツールが多数あります。

CSS については、知っておくべき 9 つの優れた CSS フレームワークも紹介しています。CSS フレームワークの種類と関連する使用法について学ぶことができます。

4. Javascript ファイルを最適化し、ページの下部に配置します

CSS と同様に、複数の Javascript ファイルをページに追加することも一般的です。ただし、これにより Web サイトの応答速度も低下します。このため、開発者はこれらの Javascript ファイルを合理化し、最適化する必要があります。

ただし、CSS とは異なる点が 1 つあります。ブラウザは通常、並列読み込みをサポートしていません。これは、ブラウザが Javascript ファイルをロードするときに、他のコンテンツを同時にロードしなくなることを意味します。これにより、Web ページの読み込み速度が遅くなったように見えます。

良い解決策は、JavaScript ファイルの読み込み順序を最後にすることです。これを実現するには、開発者は HTML ドキュメントの下部に Javascript コードを配置します。最適な場所は