広告

ampサイトでアコーディオンを使うとき

WEB
この記事は約4分で読めます。

ampサイトで、アコーディオン を使うには2つ方法があります。

  • amp-accordionを使う方法
  • cssだけでアコーディオン を実装する方法

どちらも、同じように使えます

amp-accordionを使う場合

まず、チェックするべきは、下記の2つのサイト。

ampプロジェクトサイト(最新情報が反映されている)

Documentation:
A stacked list of headers that collapse or expand content sections with user interaction.

AMPのデモやサンプルがあるサイト

https://ampbyexample.com/components/amp-accordion/#hidden-header

日本語訳のサイトもありますが、英語のサイトでグーグル翻訳を使うだけでも、ほぼ内容が理解できます。

簡単な説明

amp-accordionを有効化します。

<head>から</head>の中に次を入れてください。

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

htmlとcss(scss)の例

disable-session-states をamp-accordionのタグに挿入すると、リロードされたとき、アコーディオンが閉じて表示されます。

animate をamp-accordionのタグに挿入すると、アコーディオンの開閉にアニメーションがつきますが、詳細の設定ができないので、アニメーションを重視するなら、下記の「cssだけで実装する場合」で設定しましょう。

ちなみに、上のサンプルは、下記のサイトで使用しているものから抜粋しました。私のサイトなので、著作権とか問題なしですからね。

https://japanbrainfunctionstrainingcenter.xyz/

 

cssだけで実装する場合

cssだけで実装するには、まず、input要素を使えるようにしないといけません。

そこで、amp-formとamp-mustacheを有効化します。

amp-formだけでも大丈夫です。
ただ、私は心配性なので、エラーが出なくても、一応有効にしてあります。

<head>から</head>の中に次を入れてください。

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

amp-formについての詳細は、下記の2つのサイトを見てくださいね。

Documentation:
Allows you to create forms to submit input fields in an AMP document.
https://ampbyexample.com/components/amp-form/

ここまで、できたら、後は、html5で実装するときと同じようにすればいいだけ。

参考までにhtmlとcssを書いておきます。

複数使うときは、<label for=”label1″ >と、<input type=”checkbox” id=”label1″ class=”accordion_css” />のforとidを同じものに変えてください。

例)<label for=”label2″ > <input type=”checkbox” id=”label2″ class=”accordion_css” />

注意:下記のファイルのコメントですが、scssで使っているので// となっています。

cssファイルで使うときは、/* コメント */ に変更してね。

絶対に忘れてはいけない注意点

アコーディオンを使うとき、heightとmax-heightの設定に注意!

アコーディオン要素の上の要素でmax-height,heightを設定していると、途中でオーバーフロー(アコーディオンで広げた文字や画像が重なるor消える)ことに!


コレを忘れてて、見つけるのに、2時間も掛かった・・・