カスタムアコーディオンを作成する - Webflow ヘルプ

ドロップダウン要素を追加する方法

ドロップダウン要素にはデフォルトの組み込みアクションがあり、カスタムアコーディオンとして便利です。クリックするとドロップダウンリストが開き、別の要素やページの一部をクリックすると閉じます。

サイトにドロップダウン要素を追加するには、追加パネル (A) > 要素 > 高度に移動し、ドロップダウン要素をキャンバスにドラッグします。

デフォルトのドロップダウンスタイルを変更する方法

カスタムアコーディオンでドロップダウンを使用するには、デフォルトのドロップダウン要素のスタイルを変更する必要があります。特に、ドロップダウンが親要素（つまり、カスタムアコーディオンを保持する要素）のスペースを完全に埋めるように幅を調整する必要があります。

デフォルトのドロップダウンスタイルを変更するには：

1. デザイナーキャンバス上の親ドロップダウン要素を選択します（この例では「アコーディオンアイテム」というクラスを付けています）
2. スタイルパネル > サイズに移動
3. 幅を100%に設定

ドロップダウン切り替えをカスタマイズする方法

次に、ドロップダウン切り替えをカスタマイズして、親要素を完全に埋め、アコーディオンが閉じたときにドロップダウンリスト内のコンテンツを隠す必要があります。ドロップダウン切り替えの表示と高さのプロパティを調整します：

1. キャンバス上のドロップダウン切り替えを選択し、クラス（例：「アコーディオン切り替え」）を付けます
2. スタイルパネル > レイアウトに移動
3. 表示をフレックスボックスに設定して水平スペースを埋める
4. 整列を中央に設定してテキストを垂直に中央揃え
5. スタイルパネル > サイズに移動
6. 高さの値を設定（例：80px）

アコーディオンのスタイルを設定する方法

サイトをプレビューしてアコーディオンをクリックすると、アコーディオンが開くものの、デフォルトのコンテンツが周囲のコンテンツに重なって表示されることがあります。これは、ドロップダウンリストのデフォルトの位置スタイルが絶対になっているためです。コンテンツが展開し、周囲の要素が移動するように変更する必要があります。

アコーディオンのスタイルを設定するには：

1. 親のドロップダウン要素を選択（例：「アコーディオン項目」）
2. 「歯車」アイコンをクリックしてドロップダウン設定を開き、メニューを表示
3. ドロップダウンリスト要素を選択
4. スタイルパネル > 位置に移動
5. 位置を静的に設定
6. 親のドロップダウン要素（「アコーディオン項目」）を選択
7. スタイルパネル > サイズに移動
8. オーバーフローを隠すに設定

カスタムアニメーションを作成する方法

カスタムアコーディオンを開閉するカスタムアニメーションを作成します：

• 初期アクションを作成
• アコーディオンの開くアニメーション
• アコーディオンの閉じるアニメーション

初期アクションを作成

アコーディオンのために2つの初期アクションを作成します。

ドロップダウンの場合：

1. ドロップダウン要素を選択（「アコーディオン項目」）
2. インタラクションパネル > 要素トリガーに移動し、新しい要素トリガーを作成
3. ドロップダウンが開くを選択
4. メニューが開くの下でアクションを選択
5. カスタムアニメーションの下でアニメーションを開始を選択
6. タイムアニメーションを作成し、名前を付ける（例：「アコーディオンが開く」）
7. アニメーションにアクションを追加：サイズをその他の下に
8. 初期状態として設定
9. 高さの値を入力（例：80px）
10. 保存

トグルアイコンの場合：

1. ドロップダウン要素内のアイコンを選択
2. アイコンクラスを付与（例：「アコーディオンアイコン」）
3. 親のドロップダウン要素を選択
4. インタラクションパネルを開く
5. ドロップダウンが開くインタラクションを選択
6. タイムアニメーション（「アコーディオンが開く」）を編集
7. アイコン（「アコーディオンアイコン」）を選択
8. アクションを追加：回転を変形の下に
9. 初期状態として設定
10. z軸を0度に設定
11. 保存

アコーディオンの開閉をアニメーション化する

アコーディオンを開いてアイコンを回転させるには：

1. 親のドロップダウン要素を選択
2. インタラクションパネルを開く
3. ドロップダウンが開くインタラクションを選択
4. タイムアニメーションを編集（「アコーディオンが開く」）
5. アクションを追加：サイズをその他から選択
6. 初期状態のチェックを外す
7. 高さに「auto」を入力
8. アイコンを選択（「アコーディオンアイコン」）
9. 同じタイムスタンプでアクションを追加：回転を変形から選択
10. z軸を180度に設定
11. 保存

アコーディオンの閉じるアニメーションを作成する

閉じるアニメーションを作成するには：

1. 親のドロップダウン要素を選択（「アコーディオンアイテム」）
2. インタラクションパネルを開く
3. ドロップダウンが開くインタラクションを選択
4. メニューが閉じるの下でアクションを選択
5. アニメーションを開始を選択
6. タイムアニメーションを作成し、名前を付ける（例：「アコーディオンが閉じる」）
7. アクションを追加：サイズをその他から選択
8. 高さの値を入力（例：80px）
9. アイコンを選択
10. 同じタイムスタンプでアクションを追加：回転を変形から選択
11. z軸を0度に設定
12. 保存

Webflowヘルプに戻る