menu

カラムの説明(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_block_img01Divブロックの説明(webflow)

関連記事

  1. webflow017-01

    フレックスアイテムの設定(webflow)

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

  2. webflow014-01

    ドロップダウンメニューの設定(webflow)

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

  3. audition02

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

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

  4. filmora-pho004-01

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

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

  5. filmora-pho009-02

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

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

  6. filmora034-01

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

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

  7. photoshop-gallery003

    Photoshop Gallery 003

  8. filmora-pho002-01

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

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

PAGE TOP