GoogleAMP-レイアウト

AMP-Layoutは、Google-ampで利用できる重要な機能の1つです。Amp Layoutは、ページが読み込まれたときに、ちらつきやスクロールの問題を発生させることなく、アンプコンポーネントが正しくレンダリングされるようにします。Google AMPは、画像のhttpリクエスト、データ呼び出しなどの他のリモートリソースが実行される前に、ページでレイアウトレンダリングが実行されることを確認します。

レイアウト属性のリストを以下に示します。

  • 幅と高さ

  • layout

  • sizes

  • heights

  • media

  • placeholder

  • fallback

  • noloading

検討します layoutこの章で詳細に属性を示します。残りの属性については、-の章で詳しく説明します。Google AMP – Attributes このチュートリアルの。

レイアウト属性

amp-componentでlayout属性を使用して、コンポーネントがページ内でどのようにレンダリングされるかを決定できます。ampでサポートされているレイアウトのリストを以下に示します-

  • 現在ではない

  • Container

  • fill

  • fixed

  • fixed-height

  • flex-item

  • intrinsic

  • nodisplay

  • Responsive

このレイアウトごとに、layout属性がamp-componentをどのように異なる方法でレンダリングするかを示す実用的な例を示します。活用しますamp-img この例のコンポーネント。

存在しない例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href =
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Image Example</h1>
      <amp-img 
         alt = "Beautiful 
         Flower"src = "images/flower.jpg"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

出力

コンテナの例

Layout =” container”は主に親要素に与えられ、子要素は定義されたサイズを取ります。

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href =
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = container Image Example</h1>
      <amp-accordion layout = "container">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205">
         </amp-img>
      </amp-accordion>
   </body>
</html>

出力

塗りつぶしの例

Layout =” fill”は、親要素の幅と高さを取ります。

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>
      Google AMP - Image
      <title>
      <link rel = "canonical" href =
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = fill Image Example</h1>
      <div style = "position:relative;width:100px;height:100px;">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "fill">
         </amp-img>
      </div>
   </body>
</html>

出力

固定および固定高さの例

固定および固定高さの使用法を理解する前に、次の2つの点に注意してください-

  • layout=”fixed” 幅と高さが必要で、アンプコンポーネントがその中に表示されます。

  • layout=”fixed-height” コンポーネントに高さを指定する必要があります。高さが変更されないようにします。固定高さを使用する場合は、幅を指定しないでください。自動にすることもできます。

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href =
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         div{
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = fixed and 
         Layout = fixed-height Image Example
      </h1>
      <div>
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "fixed">
         </amp-img>
      </div>
      <div>
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            height = "205"
            layout = "fixed-height">
         </amp-img>
      </div>
   </body>
</html>

出力

フレックスアイテムと本質的

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src ="https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href ="
         http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = flex-item and 
         Layout = intrinsic Image Example
      </h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            layout = "flex-item">
         </amp-img>
      </div>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "intrinsic">
         </amp-img>
      </div>
   </body>
</html>

出力

表示なしで応答性

layout = nodisplayのAmpコンポーネントは、display：noneのように、ページ上のスペースを占有しません。このようなレイアウトにwidthおよびheightプロパティを追加する必要はありません。

レイアウト=レスポンシブのアンプコンポーネントは、使用可能なスペースまたはページの幅を占有し、要素のアスペクト比を維持しながら高さがサイズ変更されます。

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content="width=device-width,
      minimum-scale = 1,initial-scale = 1">

      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout=no-display and 
      Layout = responsive Image Example</h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            layout = "no-display">
         </amp-img>
      </div>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

出力

GoogleAMPでサポートされているレイアウトのリストは次のとおりです

  • Accordion

  • Carousel

  • Lightbox

  • Slider

  • Sidebar

Amp-アコーディオン

Amp-accordionは、コンテンツを展開-折りたたみ形式で表示するために使用されるアンプコンポーネントです。ユーザーは、アコーディオンから選択したセクションを選択できるモバイルデバイスで簡単に表示できます。

amp-accordionを使用するには、次のスクリプトを追加する必要があります-

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

アンプアコーディオンタグ

<amp-accordion>
   <section class = "seca">
      <h3>Content 1</h3>
      <div>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
      </div>
   </section>
   …
</amp-accordion>

amp-アコーディオンの実際の例を見てみましょう。

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Accordion </title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <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 custom-element = "amp-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block; 
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 
            rgba(0,0,0,0.16),0 2px 10px 0 
            rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
         input[type=submit] { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;
         }
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section expanded class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class="seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

出力

アンプアコーディオンにはセクションがあります。各セクションには2つの子を含めることができ、2つを超えるとブラウザコンソールにエラーが表示されます。セクションにコンテナを追加し、その中に複数の要素を含めることができます。

デフォルトでは、セクションに展開された属性を使用して、1つのセクションを展開モードに維持しています。

自動折りたたみアコーディオン

自動折りたたみには、属性を使用しています expand-single-section 例に示すように、アンプアコーディオン上で。ユーザーが開いたセクションは展開された残りの部分にのみ残り、他のセクションはを使用して閉じます。 expand-single-section 属性。

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Accordion </title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <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 custom-element = "amp-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block; 
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 
            rgba(0,0,0,0.16),0 2px 10px 0 
            rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
         input[type=submit] { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;}
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   <head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion expand-single-section>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <;p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

出力

アコーディオンのアニメーション

を使用して animate属性、アコーディオンの展開-折りたたみのアニメーションを追加できます。以下の例を見てください-

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Accordion </title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html>
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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 custom-element = "amp-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block; 
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),
            0 2px 10px 0 rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
         input[type=submit] { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;
         }
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion animate expand-single-section>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class="seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

出力

AMPカルーセル

Amp-carouselは、類似したコンテンツのセットを画面に表示し、矢印を使用してコンテンツ間を移動するためのampコンポーネントです。

amp-carouselを使用するには、次のスクリプトを追加する必要があります-

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

アンプカルーセルタグ

amp-carouselタグは次のとおりです-

<amp-carousel height="300" layout="fixed-height" type="carousel">
      <amp-img src="images/christmas1.jpg" width="400" height="300" alt="a sample image"></amp-img>
   ….
</amp-carousel>

アンプカルーセルで使用可能な属性

アンプカルーセルで使用できる属性を以下の表に示します-

シニア番号 属性と説明
1 type

カルーセルアイテムをカルーセルとスライドとして表示できます
2 height

カルーセルの高さ（ピクセル単位）
3 controls (optional)

画面に左/右矢印が表示されます。デバイスでは数秒後にITが消えます。Cssを使用すると、矢印を常に表示できます。
4 data-next-button-aria-label (optional)

次のカルーセルのラベルを設定するために使用します。
5 data-prev-button-aria-label (optional)

前のカルーセルのラベルを設定するために使用します。
6 autoplay (optional)

5000ms後に次のスライドを表示するために使用します。ITはamp-carouselでミリ秒なしのdelay属性を使用して上書きできます。カルーセルにループ属性を追加し、スライドが最後に達すると再び再生されます。type= slidesにのみ使用されます。自動再生を機能させるには、少なくとも2つのスライドが必要です。

それでは、さまざまな方法でカルーセルを表示する例を見てみましょう。

カルーセルとしてのアンプカルーセルタイプ

カルーセルタイプでは、アイテムは水平方向にスクロール可能です。

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href="
      https://ampbyexample.com/components/amp-carousel/">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
      <amp-carousel height = "300" layout = "fixed-height" type = "carousel">
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "400" 
            height = "300" 
            alt = "a sample image">
         </amp-img>
         <amp-img src = "images/christmas2.jpg" 
            width = "400" 
            height = "300" 
            alt = "another sample image">
         </amp-img>
         <amp-img 
            src = "images/christmas3.jpg" 
            width = "400" 
            height = "300" 
            alt = "and another sample image">
         </amp-img>
      </amp-carousel>
   </body>
</html>

出力

スライドとしてのアンプカルーセルタイプ

アンプカルーセル type = ”slides” 一度に1つのアイテムを表示します。レイアウトは、塗りつぶし、固定、固定高さ、フレックスアイテム、表示なし、および応答として使用できます。

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href=
      "https://ampbyexample.com/components/amp-carousel/">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
         <amp-carousel 
            width = "400" 
            height = "300" 
            layout = "responsive" 
            type = "slides">
               <amp-img 
                  src = "images/christmas1.jpg" 
                  width = "400" 
                  height = "300" 
                  layout = "responsive" 
                  alt = "a sample image">
               </amp-img>
               <amp-img 
                  src = "images/christmas2.jpg" 
                  width = "400" 
                  height = "300" 
                  layout = "responsive" 
                  alt="another sample image">
               </amp-img>
               <amp-img 
                  src = "images/christmas3.jpg" 
                  width = "400" 
                  height = "300" 
                  layout = "responsive" 
                  alt = "and another sample image">
               </amp-img>
      </amp-carousel>
   </body>
</html>

出力

自動再生を使用したアンプカルーセル

以下の例では、2000ミリ秒（2秒）の遅延で自動再生属性を追加しました。これにより、2秒の遅延後にスライドが変更されます。デフォルトでは、遅延は5000ミリ秒（5秒）です。

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href =
      "https://ampbyexample.com/components/amp-carousel/">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
      <amp-carousel 
         width = "400" 
         height = "300" 
         layout = "responsive" 
         type = "slides" 
         autoplay delay = "2000">
            <amp-img 
               src = "images/christmas1.jpg" 
               width = "400" 
               height = "300" 
               layout = "responsive" 
               alt = "a sample image">
            </amp-img>
            <amp-img 
               src = "images/christmas2.jpg" 
               width = "400" 
               height = "300" 
               layout = "responsive" 
               alt = "another sample image">
            </amp-img>
            <amp-img 
               src = "images/christmas3.jpg" 
               width = "400" 
               height = "300" 
               layout = "responsive" 
               alt = "and another sample image">
            </amp-img>
      </amp-carousel>
   </body>
</html>

出力

AMPライトボックス

Amp-lightboxは、ビューポート全体を占有し、オーバーレイのように表示するアンプコンポーネントです。

amp-lightboxを操作するには、次のスクリプトを追加します-

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

amp-lightboxで使用可能な属性

amp-lightboxの属性のリストを以下に示します-

Sr.no 属性と説明
1 animate-in (optional)

ここで、ライトボックスを開くためのアニメーションのスタイルを指定できます。デフォルトでは、

フェードイン

。スタイリングでサポートされている値は、フェードイン、フライインボトム、フライイントップです。
2 close-button (required on AMPHTML ads)

amphtmladsに使用する場合、ライトボックスの閉じるボタンを指定できます。
3 id (required)

ライトボックスの一意の識別子
4 layout (required)

レイアウトの値はnodisplayになります
5 Scrollable (optional)

amp-lightboxのこの属性を使用すると、ライトボックスのコンテンツをスクロールして、ライトボックスの高さをオーバーフローさせることができます。

ライトボックスの例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Lightbox</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      <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 custom-element = "amp-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay">
         <div class = "lightbox" on="tap:my-lightbox.close" tabindex = "0">
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

出力

画面上の任意の場所をクリックして、ライトボックスを閉じます。

ライトボックスに閉じるボタンを追加できます。これは、オーバーレイタイプの広告が表示されるときに主に使用されます。次の例を観察してください-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Lightbox</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <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 custom-element = "amp-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay" close-button>
         <div class = "lightbox" on = "tap:my-lightbox.close">
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

出力

アンプサイドバー

アンプサイドバーは、ボタンをタップするとウィンドウの側面からスライドするコンテンツを表示するために使用されるアンプコンポーネントです。

amp-sidebarを操作するには、次のスクリプトを追加する必要があります-

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

アンプサイドバータグ

<amp-sidebar id = "sidebar" layout = "nodisplay" side = "right">
   <span on = "tap:sidebar.close">X</span>
   Html content here..
</amp-sidebar>

amp-sidebarで使用可能な属性のリストを以下に示します-

Sr.no 属性と説明
1 side

この属性は、指定された方向にサイドバーを開きます。左/右の例
2 layout

サイドバーのレイアウトには表示は使用されません
3 open

この属性は、サイドバーが開いているときに追加されます。
4 data-close-button-aria-label

閉じるボタンのラベルを設定するために使用されます。

上記の属性を使用してサイドバーを操作します。以下に示す例を観察してください-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Sidebar</title>
      <link rel = "canonical" href="
      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <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 custom-element = "amp-sidebar" src =
         "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Sidebar</h3>
      <button on = "tap:sidebar">
         Show Sidebar
      </button>
      <amp-sidebar id = "sidebar" layout = "nodisplay" side = "right">
         <span on = "tap:sidebar.close">X</span>
         <ul>
            <li><a href = "/">About</a></li>
            <li><a href = "/">Services</a></li>
            <li><a href = "/">Contact US</a></li>
         </ul>
      </amp-sidebar>
   </body>
</html>

出力

使用しました side右側のサイドバーを開くための属性。左の値を使用してside左側に開く属性。ザ・layout 属性はする必要があります nodisplay.Open 属性は、サイドバーが開いているときに存在します。

data-close-button-aria-label

アンプイメージスライダー

Amp-image-sliderは、画像上で垂直方向に移動するときにスライダーを追加して2つの画像を比較するために使用されるampコンポーネントです。

amp-img-sliderを使用するには、次のスクリプトを追加します-

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

Amp-img-sliderタグ

<amp-image-slider width = "300" height = "200" layout = "responsive">
   <amp-img src = "images/christmas1.jpg" layout = "fill">
   </amp-img>
   <amp-img src = "images/christmas2.jpg" layout = "fill">
   </amp-img>
</amp-image-slider>

amp-img-sliderの例を次に示します。ここでは、amp-img-slider内に2つの画像を追加しました。最初の画像はスライダーのように機能し、2番目の画像の上部にスライドできます。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Image Slider</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <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 custom-element = "amp-image-slider" src =
         "https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Image Slider</h3>
      <amp-image-slider 
         width = "300" 
         height = "200" 
         layout = "responsive">
            <amp-img 
               src = "images/christmas1.jpg"
               layout = "fill">
            </amp-img>
            <amp-img 
               src = "images/christmas2.jpg"
               layout = "fill">
            </amp-img>
      </amp-image-slider>
   </body>
</html>

出力

Amp-image-sliderには、以下の例に示すように画像を変更できるseekToというアクションがあります。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Image Slider</title>
      <link rel = "canonical" href ="
      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <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 custom-element = "amp-image-slider" src =
         "https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .amp-sidebar-toolbar-target-shown {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Image Slider</h3>
      <amp-image-slider 
         width = "300" 
         id="slider1" 
         height = "200" 
         layout = "responsive">
         <amp-img src = "images/christmas1.jpg" layout = "fill">
         </amp-img>
         <amp-img src = "images/christmas2.jpg" layout = "fill">
         </amp-img>
      </amp-image-slider>
      <button on = "tap:slider1.seekTo(percent = 1)">
         Image 1
      </button>
      <button on = "tap:slider1.seekTo(percent = 0)">
         Image 2
      </button>
   </body>
</html>

出力

ボタンをタップすると画像を変更できます。

<button on = "tap:slider1.seekTo(percent = 1)">Image 1</button>
<button on = "tap:slider1.seekTo(percent = 0)">Image 2</button>
</div>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved