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

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

WBOY

リリース： 2023-08-29 19:13:11

転載

634 人が閲覧しました

如何使用 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 (オプション)

Expand-single-section (オプション)
Disable-session-states (オプション)
アニメーション (オプション)
Layout (オプション)
Class (オプション)
スタイル (オプション)
＃＃＃方法＃＃＃ 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 サイトの他の関連記事を参照してください。