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. filmora-pho021-01

    教育コレクション/オーバーレイ5種(Filmora)

    教育コレクション/オーバーレイ5種(Filmora); from yasuo kishioka …

  2. NewYork-Poster

    壁に掛かっているポスターのモックアップ画像をPhotoshopで…

    壁に掛かっているポスターのモックアップ画像をPhotoshopで作成しました。画像の選択で拡大表…

  3. angle-05

    特定の領域に画面を自動的に配置するプラグインのご紹介(Adobe…

    レイアウトを行ったページを別ページで作成した多角形の領域に自動的に比率や角度を調節して配置することが…

  4. Pillow01

    枕カバーのモックアップ画像をPhotoshopで作成しました。

    枕カバーのモックアップ画像をPhotoshopで作成しました。画像の選択で拡大表示されます。…

  5. webflow008-01

    リッチテキストの使用(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はの紹介になり…

  6. webflow006-01

    ListとList Itemの使用(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はの紹介になり…

  7. filmora-pho013-01

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

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

  8. webflow001-01

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

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

PAGE TOP