menu

タブの使用(webflow)

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

◎Components/[Tabs]をドラッグして、画面上に配置します。

webflow009-02
webflow009-03

◎[Tabs Menu]と[Tabs Content]にパートが分割されています。

webflow009-04

◎[Tabs Menu]の編集作業
・タブの名称はText BlockをWクリックして編集する。
webflow009-05
・タブの数は「+」を選択して増やせます。
webflow009-06

◎[Tabs Content]の編集作業
・コンテンツを配置したい[Tab Pane]を選択する。
webflow009-07
・テキストや画像を配置して編集していく。
webflow009-08

◎[Tabs Menu]のデザインを変更する。
・タブを選択した状態で、Selector:で名称を設定。(例)Tab Link
・残り2つについても同名称を選択する。
・デフォルト、マウスオーバーなどそれぞれの状態の設定を行う。

webflow009-09
webflow009-10
webflow009-11

▽サンプル
live-preview

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

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

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

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

関連記事

  1. keynote-animation02

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

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

  2. filmora-pho014-01

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

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

  3. chart-cartoon-film1-1

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

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

  4. webflow005-01

    Link Blockの使用(webflow)

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

  5. filmora-pho007-01

    海外映画・ドラマ風のカラーグレーディング(Filmora)

    海外映画・ドラマ風のカラーグレーディング; from yasuo kishioka on Vim…

  6. webflow012-01

    不透明度の設定(webflow)

    ◎不透明度を設定した箇所を選択した状態でEffects/Opacityの%を設定する。※ただし、…

  7. filmora032-01

    26種類のフレームオーバーレイ(後半)(Filmora)

    26種類のフレームオーバーレイ(後半)(Filmora) from yasuo kishioka…

  8. filmora-pho004-01

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

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

PAGE TOP