#06|コンテナについて

コンテナを使用するとコンテンツを中央に配置し、読みやすくできます。

目次

コンテナの構造

コンテナは、あらかじめ定義されたスタイルを持つDivブロックです。大型ディスプレイでは最大幅が940ピクセルに設定されており、ブラウザのウィンドウに対してコンテンツが中央に配置されるようになっています。携帯電話やタブレット端末などの小型端末では、コンテナは画面の幅いっぱいに表示されます。

A container contains an image in the background, a div block filled with a Headline, paragraph and a button.
コンテナには、背景の画像、見出し、段落、ボタンが入ったdivブロックが含まれます。

コンテナとDivブロックの違い

Web 開発では、Section 内のコンテナは一般的な階層構造になっています。

セクションは、デフォルトでは全角です。セクションの内部にはコンテナがあり、すべての要素が中心に向かってきちんと結合されています。

Divブロックは、プロジェクトをデザインする際に使用する最も基本的で汎用性の高い要素です。コンテナ内のDivブロックを使用して、レイアウト、スペーシング、サイズ、位置の各スタイルを使用して要素を整理できます。

注意:セクションは全幅のDivブロック、コンテナはデフォルトで最大幅を持つDivブロックです。

コンテナの追加方法

コンテナは、「要素」パネル(A)の「レイアウト」セクションから追加することができます。

Container icon thumbnail
コンテナのアイコンサムネイル

その後、新しい要素を配置したり、コンテンツをコンテナに移動したりすることができます。

コンテナのスタイリング

デフォルトでは、コンテナ要素は自動的にレスポンシブ表示されます。しかし、デフォルトの最大幅(940ピクセル)ではなく、より広い幅のコンテナが必要な場合もあります。

この場合、次の2つのステップで対応できます。

  1. Containerにクラスを追加します(例:Container)。
  2. 最大幅を設定する(例:1100ピクセル)。
A style panel displays a selected class called container. It also displays the sections layout (collapsed), spacing (collapsed) and size (expanded).
スタイルパネルに、選択したコンテナというクラスが表示されます。
また、レイアウト、スペーシング、サイズの各セクションも表示されます。

これで、Containerはビューポートのサイズに対応しますが、設定した最大幅までしか広がりません。

コンテナのパディング

コンテナを使用して、要素の周囲にスペースを追加することができます。この例では、コンテンツはモバイルランドスケープのブレイクポイントの端まで押し出されています。

A container without padding displays the content right at the edge viewed in the mobile-landscape breakpoint.
パディングなしのコンテナは、mobile-landscapeのブレイクポイントで見た端にコンテンツが表示されます。

これは、モバイルデバイスではコンテナがフルワイドであり、内部の要素が端にあるためです。パディングを調整することで、適度なスペースを確保することができます。

The style panel displays an expanded Spacing section with 20 pixels of padding on the left and right sides.
スタイルパネルには、左右に20ピクセルのパディングを持つ「Spacing」セクションが拡張されて表示されます。

これを行うには:

  1. キャンバス上でContainer要素を選択します(この例では「Container」という名前にしました)。
  2. スタイルパネルで、左右にパディングを追加します(例:20ピクセル)。
A container with padding displays the content with space between the edge viewed in the mobile-landscape breakpoint.
パディングを追加したコンテナは、mobile-landscape ブレークポイントに表示される端と端の間にスペースを置いてコンテンツを表示します。

このスタイリングは、Mobile portraitにも受け継がれます。

デザイナーでブレイクポイントを変更する方法

デフォルトよりも大きなブレークポイント用にContainerをスタイル設定することもできます。コンテナの幅を、より大きなディスプレイに対してより適切なサイズにしたい場合、4つのステップでこれを行うことができます。

  1. 大きなブレイクポイントを追加] オプションをクリックします(基本ブレイクポイントの横にある 3 つの点)。
  2. 任意の大きなブレイクポイントを選択します。
  3. 次に、Container要素を選択します。
  4. 最後に、選択したブレイクポイントに最も適した最大幅のスタイルを変更します。
The add large breakpoint settings panel displays three additional breakpoints 1280px, 1440px and 1920px.
注意点
プロジェクトの開発を続ける時、必ずベースとなるブレイクポイントに戻ることをおすすめします。

コンテナの再利用

コンテナにはすでにクラスが設定されているので(この例では「Container」と命名)、プロジェクトに追加した他のコンテナにもそのクラスを適用することができます。

クラスを適用するには:

  1. キャンバス上の要素を選択します。
  2. 選択フィールドにクラス名を入力する。
  3. リターン(ENTER)キーを押す
The style panel displays a text input field in the selector section to type the class name.
スタイルパネルに、クラス名を入力するためのテキスト入力フィールドがセレクタセクションに表示されます。
注意
クラスのスタイリングを変更すると、そのクラスが適用されているすべてのコンテナに影響します。