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