【日本語版Webflow University】 コンテナ

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

引用元：https://university.webflow.com/lesson/container

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

‍

コンテナを使用することで、コンテンツを中央に配置し、読みやすいサイトを効率的に構築することができます。

コンテナ要素は、 セクション要素と組み合わせて使うのに最適です。コンテナをセクション内に配置し、コンテナ内に要素を配置すると、コンテナはコンテンツを画面の中央にきれいに配置してくれます。

レッスン概要

1. コンテナの構造
2. コンテナを追加する
3. コンテナにカスタムで幅を設定する
4. コンテナにおけるパディングの設定
5. コンテナの再利用
6. コンテナと Divブロック

コンテナの構造

コンテナは、あらかじめ使いやすいようにデフォルトの設定が組み込まれたWebflowオリジナルのディブブロックパーツです。

大きなディスプレイでは最大幅940ピクセルで、ウィンドウに対してコンテンツを中央に配置できます。小さいデバイス (携帯電話やタブレットなど) では、コンテナは画面の幅全体に拡張されます。

コンテナを追加する

コンテナはエレメント追加パネルのレイアウトカテゴリから追加されます。

追加したコンテナには、新しく要素を中に追加したり、すでにメインキャンバス内にある要素をコンテナ内に移動させたりすることができます。

コンテナにカスタムで幅を設定する

コンテナの幅はデフォルトで設定されています。ただし、デフォルトの最大幅 (940 ピクセル) よりも、幅の広いコンテナが必要になる場合があります。

その場合は次の2Stepで設定できます。

1. コンテナにクラスを追加します  ("Container"など)
2. コンテナに最大幅（Max W）を設定します (例：1100px)

この設定によって、1100pxまではビューポートの幅いっぱいにコンテナが広がってくれます。それ以上の幅になると、コンテナの幅は1100pxで止まります。

より大きなブレイクポイント

デフォルトより大きいブレイクポイントのコンテナを設定することもできます。より大きなディスプレイに合わせてコンテナの幅を適切なサイズにしたい場合は、次の4つStepで設定します。

1. 大きなブレイクポイントを追加(ベースブレイクポイントの横にある三点リーダーをクリックします)
2. より大きなブレイクポイントを選択します(1280px、1440px、1920px)
3. コンテナ要素を選択します
4. 選択したブレイクポイントに最適な最大幅（Max W）を変更します

一言メモ

大きなブレイクポイントで設定した内容は、そのブレイクポイントよりも小さいブレイクポイントには引き継がれないので注意が必要です。

従って、特別大きなブレイクポイントで設定する必要が無い場合は、必ずデフォルトのブレイクポイントで設定する様にしましょう。

そうしないと、二度手間が発生してしまうことがしばしばあります。

ちなみに、

ブレイクポイントの反映ルールは下記の通りです。

●小さな画面へと設定が引き継がれます。

タブレット(991px) ＞ モバイル横(767px) ＞ モバイル縦(478px)

●大きな画面へと設定が引き継がれます

ブレイクポイント大3 (1920px) ＞ ブレイクポイント大2(1440px) ＞ ブレイクポイント大1(1280px)

コンテナにおけるパディングの設定

コンテナを使用して、コンテナ内のコンテンツの周囲にスペースをつくることができます。

この例では、コンテンツ内いっぱいに要素が広がっています。

なので、テキストがきわきわまで広がり過ぎていて、非常に見づらくなっています。

コンテナにパディングを追加することで、中のコンテンツの周囲にゆとりを持たせて、見やすいレイアウトにします。

やり方

1. メインキャンバスでパディングを設定したいコンテナを選択します
2. スタイルパネルで、左右上下のパディングを追加します (例：60ピクセル)

デフォルトのブレークポイントで設定しているため、この設定は小さいブレークポイントにも大きいブレークポイントにも引き継がれます。

コンテナの再利用

先程設定したコンテナと同じ設定を簡単に、別のコンテナ要素にも付与することができます。

これが、『クラス』です。

同じクラス名を持つ要素は原則同じ設定を持つことになります。

クラスを適用するには:

1. キャンバス上の要素を選択します
2. セレクターフィールドにクラス名を入力します
3. Enterキーを押します

一言メモ

クラスの設定されている要素の設定を変更した場合、そのクラスを持つほかのすべての要素も一緒に変わってしまいます。

コンテナとDivブロック

コンテナはセクションの1段内側の階層で使われる、サイトの骨格を決める要素です。

セクションはデフォルトの設定が画面幅いっぱいに広がるようになっているため、画面に対してゆとりをもってコンテンツを置いていくために、コンテナを使うことで、簡単にバランスのいいコンテンツ配置を可能にします。

コンテナ内のレイアウトはディブブロックを使用することで区分けることができます。ディブブロックはサイト構築のパーツの中で最もベーシックで非常に使用頻度の高い要素です。

コンテナの中にディブブロックを配置し、ディブブロックに対して、レイアウト、スペーシング、サイズ、ポジションなどを設定することで、コンテナ内のレイアウトを任意に設定することができます。

‍

まとめ

いかがでしょうか。

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

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

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

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

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

‍

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

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

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

‍

‍