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. photoshop-art006

    古ぼけた写真(Photoshop)

  2. filmora-pho028-01

    8つのカメラシェイクエフェクト(Filmora)

    〜Filmoraで動画編集〜8つのカメラシェイクエフェクト(Filmora) from yasu…

  3. Filmora031-01-01

    26種類のフレームオーバーレイ(前半)(Filmora)

    26種類のフレームオーバーレイ(前半)(Filmora) from yasuo kishioka…

  4. webflow009-01

    タブの使用(webflow)

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

  5. filmora-pho008-01

    動画を分割表示させてドラマ仕立てに(Filmora)

    動画を分割表示させてドラマ仕立てに(Filmora); from yasuo kishioka …

  6. audition02

    動画のBGMにはbeatgain.comとAudition CC…

    前回、制作した「Keynote Animation」ですが、一部(20〜30点程)フリーで利用可…

  7. filmora-002

    15種類の海外映画・ドラマ風色調効果を試してよう!(Filmor…

    Filmora9で動画編集!!色調の統一を行うために3D LUTという色の明度・彩度・色相など操…

  8. dimension003

    チョコレートのパッケージを作る(Adobe Dimension …

    Adobe Dimension CCを使って、チョコレートのパッケージを作りました。パッケージの…

PAGE TOP