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. keynote-animation02

    トランジションエフェクトのアニメーション(Keynote Ani…

    【Keynote】をプレゼンテーション用としての利用以外に、ネット上などで掲載をするための動画作…

  2. webflow003-01

    基本要素の設置(webflow)

    サイト制作を進めながら学習したことを書いていきます。今回は基本要素設置の紹介になります。…

  3. chart-cartoon-film2-1

    Keynoteでグラフアニメーション/3D編(Keynote)

    Keynoteでグラフアニメーション/3D編(Keynote); from yasuo kish…

  4. filmora-pho026-03

    ビジネスコレクション/トランジション11種(Filmora)

    ビジネスコレクション/トランジション11種(Filmora); from yasuo kishi…

  5. webflow015-01

    フレックスボックスの設定(webflow)

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

  6. filmora-pho021-01

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

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

  7. webflow011-01

    ブレークポイントで画像のサイズを変更する(webflow)

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

  8. webflow016-01

    フレックスボックスの設定2(webflow)

    ◎「Reverse Layout」の選択でブレークポイントでレイアウトを逆にする必要がある場合などに…

PAGE TOP