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. webflow018-01

    セクションの説明(webflow)

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

  2. keynote-animation01

    インとアウトのアニメーション(Keynote Animation…

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

  3. webflow008-01

    リッチテキストの使用(webflow)

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

  4. filmora-pho021-01

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

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

  5. filmora-pho019-01

    教育コレクション/タイトル33種(Filmora)

    教育コレクション/タイトル33種(Filmora); from yasuo kishioka o…

  6. webflow001-01

    ナビゲーションの設置。(webflow)

    サイト制作を進めながら学習したことを書いていきます。◎Componets/Navbar を画…

  7. okakishi-chaya_img05

    中面3ページにインタラクションとライトボックスを設定(webfl…

    架空サイト【岡岸茶屋】に「お店の紹介」「甘味メニュー」「おみやげ」ページを作成。お店の紹介ページ…

  8. uiface-05

    プロフィール画像のダミーを自動生成(Adobe XD/UI Fa…

    「UI Faces」は条件設定に沿った、ダミーのプロフィール画像を自動的に生成してくれるプラグインで…

PAGE TOP