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-animation03-04

    Keynote Animation Sample03(Keyno…

    企業などの解説動画作成に【Keynote】が使用されるケースが増えているということなので、30秒…

  2. filmora-pho002-01

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

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

  3. filmora-pho005-01

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

    テキスト「サブタイトル編」(Filmora); from yasuo kishioka on V…

  4. filmora-001

    63種類のモーション効果を試してよう!(Filmora9)

    Filmora9で動画編集!!☆63種類あるモーションの効果を確認するためのサンプル動画を作成し…

  5. okakishi-chaya_img05

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

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

  6. filmora-pho017-02

    ファッションコレクション/フィルター10種(Filmora)

    ファッションコレクション/フィルター10種(Filmora); from yasuo kishi…

  7. filmora-008

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

    Filmora9で動画編集!!エフェクト/レンズフレアを使うと映像に12パターンの光源映り込みを…

  8. filmora-pho014-01

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

    トランジション「ベーシック編6(終) 」(Filmora) from yasuo kishiok…

Adobe Muse

Adobe Museならスピードアップ&コストダウン

My Portfolio

kishioka-design.myportfolio.com
PAGE TOP