Webデザイン業界で働く人は、フロントエンドのウェブサイト開発を3足のスツールに似せています。これらの3つの足は、ウェブ開発の3つの層であり、構造、スタイル、行動を構成します。
なぜあなたは層を分離するべきですか？
Webページを作成するときは、その構造をHTML、CSSのビジュアルスタイル、スクリプトの動作に格下げする必要があります。レイヤーを分離することの利点の一部は次のとおりです。
- 共有リソース： 外部CSSまたはJavaScriptファイルを作成すると、サイトのすべてのページでそのファイルを使用できます。そのファイルを変更する必要がある場合は、おそらくウェブサイト上のいくつかの書体スタイルを更新するために、そのスタイルシートを使用するすべてのページが変更を取得します。ウェブサイトのすべてのページを個別に編集する必要はありません。これは、大規模なウェブサイトでは厄介な作業です。
- より速いダウンロード： スクリプトまたはスタイルシートが初めて顧客によってダウンロードされると、それはウェブブラウザによってキャッシュされます。これらの共有リソースは現在、ブラウザのキャッシュに格納されているため、ブラウザで要求された他のページの読み込み速度が速くなり、全体のページ速度とパフォーマンスが向上します。
- 複数のチーム： 一度に複数の人がウェブサイトで作業している場合は、ファイルのチェックインとチェックアウトができるシステムを使用して、誰もが最新のバージョンで作業していることを確認できます。スタイルとビヘイビアが構造体ドキュメントと絡み合っている場合、これははるかに難しくなります。
- SEO： スタイルと構造が明確に分離されているサイトは、ビジュアルスタイルやビヘイビア情報に邪魔されることなく、コンテンツをより効果的にクロールしてページを理解できるため、検索エンジンのパフォーマンスが向上します。
- アクセシビリティ： 外部のスタイルシートやスクリプトファイルは、人やブラウザにとってよりアクセスしやすくなります。画面リーダーなどのソフトウェアでは、使用できないスタイルを処理することなく、構造レイヤーのコンテンツをより簡単に処理できます。
- 下位互換性： 別個の開発レイヤーを使用して設計されたサイトは、特定のCSSスタイルを使用できないブラウザやJavaScriptが無効になっているブラウザでもHTMLを表示できるため、下位互換性が高くなります。それをサポートしているブラウザの機能を使って、Webサイトを徐々に強化することができます。
HTML：構造レイヤ
ウェブページの構造またはコンテンツ層は、そのページの基礎となるHTMLコードです。家のフレームが強固な基盤を作り、残りの建物が建てられるのと同じように、HTMLのしっかりした基盤は、ウェブサイトを作成できるプラットフォームを作り出します。
構造レイヤーは、顧客が読んだり見ているすべてのコンテンツを保存する場所です。 HTML構造はテキストとイメージで構成され、訪問者がウェブサイトをナビゲートするために使用するハイパーリンクを含みます。これは標準準拠のHTML5でコード化されており、テキスト、画像、マルチメディア（ビデオ、オーディオなど）を含むことができます。
サイトのコンテンツのあらゆる面を構造層に表現する必要があります。これにより、JavaScriptがオフになっているか、CSSの機能がすべてではないにもかかわらずウェブサイト全体へのアクセスをCSSで表示できない顧客がいることができます。
CSS：スタイルレイヤー
このレイヤーは、構造化されたHTML文書がサイトの訪問者にどのように見えるかを指示し、CSS（Cascading Style Sheets）によって定義されます。これらのファイルには、文書をWebブラウザーでどのように表示するかに関する文章的な指示が含まれています。スタイルレイヤーには通常、画面サイズとデバイスに基づいてサイトの表示を変更するメディアクエリが含まれています。
ウェブサイトのすべてのビジュアルスタイルは、外部スタイルシートに存在する必要があります。複数のスタイルシートを使用できますが、すべてのCSSファイルでHTTPリクエストを取得する必要があり、サイトのパフォーマンスに影響します。
JavaScript：ビヘイビアレイヤ
ビヘイビアレイヤーは、インタラクティブなWebサイトを作成し、ページをユーザーの操作に対応させたり、一連の条件に基づいて変更することを可能にします。 JavaScriptはビヘイビアレイヤーで最も一般的に使用される言語ですが、CGIとPHPも頻繁に使用されます。
開発者がビヘイビアレイヤを参照するとき、そのほとんどはWebブラウザで直接アクティブ化されたレイヤを意味します。このレイヤーを使用して、DOM（Document Object Model）と直接対話します。コンテンツレイヤーに有効なHTMLを書き込むことは、ビヘイビアレイヤー内のDOMインタラクションにとって重要です。ビヘイビアレイヤーを構築するときは、スピードとパフォーマンスを最適化するために、CSSと同様に外部スクリプトファイルを使用する必要があります。
