model」の内容を元に作成しています。引用元:https://university.webflow.com/lesson/intro-to-the-box-modelボックスモデルがどのようにWebデザインを形成し、Webflowでレイアウトをより柔軟に構築できるかをご紹介します。ボックスモデルとは、HTMLで定義された要素は全て長方形のボックスの中に配置されているという考え方ですレッスン概要ボックスについてレスポンシブデザインでのボックスの使い方グループボックスネストボックスボックスについてすべての要素はボックスで定義されます。分かりやすく言うと、各要素の周りに目に見えない境界があると思ってください。それらのボックス(HTML要素)は、その設定に応じて、隣り合って配置されたり、積み重ねられたりしていくわけです。デザインにボックスを使用するWebサイト構築は、要素を思い通りの位置にどこにでも配置できるPowerPointやPhotoshopとは異なります。これは、Webサイトがレスポンシブであるためです。様々な解像度に準拠し、コンテンツはページの左上から自然に流れるように表示され、コンテンツの境で折り返されます。一方で、PowerPointやPhotoshopは1つの解像度でしか表示されず、画面に合わせて表示を変えることはありません。した、レスポンシブなコンテンツを生み出すための重要な考え方の一つが、ボックスです。実際に操作すると、こまごまと設定が必要だったり、慣れるまでは意図しない挙動をすることもありますが、これらは様々なデザインや画面サイズに対応する上で便利に働いてくれます。(これを「ネスト」といいます)。Webflowでは、任意の要素を別の要素にドラッグ&ドロップで配置できます。原則Webflowのすべての要素は、互いにネストできるボックスです。見出し、段落、画像をContainerという要素内に配置できます。このContainerは、複数の要素をまとめてグループにしてくれます。Containerを移動させると、Container内のすべての要素も一緒に移動します。ネストボックスボックスの中の要素が増えると、もちろんボックスのサイズも大きくなります。いちいちすべてのボックスに高さを指定する必要はありません。その代わりに、ボックスの中に配置した要素の高さに合わせて、ボックスの高さは変ります。要素間の間隔は指定する必要があります。これを指定するものがマージンとパディングです。マージンはボックスの外側にスペースを作成し、他のボックスを押しのけます。パディングはボックスの内側にスペースを作成します。これは、外側のボックス(親要素)にもボックスの中の要素(子要素)にも適用できます。縦にも横にも積み重ねる実は細々難しいコードを覚えなくても、ページにコンテンツを追加し、パディングとマージンを調整するだけで、シンプルなWebサイトを作成することはできます。世の中の多くのサイトでは、デザインにこだわり、多くの場合、要素を水平方向に配置したり、画面上の特定の場所に配置したりしています。テクニックが使われています。ディスプレイは要素のデフォルトの表示や動作を指定し、ポジショニングはその他のレイアウト動作を制御します。‍まとめいかがでしょうか。当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。今後とも宜しくお願い致します。‍Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。