料金プランを有効化して学習を始めましょう。

コンテナ

コンテナを使って、コンテンツを読みやすく、中央に配置しましょう。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

container要素は、コンテンツを画面の中心に向かって整理しておくのに便利です。通常はセクション要素と一緒に使用します。コンテナは、Add panel > Structure から追加できます。

このレッスンでは以下を紹介します:

コンテナの構造

コンテナは、定義済みのスタイルを持つdivブロックです。大きなディスプレイでは最大幅が940 pxになり、ブラウザウィンドウに対してコンテンツが中央に配置されるようになります。小さなデバイス(携帯電話やタブレットなど)では、コンテナは画面の幅いっぱいに広がります。

コンテナのmax-widthを調整することで、設定した幅までしか広がらないようにできます。

コンテナ、セクション、divブロックの使い方

ウェブ制作では、コンテナはセクション要素の中に置かれることがほとんどです。セクションは、デフォルトでは全幅です。セクションの中にコンテナを置くことで、要素を中心に向かって束ねることができます。そして、コンテナの中にある div ブロックを使って、レイアウト、間隔、サイズ、位置を使って要素を整理することができます。

プロTip:セクションとは、全幅で、定義済みの「Section」HTML5タグを持つdivブロックのことです。コンテナは、max-widthを持つdivブロックです。

ウェブレイアウトの構築について詳しく知る