共通属性
公開日:
共通属性(Common Attributes)は、AMPの全ての専用タグ(amp-imgなど)で共通して利用できる属性です。
- 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属性は列挙属性です。下記のキーワードの中から値を指定して下さい。
値 | width | height | 説明 |
---|---|---|---|
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
- 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属性がslides
のamp-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属性
横幅。