SYNCER

SYNCER

<amp-accordion> - アコーディオンを設置する

1件

公開日:

AMPのamp-accordionは、アコーディオンを設置するための要素です。クリックして開閉するコンテンツを設置できます。

概要

名前
amp-accordion
可用性
Stable (安定)
サポートするレイアウト
container
必要なスクリプト
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
検証
https://github.com/ampproject/amphtml/blob/master/extensions/amp-accordion/0.1/validator-amp-accordion.protoascii
ドキュメント
https://www.ampproject.org/docs/reference/extended/amp-accordion.html

属性

disable-session-states

通常、折り畳みの状態はsessionStorageでブラウザに保存されます。開いたタブは次回訪問した時も最初から開いています。状態の保存を拒否して毎回デフォルトの状態を表示するには、この属性を付けて下さい。論理属性。

デモを見る

expanded

この属性を付けると、そのコンテンツが最初から開いた状態になります。子要素のsection要素に付ける属性です。section要素が1つしかないアコーディオンで指定するとエラーになります。論理属性。

デモを見る

共通属性

AMPの全てのタグで利用できる共通属性を指定できます。

説明

ライブラリの読み込み

amp-accordionを利用するには、専用のライブラリを読み込む必要があります。

HTML

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

ルール

amp-accordion要素には下記のルールがあります。これらを違反しないようにしましょう。

  • amp-accordion要素の直接の子要素は、section要素でなければいけません。
  • section要素は、必ず2つの子要素を持たなければいけません。
  • section要素の1つ目の子要素は開閉ボタン。h1、h2、h3、h4、h5、h6、headerのいずれかの要素でなければいけない。
  • section要素の2つ目の子要素はコンテンツの内容。
  • section要素はいくつでも設置できる。
  • section要素にexpanded属性を付けると、そのコンテンツはデフォルトで開いた状態になる。
  • section要素が1つだけしかないのにexpanded属性を付けると、文法エラーになりアコーディオンは表示されない。
  • 開閉状態はsessionStorageに保存される。保存を拒否するにはdisable-session-states属性を付ける。

基本的な使い方

コンテナの用意

amp-accordion要素を用意します。

HTML

<amp-accordion>
</amp-accordion>

section要素の用意

コンテンツの数だけ、section要素を子要素として挿入します。

HTML

<amp-accordion>

	<!-- 1つ目のコンテンツ -->
	<section>
	</section>

	<!-- 2つ目のコンテンツ -->
	<section>
	</section>

</amp-accordion>

開閉ボタンの用意

section要素の1つ目の子要素が、クリックすると開閉するボタンになります。h1〜h6、またはheader要素でなければいけません。

HTML

<amp-accordion>

	<!-- 1つ目のコンテンツ -->
	<section>
		<h2>1つ目のコンテンツを開閉する</h2>
	</section>

	<!-- 2つ目のコンテンツ -->
	<section>
		<h2>2つ目のコンテンツを開閉する</h2>
	</section>

</amp-accordion>

コンテンツの用意

section要素の2つ目の子要素が、開いた時に表示されるコンテンツになります。複数の要素を配置したい場合は全体をdiv要素などで囲みましょう。section要素に3つ以上の子要素を含めるとエラーになります。

HTML

<amp-accordion>

	<!-- 1つ目のコンテンツ -->
	<section>
		<h2>1つ目のコンテンツを開閉する</h2>
		<p>コンテンツの内容です。</p>
	</section>

	<!-- 2つ目のコンテンツ -->
	<section>
		<h2>2つ目のコンテンツを開閉する</h2>
		<div>
			<p>複数の要素を含めたい場合は、全体をdiv要素などで囲みましょう。</p>
			<p><amp-img src="/image/photo/8.jpg" width="280" height="210" layout="fixed"></amp-img></p>
		</div>
	</section>

</amp-accordion>

デモを開く

デフォルトで開く

section要素にexpanded属性を付けると、そのコンテンツが最初から開いた状態になります。section要素が1つしかない場合に付けるとエラーになるのでご注意下さい。

HTML

<amp-accordion>

	<!-- 1つ目のコンテンツ -->
	<section>
		<h2>1つ目のコンテンツを開閉する</h2>
		<p>コンテンツの内容です。</p>
	</section>

	<!-- 2つ目のコンテンツ -->
	<section expanded>
		<h2>2つ目のコンテンツを開閉する</h2>
		<div>
			<p>最初から開いた状態です。</p>
			<p><amp-img src="/image/photo/8.jpg" width="280" height="210" layout="fixed"></amp-img></p>
		</div>
	</section>

</amp-accordion>

デモを開く

状態の保存

デフォルトでは開閉状態が、sessionStorageに保存されます。つまり開いたコンテンツは、次回アクセスしても開いています。これを拒否して毎回デフォルトの状態から表示したい場合、disable-session-states属性を付けて下さい。

HTML

<amp-accordion disable-session-states>
	...
</amp-accordion>

デモを開く

スタイリング

開いた状態と閉じた状態でスタイルを振り分けることができます。開いた状態だと、section要素にexpanded属性が付くことを利用してセレクタを指定しましょう。

CSS

/* 開いた状態 */
section[expanded] {
}

/* 閉じた状態 */
section:not([expanded]) {
}

例えば開いた状態と閉じた状態でボタンのテキストを変えるには次の通りです。

HTML

<amp-accordion>
	<section>
		<h2><span class="open">開く</span><span class="close">閉じる</span></h2>
		<p>コンテンツの内容です。</p>
	</section>
</amp-accordion>

デモを開く

CSS

/* 開いた状態 */
section[expanded] .open {
	display: none ;
}

/* 閉じた状態 */
section:not([expanded]) .close {
	display: none ;
}

サンプルコード

HTML

<!doctype html>
<html amp>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<amp-accordion> - アコーディオンを設置する</title>
		<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-accordion/">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		<style amp-custom>
			body {
				padding: 12px ;
				background-color: #fff ;
			}
		</style>
		<script type="application/ld+json">
			{
				"@context": "http://schema.org",
				"@type": "NewsArticle",
				"headline": "記事のタイトル",
				"image": [
					"eyecatch.jpg"
				],
				"datePublished": "2017-08-23T00:00:00+0900"
			}
		</script>
		<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
		<script async src="https://cdn.ampproject.org/v0.js"></script>
	</head>
	<body>

<amp-accordion>
	<section>
		<h2>開閉する</h2>
		<div>
			<p>アコーディオンの内容です。</p>
			<p><amp-img src="/image/photo/8.jpg" width="280" height="210" layout="fixed"></amp-img></p>
		</div>
	</section>
</amp-accordion>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

</body> </html>

<style amp-custom>

</style>