コンテナモデルの紹介

オンライン コンテンツ全体は、コンテナ モデルを使用して構造化されています。HTML コンポーネント (段落のブロック、分割要素、セクションなど) はコンテナ内に表現され、Web サイトのデザインでは、これらの要素が積み重ねられたコンテナのように上下に組み立てられます。

このチュートリアルでは以下の内容を取り上げます。

1. ウェブ上のコンテナの利用
2. 適応性のあるデザインにコンテナを適用する
3. ネストされたコンテナの実装
4. コンテナのカスタマイズ

ウェブ上のコンテナの活用

すべての HTML コンポーネント (段落、分割要素、セクションなど) は、Web 上のコンテナーで表されます。各コンポーネントを囲む目に見えない境界線があり、そのエンティティがコンテナー内に含まれます。これらの非表示のコンテナーを使用して、コンポーネントと Web サイトのレイアウトを設計できます (たとえば、コンポーネントのコンテナーの周囲にスペースを追加したり、コンポーネントのコンテナーに境界線を導入したりできます)。これらのコンテナーは、属性に応じて、互いに隣接したり、積み重ねられたりします。

適応性のあるデザインにコンテナを適用する

オンライン コンテンツは、要素を手動でどこにでも配置できるプレゼンテーションのようには機能しません。プレゼンテーションは単一の解像度で表示されるように設計されており、さまざまなデバイスやブラウザーでの応答性に欠けています。

ウェブレイアウトは、テキストのレイアウトに似た動作をします。コンテンツはページの左上隅から自然に流れ、ページの右端に達すると次の行に進みます（つまり、折り返し）。コンテンツはさまざまな解像度に適合するため、レスポンシブです。たとえば、テキストのウィンドウのサイズを変更すると、コンテンツ形式は自動的に調整されますが、 寸法 コンテンツの。

コンテナ モデルは最初は柔軟性に欠けるように見えるかもしれませんが、さまざまなデバイスや画面サイズに合わせてレスポンシブ デザインを作成するときに大きな適応性を提供します。レスポンシブ デザインについて詳しくは、こちらをご覧ください。