【日本語版Webflow University】 ボックスモデルとは

この投稿はWebflow社が提供する「Intro to the box model」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/intro-to-the-box-model

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

今回は、ボックスモデルがどのようにWebデザインを形成し、Webflowでレイアウトをより柔軟に構築できるかをご紹介します。

ボックスモデルとは、HTMLで定義された要素は全て長方形のボックスの中に配置されているという考え方です

レッスン概要

1. ボックスについて
2. レスポンシブデザインでのボックスの使い方
3. グループボックス
4. ネストボックス

ボックスについて

すべての要素はボックスで定義されます。分かりやすく言うと、各要素の周りに目に見えない境界があると思ってください。それらのボックス（HTML要素）は、その設定に応じて、隣り合って配置されたり、積み重ねられたりしていくわけです。

レスポンシブ デザインにボックスを使用する

Webサイト構築は、要素を思い通りの位置にどこにでも配置できるPowerPointやPhotoshopとは異なります。

これは、Webサイトがレスポンシブであるためです。様々な解像度に準拠し、コンテンツはページの左上から自然に流れるように表示され、コンテンツの境で折り返されます。

一方で、PowerPointやPhotoshopは1つの解像度でしか表示されず、画面に合わせて表示を変えることはありません。

こうした、レスポンシブなコンテンツを生み出すための重要な考え方の一つが、ボックスです。

実際に操作すると、こまごまと設定が必要だったり、慣れるまでは意図しない挙動をすることもありますが、これらは様々なデザインや画面サイズに対応する上で便利に働いてくれます。

グループボックス

ボックスモデルの重要な側面は、ボックスを他のボックス内に置けることです (これを「ネスト」といいます)。Webflowでは、任意の要素を別の要素にドラッグ＆ドロップで配置できます。原則Webflowのすべての要素は、互いにネストできるボックスです。たとえば、見出し、段落、画像をContainerという要素内に配置できます。このContainerは、複数の要素をまとめてグループにしてくれます。Containerを移動させると、Container内のすべての要素も一緒に移動します。

ネストボックス

ボックスの中の要素が増えると、もちろんボックスのサイズも大きくなります。つまり、いちいちすべてのボックスに高さを指定する必要はありません。その代わりに、ボックスの中に配置した要素の高さに合わせて、ボックスの高さは変ります。

しかし、要素間の間隔は指定する必要があります。これを指定するものがマージンとパディングです。マージンはボックスの外側にスペースを作成し、他のボックスを押しのけます。パディングはボックスの内側にスペースを作成します。これは、外側のボックス（親要素）にもボックスの中の要素（子要素）にも適用できます。

縦にも横にも積み重ねる

実は細々難しいコードを覚えなくても、ページにコンテンツを追加し、パディングとマージンを調整するだけで、シンプルなWebサイトを作成することはできます。しかし、世の中の多くのサイトでは、デザインにこだわり、多くの場合、要素を水平方向に配置したり、画面上の特定の場所に配置したりしています。これは、さまざまなレイアウト のテクニックが使われています。

例えば、ディスプレイは要素のデフォルトの表示や動作を指定し、ポジショニングはその他のレイアウト動作を制御します。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍

‍