columns_img01

STUDY

カラムの説明(webflow)

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

並べてレイアウトを組んでいくときに重宝します。
セクション(Section)>コンテナ(Container)>カラム(Columns)の順で内包していきます。

columns_img02

「12」をひとつの段の単位として列で割ります。
Grid Settingsで列の数を選択し、
Customizeで各列の割合を選択します。

columns_img03

画面右側でタブレット、スマホ縦横について、レイアウトの流し方を選択します。

columns_img04

▽サンプル
live-preview

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

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

container_img01コンテナの説明(webflow)前のページ

Divブロックの説明(webflow)次のページdiv_block_img01

関連記事

  1. filmora034-01

    Filmora

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora)

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora) fr…

  2. webflow010-01

    STUDY

    ライトボックスの使用(webflow)

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

  3. photoshop-art006
  4. filmora-pho004-01

    Filmora

    テキスト「テロップ編」(Filmora)

    テキスト「テロップ編」(Filmora); from yasuo …

  5. NewYork-Poster

    Photoshop

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

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

  6. filmora-008

    Filmora

    レンズフレアの効果を試してみよう!(Filmora9)

    Filmora9で動画編集!!エフェクト/レンズフレアを使うと映像…

  1. xd005

    Adobe XD

    自動アニメーションで目を左右に動かしてみる(Adobe XD)
  2. eyecatch-200614

    After Effects

    エフェクト/ブラインドを使ったモーショングラフィックス(After Effect…
  3. animate-sample07

    Adobe Animate CCを使ったコンテンツ制作

    ステージ上を水平方向にアニメーション(Adobe Animate CC)
  4. Pillow01

    Photoshop

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

    Filmora

    動画の逆再生(Filmora)
PAGE TOP