webflow009-01

STUDY

タブの使用(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)前のページ

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

関連記事

  1. keynote-animation01

    Keynote Animation

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

    【Keynote】をプレゼンテーション用としての利用以外に、ネット…

  2. photo-titles

    After Effects

    Filmstocksが提供しているAfter Effectsのエフェクト「Photo Titles」…

    Filmstocksが提供しているAfter Effectsのエフェク…

  3. webflow018-01

    STUDY

    セクションの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  4. filmora-pho027-01

    Filmora

    ビジネスコレクション/オーバーレイ 6種(Filmora)

    ビジネスコレクション/オーバーレイ6種(Filmora); fro…

  5. WP-Visual-Loops

    After Effects

    ビジュアルループの作り方【Affter Effects】

    ■コンポジションの設定▼拡大表示■ビジュアルル…

  6. takoyaki-movie

    Filmora

    タイトルテキストの中に映像を映してみよう!(Filmora9)

    Filmora9で動画編集!!映画のタイトルでも見かけるようなテキ…

  1. svgdraw2018

    Adobe Muse CCを使ったホームページ制作

    SVGドローアニメーション(Adobe Muse CC)
  2. eyecatch-200506

    Keynote Animation

    Keynoteで作成したテキストアニメーションをPremiere Proで映像に…
  3. zakka2251-Can

    Photoshop

    飲料水の缶のモックアップ画像をPhotoshopで作成
  4. eyecatch-200411

    After Effects

    光の粒子が飛び散るモーショングラフィックス(After Effects)
  5. gadient-background

    Adobe Muse CCを使ったホームページ制作

    背景やグラフィックにグラデーションを(Adobe Muse)
PAGE TOP