# タブ ### タブ要素について PageFlyの5つのレイアウト要素の1つである[タブ要素](https://help.pagefly.io/manual/tabs-element/)は、コンテンツを整理し、きれいでナビゲートしやすい形式で表示するために設計された多機能な機能です。情報を個別のタブに分割することで、ユーザーがセクション間を簡単にアクセスし、ナビゲートできるようになります。 この要素は、コンテンツが多いページに特に役立ちます。ページを整理し、簡単にナビゲートできるようにすることで、煩雑さを軽減し、ユーザーエクスペリエンスを向上させます。 こちらのビデオチュートリアルをご参照ください： {% embed url="" %} ### タブ要素へのアクセス方法 * ステップ1：**Elements** アイコンをクリック > **PageFly** タブで **Tabs** 要素を選択します。 * ステップ2：目的のタブバリアントをエディタにドラッグアンドドロップし、使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f122f4c90efff859180efd667a23f10a66950832%2Ftab-element.gif?alt=media) タブ要素には、ほとんどのニーズに対応する複数のバリエーションがあります。しかし、時間節約に役立つバリエーションをさらに追加し続けます。 ### タブ要素の設定方法 タブ要素には、コンテンツの表示を可能な限り高いコンバージョン率になるように微調整できる多くのパラメータが用意されています。 レイアウト内の要素を選択して、その設定を表示します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-73d05638f04de17a33fb1f981f2f0e1289e613ed%2FAD_4nXepFHwDq4df7oyknhFCTMeO8EEyZUS__jSEMwsHE4s3vEdllW513Eu_37q1B5WafoJGAhtHcCc_lc6ltM9Z_4wbuLqySLCdMxHVt5K5ctPgbi-KN_mdWNNKOwRnlRZWZ4-mUGJn_EKYZ-uKXgJgZAkey3RRhf3hW8uQyJoUFfFlZAQ.png?alt=media) タブ要素にコンテンツを追加するには、各タブのタブコンテンツに要素をドラッグアンドドロップする必要があることに注意してください。見出し、段落要素、商品バリアント、商品詳細要素などを追加できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc9fmdkpeV3VwI3zoXIETLq-qPinYminnkla59xleyPdpMICwezMibsuNulZDSP8b0-ceETzuB5nw_VW3TuniEaXjdNWyVFKC40gTYo0giUTCMMr5GFgST_jO43t124pBDDj3eU3whyEQ88VddCrgkey3RRhf3hW8uQyJoUFfFlZAQ.gif) #### 一般設定 **タブ要素設定** タブ要素全体を選択し、一般タブに移動すると、タブ要素を調整できる多数のパラメータが表示されます。 | | | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

Tab items:

- Add new tab items by clicking on the Add new items button.

- Duplicate or remove tabs within the Tab element by using the two buttons next to each tab item.

|

| | **Default active item**: Choose which tab will be displayed first when the page loads. | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc5qnCcu5M5sr8RBk8-7z0uN-rbu_kvSpfwOrCCC1iTnXg0jlLyCi3sFFAPO0Gdzub1uyJVkazy-LQOe6iHW3tp8D5-D3W5Dm8qXRl8ckA8lxa93dZGeMepCo6gYGD_QIZ1we1hTN0oY5uVVsA82Qkey3RRhf3hW8uQyJoUFfFlZAQ.png) | | **Headers position**: Adjust the tab headers' position | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f5d000d86cc795e0addbf6b558e79ca4d7d5c1f2%2FAD_4nXcyYfOrpK4131tpdJXzTDV99hks7E1uxU6R-Uyqn33iWA3lgcZzMB7HNbjGaBWl7IrqDi9GPb5vIoVE5b1aG-ygfZ6jeEptnNxZVdySzxolI82yVTLs874udgII_iu9Hk5fJTyYKaBt3J5SgcB6zgkey3RRhf3hW8uQyJoUFfFlZAQ.gif?alt=media) | |

Header Layout: Choose the layout type for the tab headers.

There are 3 types available: - Wrap - Scrolling - Dropdown

Note: You can select a different header layout for each device type

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a5fd13792b2a8204388cf1d8aa82211077bae31f%2FAD_4nXdsXc5NsCz_bD9x77jRujYvZTzRYCGpLZ53QpkLt-3XIEgvEwyGCrJF3HBn4eFjHMLx9zaGdSBEe3NmpRAW_z3HpJayOc0X2H1Y5U847Z3J0rLnzvHC6_omBBhMOYsVRzsa3tz9W8G8-2UkSrd2AAkey3RRhf3hW8uQyJoUFfFlZAQ.png?alt=media) | | **Menu Max Width**: You can designate the header's maximum width when you set the header position to Left or Right. The available range is from 0px to 886px. | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9f78aa8f8e16946e0653b7ad06ca215da4446545%2FAD_4nXcaA9QPCKFDU9aU4u3c41EdyYMOIKyzxxRhZ9-0R53SeVVIg8sXDSMlwCgWmVxNetNZRRDeI9wHJ3azUw9JqwoV15zFzWWo8TjMJ-C6zidthWNne9ZdXYnJVDDGIuGmoEYX0CwAWDayh6Byd_CBQkey3RRhf3hW8uQyJoUFfFlZAQ.gif?alt=media) | |

Set Menu Full Width: Enable this option if you want your Tab Menu to fill the entire line

Note: This option only applies to the header positions at the top and bottom

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-32510e0dcef26f4dba0012419884552722f1ea79%2FAD_4nXefzPa9VO1o6DghBA51Koy4NdJ1eirXOzkjKgcrVJTCZdPxvJLKSpJaMkq0LzHLzTo2g8p-pZAKqvpgPMyjXINiqbZYRphnnqkwFrqV_daEqYnL_rlPols1hUf35NbeCiphyjAPJSJtWTKsZO5eUgkey3RRhf3hW8uQyJoUFfFlZAQ.png?alt=media) | |

Horizontal Alignment: Adjust the horizontal alignment of the Tab Header Menu to Left, Center, or Right

Note: This option only works when the Tab Header Menu is not set to full width

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1f5ca21186727f13424399aa1ae0b14374b8525f%2Ftab-element-2.gif?alt=media) | **タブヘッダー設定** タブ内の特定のタブヘッダーを編集するには、目的のタブヘッダーを個別に選択 > 一般タブに進みます。 \| Tab items: - Add new tab items by clicking on the Add new items button. - Duplicate or remove tabs within the Tab element by using the two buttons next to each tab item. | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ee24db3c6b3e8fc829cd90c8b271dd909987d5ce%2FAD_4nXenG8iHltbDhtOCMmPFDCOzziL7N_-PHaryT5c093t7MMRSONZC6Wx9NXvXr9olxEBKC7EMGjqeLt_8z-WDY-uTCr3AH2fzfQTFNocqLk5WeI_OMDt5tY0pXwj6VFN6yUJYXOdggk8U39xdL9iP5wkey3RRhf3hW8uQyJoUFfFlZAQ.gif?alt=media) | | | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Header text: Change the name of the tab header. | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5864ca94cebc380958e3dfd5c36f1a4be581f4b0%2FAD_4nXelhcQMN0Mj2TAzbn7mwp05LZl7GMtf14PVIXdZi_e8O5qDaI1CSLjUIDeD7rywYrgbEcQZIsgmglVPJTzilcxfoEYQRQutic2Htdx0S6N2iJLOkaPRLndSyiA8eE5w3_9oHZs8OE211V0J-ISc2Akey3RRhf3hW8uQyJoUFfFlZAQ.png?alt=media) | | Show icon: Enable this option to show an icon in the Tab Header | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-25c6e0c8ee5d806b289b10ab5a19fb8dbc583bae%2FAD_4nXeiraY4z8FjmsEzMARysYtQ6MXLvI8vqTZh0V3CGPN9RAaquEdvxhGpbqUlbw_kvtiFplvQegWpst_FOXyPrnDQ0vFLbX-k2MpVn1fVNE7HWiMOQXl_CIvuDVSAnwLOjUlpBvh_yg8zYjMACsSikey3RRhf3hW8uQyJoUFfFlZAQ.png?alt=media) | |

Anchor text: Add link label or link text, which is the visible, clickable text in an HTML hyperlink for the Tab Header.

Note: This feature only works on the live page

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1c1c712dfb1c175c5a67688641d6e20cfcbdc6e3%2FAD_4nXdh6e4Bn2GH7eRYL9WwD3h7p8to83M-yzJXfoTGbU7sf_N0nK09f8GwFphOb1jyaC6WgsRXwMiSylL6gNkG00viK39rM_EWvZHF9gS1iav9sJ7LyRMw0PEhst0Hsb0uh6yRWLhw5nBNbQOdMsjOtQkey3RRhf3hW8uQyJoUFfFlZAQ.png?alt=media) | 属性、表示、アニメーションのパラメータに関する詳細については、こちらの[一般設定ガイド](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。 #### スタイル設定 スタイルタブでは、タブヘッダーを3つの異なる状態でスタイル設定できます。 * **Normal State**: 操作されていないときのタブのデフォルトの外観です。 * **Mouse Over State**: ユーザーがタブにマウスオーバーしたときにアクティブになる状態です。インタラクティブな効果を追加して、ユーザーエクスペリエンスを向上させることができます。 * **Active/Selected State**: 現在アクティブまたは選択されているタブを示す状態で、ユーザーが表示しているタブを識別するのに役立ちます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfzaRCcoVZSufypAXkDCnkCJH4en7ejYN5e_D1spUzKeWo9ibxRVSiAq8AKam0ctuXUATm4eUicUVA9Xa8SrFS0_VZqryzZZjfNd2nb5nF8uUvthqr5ReLlCH1oQv6sDB51vFXdOQmfrPi5bofO5Akey3RRhf3hW8uQyJoUFfFlZAQ.png) さらに、間隔、境界線、タイポグラフィ、色など、スタイルタブで様々なパラメータを変更して、タブ要素がページの全体的なレイアウトと一致するように保証できます。 スタイルタブに関する詳細情報はこちらから確認できます: [こちら](https://help.pagefly.io/manual/elements-style-settings/) ### 一般的な問題 #### タブがモバイルで正しく表示されない PageFlyのレスポンシブデザインツールを使用して、タブ要素がレスポンシブであることを確認できます。スタイルタブで、モバイルデバイスに特化したレイアウト、フォントサイズ、間隔を調整することを忘れないでください。異なる画面サイズでページをプレビューして、タブがすべてのデバイスで適切に機能し、見栄えが良いことを確認してください。 #### タブ内のコンテンツが重なったり、位置がずれたりする 各タブ内のコンテンツをチェックして、要素が適切に配置され、間隔が調整されていることを確認してください。スタイルタブを使用して、パディング、マージン、配置設定を調整します。必要に応じて、各タブ内のコンテンツを簡素化して、きれいで整理された表示を保証します。 ### バージョンアップデート #### 4.15.0 バージョン4.15.0のタブ要素には重要なアップデートが含まれています： * タブ要素コードを最適化し、レイアウトシフトを減らし、ライブプレビューでの読み込み速度を向上させました。 * ヘッダーに2つの新しいレイアウトを追加し、合計3つのレイアウト（Wrap、Scrolling、Dropdown）になりました。 * 左右の位置にあるタブヘッダーの幅を設定するための「Menu width」パラメータを導入しました。 * ライブプレビューでDropdownレイアウトにオートスクロール機能を実装しました：タブ要素がページの下部に配置されており、ユーザーがドロップダウンボタンをクリックすると、タブ要素は自動的に上方にスクロールして、選択するためのメニューを完全に表示します。 ### よくある質問 **1. タブ要素をユーザーフレンドリーにするにはどうすればよいですか？** タブ要素をユーザーフレンドリーにするには、各タブにコンテンツを正確に説明する明確で簡潔なラベルを使用します。顧客を圧倒しないように、タブの数は管理しやすいように、理想的には3〜5個に保ちます。適切なフォントと色を使用して、タブが読みやすく、視覚的に区別できるようにします。 **2. タブ内で最も効果的なコンテンツの種類は何ですか？** タブは、商品詳細、FAQ、技術仕様など、関連するカテゴリにグループ化できるコンテンツを整理するのに理想的です。ユーザーが見逃す可能性があるため、必須情報をタブ内に配置することは避けてください。代わりに、メインコンテンツを補完する補助情報にタブを使用します。 **3. タブ要素のスタイリングに関するいくつかのベストプラクティスは何ですか？** タブ要素のスタイリングに関するベストプラクティスには、ブランドと一致する一貫性のあるフォントと色を使用することが含まれます。アクティブなタブが非アクティブなタブと視覚的に区別されるようにして、ユーザーが表示しているタブを理解できるようにします。適切な間隔とパディングを使用して、各タブ内のコンテンツが読みやすく、窮屈でないことを保証します。