検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >Google AMP amp-accordion を使用してネストされたアコーディオンを作成するにはどうすればよいですか?

Google AMP amp-accordion を使用してネストされたアコーディオンを作成するにはどうすればよいですか?

WBOY
WBOY転載
2023-08-29 19:13:11668ブラウズ

如何使用 Google AMP amp-accordion 创建嵌套手风琴？

ネストされたアコーディオン メニューは、大量の情報をコンパクトかつ直感的な方法で整理して表示する効果的な方法です。インターネットにアクセスする際にモバイル デバイスの重要性が高まるにつれ、読み込みを高速化し、ユーザー エクスペリエンスを向上させるために Web ページを最適化することがますます重要になっています。そこで、Google Accelerated Mobile Pages (AMP) プロジェクトが登場し、モバイル対応の Web ページを作成するためのスムーズで高速な読み込み方法を提供します。この記事では、Google AMP の amp-accordion コンポーネントを使用してネストされたアコーディオン メニューを作成し、モバイル Web ページで複雑な情報を明確かつ体系的に表示する方法を説明します。

Google アンプ

Google の Accelerated Mobile Pages (AMP) プログラムは、Web ページの読み込みの高速化と応答性の向上を促進することで、モバイル Web ブラウジングを強化するために 2015 年に開始されました。このプロジェクトは、モバイル デバイス上でほぼ即座にレンダリングされるように、柔軟で高速読み込みの Web ページを開発する方法を提供します。

AMP ページは、モバイル デバイスによってダウンロードおよび処理されるデータ量を削減するように設計されており、それによってページの読み込み時間が短縮され、全体的なユーザー エクスペリエンスが向上します。 AMP ページは通常、標準的な Web ページを簡略化して圧縮したバージョンで、単純な HTML、必要最低限​​の CSS、制限された JavaScript が含まれています。

＃＃＃アコーディオン＃＃＃

アコーディオンは、ユーザーが Web ページ上のコンテンツのセクションを展開したり折りたたんだりできるようにするユーザー インターフェイス要素です。特に大量のコンテンツを表示する必要がある場合に、情報がコンパクトかつ整理された方法で表示されます。アコーディオンは通常、複数のコンテンツ セクションで構成され、それぞれにタイトルが付いています。タイトルをクリックすると、対応するコンテンツ セクションを展開または折りたたむことができ、ユーザーはコンテンツを表示または非表示にすることができます。アコーディオンは、ユーザーが興味のあるコンテンツに簡単にアクセスして表示できるようにすることで、煩雑さを軽減し、ユーザー エクスペリエンスを向上させるのに役立ちます。

＃＃＃文法＃＃＃ リーリー

アンプとアコーディオンのタグ

amp-accordion タグは、Web ページ上にアコーディオンを作成できる AMP コンポーネントです。アンプ/アコーディオン コンポーネントは、展開可能および折りたたみ可能なセクションのセットで構成されており、各セクションにはタイトルとコンテンツが含まれます。タイトルは通常、コンテンツ セクションの表示/非表示を切り替えるために使用されるクリック可能な要素です。ユーザーがタイトルをクリックすると、現在の状態に応じてコンテンツ セクションが展開または折りたたまれます。

各属性とその可能な値を 1 つずつ紹介しましょう -

Id (オプション)
    - アコーディオン コンポーネントの一意の ID を指定します。これを使用して、CSS スタイルを適用したり、JavaScript を使用してコンポーネントを配置したりできます。

  • Expand-single-section (オプション)
    • - 存在する場合、一度に 1 つのセクションのみを展開できます。新しいセクションを展開すると、以前に展開したセクションは折りたたまれます。

  • Disable-session-states (オプション)
    • - 存在する場合、セッション状態はコンポーネントに対して無効になります。これは、ページの読み込みの間にコンポーネントの状態が保存されないことを意味します。

  • アニメーション (オプション)
    • - 存在する場合、セクションを展開または折りたたむときにアコーディオンがアニメーション化されます。

  • Layout (オプション)
    • - アコーディオンのレイアウトを指定します。デフォルト値は「container」で、コンテナを固定の幅と高さに設定します。他の可能な値には、「fixed-height」と「flex-item」が含まれます。

  • Class (オプション)
    • - コンポーネントに適用する 1 つ以上の CSS クラス名を指定します。

  • スタイル (オプション)
    • - コンポーネントに適用する 1 つ以上のインライン CSS スタイル プロパティを指定します。

  • ＃＃＃方法＃＃＃ Google AMP の amp-accordion コンポーネントを使用してネストされたアコーディオンを作成するには、以下の手順に従います -

HTML ファイルの

に AMP スクリプトを含めます。これは、次の行を追加することで実行できます: .

  • amp-accordion タグを使用して外部アコーディオンを定義します。アコーディオンでは、

    タグを使用して複数のセクションを定義できます。

  • 各セクションにタイトルと内容を追加します。ヘッダーは

    タグで囲む必要がありますが、コンテンツには表示する任意の HTML タグを使用できます。

  • ネストされたアコーディオンを作成するには、外側のアコーディオンのセクションのコンテンツ内に別の amp-accordion タグを追加します。

    • 内部アコーディオンでは、
  • タグを使用して複数のセクションを定義できます。外部アコーディオンのセクションと同様に、各セクションにはタイトルとコンテンツが必要です。

  • アコーディオンのスタイルを設定するには、ファイルにカスタム CSS を追加します。たとえば、アコーディオンに枠線を追加したり、フォントのサイズや色を変更したりできます。

    • アコーディオンを設定した後、ユーザーはタイトルをクリックしてコンテンツ セクションを展開または折りたたむことができます。これにより、情報を整理し、ユーザーが探しているものを見つけやすくなります。

Example

的中文翻译为：

示例

以下HTML代码旨在使用Google AMP amp-accordion创建嵌套手风琴。代码包括两个amp-accordion元素，一个在另一个内部，以创建嵌套手风琴结构。外部手风琴和内部手风琴类用于为手风琴添加边框和边距样式。使用section、h2、h3和p标签添加手风琴的内容。当用户点击手风琴标题时，根据Google AMP amp-accordion的功能，内容会展开或折叠。

<!DOCTYPE html>
<html>
<head>
   <title>How to create Nested Accordion using Google AMP amp-accordion?</title>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
   <style amp-custom>
      .outer-accordion {
         border: 1px solid #ccc;
         margin: 10px 0;
      }
      .inner-accordion {
         border: 1px solid #eee;
         margin: 10px 0;
      }
   </style>
</head>
<body>
   <h4>How to create Nested Accordion using Google AMP amp-accordion?</h4>
   <amp-accordion class="outer-accordion">
      <section>
         <h2>Outer Section 1</h2>
         <amp-accordion class="inner-accordion">
            <section>
               <h3>Inner Section 1</h3>
               <p>Content for inner section 1.</p>
            </section>
            <section>
               <h3>Inner Section 2</h3>
               <p>Content for inner section 2.</p>
            </section>
         </amp-accordion>
      </section>
      <section>
         <h2>Outer Section 2</h2>
         <p>Content for outer section 2.</p>
      </section>
   </amp-accordion>
</body>
</html>

结论

总而言之，利用 Google AMP 的 amp-accordion 组件在 AMP 页面上制作嵌套的手风琴是一种简单的方法，使您能够以压缩且直观的方式订购内容。嵌套的手风琴形成是通过将 amp-accordion 组件嵌入彼此来完成的，该产品是一个多功能的交互式 UI 元素，可以改善 AMP 页面上的用户体验。通过这篇文章，我们的愿望是清楚地了解如何使用 amp-accordion 创建嵌套手风琴，以及它如何提高 AMP 页面的价值。

以上がGoogle AMP amp-accordion を使用してネストされたアコーディオンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html Session class flex ui
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSS の絶対単位と相対単位次の記事：CSS の絶対単位と相対単位

関連記事

続きを見る