container_img01

STUDY

コンテナの説明(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)前のページ

カラムの説明(webflow)次のページcolumns_img01

関連記事

  1. filmora-005

    Filmora

    カメラのファインダー越しに見ているような効果を試してみよう!(Filmora9)

    Filmora9で動画編集!!エフェクト/ビューファインダーを使う…

  2. filmora-pho003-01

    Filmora

    テキスト「タイトル編」(Filmora)

    テキスト「タイトル編」(Filmora); from yasuo …

  3. columns_img01

    STUDY

    カラムの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  4. dimension003

    Dimension

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

    Adobe Dimension CCを使って、チョコレートのパッケージ…

  5. webflow002-01

    STUDY

    スライドショーの設置(webflow)

    サイト制作を進めながら学習したことを書いていきます。今回はスライド…

  6. Pillow01

    Photoshop

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

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

  1. simple-and-sweet-on-scroll-animations

    Adobe Muse CCを使ったホームページ制作

    26種類のスクロールアニメーション(Adobe Muse)
  2. eyecatch-200425

    After Effects

    マスクパスを【エフェクト/電波】でアニメーションさせる(After Effect…
  3. filmora-pho028-01

    Filmora

    8つのカメラシェイクエフェクト(Filmora)
  4. Blog-サムネイル20201227

    Filmora

    Filmora Xの新機能『キーフレーム』を使えば、固定カメラの映像をカメラが追…
  5. eyecatch-200925

    Premiere Pro

    光の粒子や光のラインが飛び交うアニメーション/オープニング・エンディングロゴ集-…
PAGE TOP