menu

コンテナの説明(webflow)

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回は「コンテナ(Container)」について説明します。

コンテナ(Container)をセクションの中に配置することによって、
レイアウトがブラウザの中央に揃うようになります。

初期設定ではコンテナ(Container)は、デスクトップ上で幅940pxで設定されており、
タブレット、スマホは自動的に画面幅に縮小されます。

container_img02

☆コンテナの標準幅を変更するには
1.プロジェクト設定→ カスタムコードタブに移動します。

container_img03
container_img04

2.次のコードをヘッドコードに追加します。

container_img05
container_img06

3.変更を保存する

container_img07

デスクトップデバイス上のコンテナの幅が全て変更されます。

☆特定のコンテナの幅を変更したい場合は
1.「Container」ではなく、「Div Block」を配置する。

container_img08

2.任意のクラス名を設定する。

container_img09

3.特定の幅を指定し、左右のマージンをautoに設定する。

container_img10

▽サンプル
live-preview

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

webflow018-01セクションの説明(webflow)

columns_img01カラムの説明(webflow)

関連記事

  1. webflow001-01

    ナビゲーションの設置。(webflow)

    サイト制作を進めながら学習したことを書いていきます。◎Componets/Navbar を画…

  2. photoshop-gallery001

    Photoshop Gallery 001

  3. filmora038-01

    旅の素敵な動画を飾る4種類のフィルター(Filmora)

    旅の素敵な動画を飾る4種類のフィルター(Filmora) from KISHIOKA.DESIG…

  4. filmora-pho023-01

    ビューティーコレクション/トランジション12種(Filmora)…

    ビューティーコレクション/トランジション12種(Filmora); from yasuo kis…

  5. photoshop-art006

    古ぼけた写真(Photoshop)

  6. filmora-pho002-01

    テキスト「オープニング編」(Filmora)

    テキスト「オープニング編」(Filmora); from yasuo kishioka on V…

  7. filmora-pho012-01

    トランジション「ベーシック編4」(Filmora)

    トランジション「ベーシック編4」(Filmora); from yasuo kishioka o…

  8. filmora-pho013-01

    トランジション「ベーシック編5」(Filmora)

    トランジション「ベーシック編5」(Filmora); from yasuo kishioka o…

PAGE TOP