SYNCER

SYNCER

共通属性

1件

公開日:

共通属性(Common Attributes)は、AMPの全ての専用タグ(amp-imgなど)で共通して利用できる属性です。

Common Attributes
Common Attributes
AMPの公式ドキュメント(英語)。共通属性(Common Attributes)について説明があります。

fallback属性

フォールバック要素。この属性を付けた要素は、目的のコンテンツが表示できない場合に代わりに表示されるコンテンツになります。コンテンツが表示できないケースは「画像や動画が存在しない」「ブラウザが機能をサポートしていない」など様々です。フォールバックを適用したい要素の子要素に指定します。

fallback属性の例

<!-- amp-img要素が表示できない場合にp要素が表示される -->
<amp-img src="./image.png" width="300" height="225">
	<p fallback>画像を表示できませんでした。</p>
</amp-img>

デモを開く

height属性

高さ。

heights属性

HTMLのsizes属性を高さに適用できます。下記は、ウィンドウの幅が260px以上の時に高さを200px、それ以外の場合には高さを400pxにする例です。

heights属性の例

<amp-img
	heights="(min-width:260px) 200px, 400px"
	src="/image/photo/13.jpg"
	width="300"
	height="225">
</amp-img>

layout属性

AMPでは全ての要素にlayout属性が付きます。このlayout属性によって、ブラウザに表示される要素のサイズが決まります。layout属性の値は明示的に指定するか、または、width属性とheight属性によって自動的に決められます。

種類

layout属性は列挙属性です。下記のキーワードの中から値を指定して下さい。

widthheight説明
nodisplay不要不要表示されない。
fixed必要必要固定の横幅と高さを持つ。
responsive必要必要横幅はコンテナ要素の横幅と同じになる。高さはwidth属性とheight属性のアスペクト比を維持して自動で調節される。横幅はスタイルシートのmax-widthで制御することもできる。
fixed-height不要必要横幅はコンテナ要素の横幅と同じになるが、高さはheight属性で指定したまま変更されない。
fill不要不要横幅も高さもコンテナ要素と同じになる。
container不要不要この要素自体はサイズを持たずに、子要素の横幅と高さでサイズが決まる。

ルール

layout属性が明示的に指定されていない場合、次のルールに従ってレイアウトが決まります。

  • height属性があり、width属性がない、またはautoの場合、fixed-heightになる。
  • width属性、またはheight属性が、sizes属性と一緒に指定されている場合、responsiveになる。
  • width属性、またはheight属性がある場合、fixedになる。
  • width属性とheight属性のどちらもない場合、containerになる。

media属性

メディアクエリを指定します。この属性を付けた要素は、指定したメディアクエリの条件に合う場合は表示され、合わない場合は表示されません。非表示の場合は、ただ表示されないだけではなく、リソースのロードも行なわれません。ユーザーがウィンドウをリサイズした時、メディアクエリは評価され直します。下記は、ウィンドウの幅が260px未満では画像を表示しない例です。

media属性の例

<!-- 260px以上の場合にだけ表示 -->
<amp-img
	media="(min-width: 260px)"
	src="/image/photo/19.jpg"
	width="300"
	height="225">
</amp-img>

noloading属性

この属性を付けると、画像や動画、広告をロードする時の、ローディングのアニメーションの表示を拒否できます。

noloading属性の例

<!-- amp-img要素のローディングアニメーションを非表示 -->
<amp-img src="/image/photo/19.jpg" width="300" height="225" noloading>
</amp-img>

デモを開く

on属性

HTMLのonclick属性のように、要素にイベントを設定できます。

Actions and Events in AMP
Actions and Events in AMP
AMPの公式ドキュメント(英語)。イベントの設定について説明があります。

構文

値は{イベント}:{ターゲットID}.{メソッド}という形式で指定します。{メソッド}は省略できる場合があります。例えば下記は「タップ(tap)したらid=targetの要素に対してhide()を実行する」という内容です。hideは非表示にするメソッドなので、id=targetの要素は非表示になるでしょう。

on属性の例

<p><code>tap:target.hide</code></p>

<a on="tap:target.hide">ここをタップして下さい。</a>

<p id="target">このテキストが消えます。</p>

デモを開く

イベント

イベントの一覧です。

全要素

全てのAMP専用タグで使用できます。

イベント名説明
tapタップ、またはクリックした時に発火する。見る

input要素

input要素で使用できます。

イベント名説明
change内容に変化があった時に発火する。見る

amp-carousel要素

amp-carousel要素で、type属性がslidesの時のみ、使用できます。

イベント名説明
goToSlideスライドした時に発火する。見る

form要素

form要素で使用できます。

イベント名説明
submit送信された時に発火する。-
submit-success送信が成功した時に発火する。-
submit-error送信が失敗した時に発火する。-

メソッド

メソッドの一覧です。

全要素

全てのAMP専用タグに対して実行できます。

メソッド名説明
hide非表示にする。見る

amp-image-lightbox要素

amp-image-lightbox要素に対して実行できます。

メソッド名説明
open (省略)画像のライトボックスを開く。2017年2月現在、メソッド名を省略しないとエラーになる。見る

amp-lightbox要素

amp-lightbox要素に対して実行できます。

メソッド名説明
open (省略)ライトボックスを開く。2017年2月現在、メソッド名を省略しないとエラーになる。見る
closeライトボックスを閉じる。見る

amp-live-list要素

amp-live-list要素に対して実行できます。

メソッド名説明
update (省略)リストを更新する。-

amp-sidebar要素

amp-sidebar要素に対して実行できます。

メソッド名説明
open (省略)サイドバーを開く。見る
closeサイドバーを閉じる。見る
toggleサイドバーが開いている時は閉じる、閉じている時は開く。見る

amp-state要素

amp-state要素に対して実行できます。

メソッド名説明
(省略)データを更新する。-

amp-user-notification要素

amp-user-notification要素に対して実行できます。

メソッド名説明
dismiss (省略)通知要素を非表示にする。-

amp-carousel要素

type属性がslidesamp-carousel要素に対して実行できます。

メソッド名説明
goToSlide(index=n)nに指定した番号(画像)にスライドする。番号は0から数える。見る

amp-video要素

amp-video要素amp-youtube要素に対して実行できます。

メソッド名説明
play再生する。2017年2月現在、ドキュメントには掲載がありますが動作しません。見る
pause停止する。2017年2月現在、ドキュメントには掲載がありますが動作しません。見る
muteミュートにする。2017年2月現在、ドキュメントには掲載がありますが動作しません。見る
unmuteミュートを解除する。2017年2月現在、ドキュメントには掲載がありますが動作しません。見る

placeholder属性

プレースホルダー要素。この属性を付けた要素は、コンテンツが表示される前段階で表示されるコンテンツになります。目的のコンテンツが表示された後は非表示になります。容量の大きい画像や動画を表示する時などに利用します。

placeholder属性の例

<!-- amp-img要素が表示されるまでp要素が表示される -->
<amp-img src="/image/photo/9.jpg" width="300" height="225">
	<p placeholder>画像を読み込み中です。</p>
</amp-img>

デモを開く

sizes属性

HTMLのsizes属性と同じです。下記は、ウィンドウの幅が260px以上の時に横幅を260px、それ以外の場合には横幅を100pxにする例です。

heights属性の例

<amp-img
	sizes="(min-width:260px) 260px, 100px"
	src="/image/photo/16.jpg"
	width="300"
	height="225">
</amp-img>

width属性

横幅。