Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AMP HTMLで作るwebページのサンプル
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>SITE TITLE | PublisherName</title>
<link rel="canonical" href="amp.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora">
<style amp-custom>
html,body,header,section,article,nav,aside,h1,h2,h3,h4,h5,h6,p,ul,li,a,button,figure,img {
box-sizing: border-box;
margin: 0;
border: none;
padding: 0;
}
a {
text-decoration: none;
}
ul,ol {
list-style: none;
}
amp-img {
outline: none;
}
html {
font-family: Lora, sans-serif;
}
.header {
padding: 20px;
width: 100%;
position: relative;
}
.header-heading {
font-size: 24px;
text-align: center;
}
.header-anchor {
color: #333;
}
.header-button {
padding: 5px;
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 10px;
background-color: #fff;
outline: none;
color: #333;
font-size: 12px;
font-family: sans-serif;
}
.header-humberger {
display: block;
margin: 5px 0;
width: 100%;
height: 3px;
background-color: #333;
}
.menu {
height: 100%;
background-color: rgba( 255, 255, 255, 0.98 );
}
.menu-header {
padding: 20px;
text-align: center;
}
.menu-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.menu-item {
width: 50%;
text-align: center;
}
.menu-anchor {
display: block;
padding: 20% 0;
font-size: 16px;
color: #333;
text-decoration: underline;
}
.menu-button {
margin: 5px;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
right: 10px;
background-color: #fff;
}
.menu-button-svg {
width: 28px;
}
.branding-image {
width: 100%;
padding: 30% 0;
position: relative;
background-color: #fefefe;
}
.branding-image-div {
margin: auto;
width: 100%;
padding: 30% 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: #fff;
}
@keyframes crossFade {
0% { opacity: 1; }
18.75% { opacity: 1; }
25% { opacity: 0; }
93.75% { opacity: 0; }
100% { opacity: 1; }
}
.crossfade-animation:nth-of-type(1) {
background-color: #F68D2E;
animation-delay: 12s;
}
.crossfade-animation:nth-of-type(2) {
background-color: #E93CAC;
animation-delay: 8s;
}
.crossfade-animation:nth-of-type(3) {
background-color: #3c95e8;
animation-delay: 4s;
}
.crossfade-animation:nth-of-type(4) {
background-color: #3ce884;
animation-delay: 0;
}
.crossfade-animation {
animation: crossFade 16s infinite;
}
.pickup-heading,
.contents-heading,
.photogallery-heading,
.ad-heading {
margin: 2em auto 1em;
border-width: 1px;
border-style: solid none;
border-color: #333;
width: 11em;
font-size: 20px;
line-height: 2;
text-align: center;
}
.amp-carousel-button {
visibility: visible;
background-color: rgba( 255, 255, 255, 0.3 );
}
.contents-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.contents-item {
width: 45%;
margin-bottom: 5%;
border: 1px solid #eee;
}
.contents-anchor {
display: block;
padding: 40% 0;
color: #333;
text-align: center;
}
.photogallery-container {
display: flex;
flex-wrap: wrap;
}
.photogallery-figure {
width: 50%;
}
.photogallery-carousel {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photogallery-lightbox {
background-color: rgba( 255, 255, 255, 0.97 );
}
.photogallery-captions {
display: block;
width: 100%;
padding: 0 0 2em;
position: absolute;
bottom: 0;
text-align: center;
}
.lightbox-carousel-image {
top: 50%;
transform: translate3d( 0, -50%, 0 );
}
.ad-container {
margin: 10px auto;
text-align: center;
}
.footer {
padding: 4em 0 2em;
width: 100%;
height: 6em;
background-color: #fafafa;
font-size: 12px;
font-family: Lora, sans-serif;
text-align: center;
letter-spacing: 0.15em;
color: #333;
}
.footer-small {
padding-top: 4em;
display: block;
}
.google {
display: block;
width: 100%;
line-height: 30;
text-align: center;
background-color: red;
}
</style>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<amp-pixel src="https://ssl.google-analytics.com/collect?v=1&amp;tid=UA-50210815-10&amp;t=pageview&amp;cid=$RANDOM&amp;dt=$TITLE&amp;dl=$CANONICAL_URL&amp;z=$RANDOM"></amp-pixel>
<header class="header">
<h1 class="header-heading">
<a href="//yukiyamashina.com/blog/" class="header-anchor">Brand Logo</a>
</h1>
<button class="header-button" on="tap:open-menu">
<span class="header-humberger"></span>
<span class="header-humberger"></span>
<span class="header-humberger"></span>
MENU
</button>
</header>
<amp-lightbox id="open-menu" class="menu-bg" layout="nodisplay">
<nav class="menu">
<header class="menu-header">
<h2 class="menu-heading">MENU LIST</h2>
</header>
<button class="menu-button" on="tap:open-menu.close">
<svg class="menu-button-svg" viewBox="0 0 100 100">
<path stroke="black" stroke-width="5" fill="black" d="M0,0L100,100"/>
<path stroke="black" stroke-width="5" fill="black" d="M100,0L0,100"/>
</svg>
</button>
<ul class="menu-list">
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 1</a></li>
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 2</a></li>
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 3</a></li>
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 4</a></li>
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 5</a></li>
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 6</a></li>
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 7</a></li>
<li class="menu-item"><a href="//yukiyamashina.com/blog/" class="menu-anchor">MENU 8</a></li>
</ul>
</nav>
</amp-lightbox>
<main role="main">
<article class="main-inner">
<div class="branding-image crossfade-wrapper">
<div class="branding-image-div crossfade-animation">Branding Image 4</div>
<div class="branding-image-div crossfade-animation">Branding Image 3</div>
<div class="branding-image-div crossfade-animation">Branding Image 2</div>
<div class="branding-image-div crossfade-animation">Branding Image 1</div>
</div>
<section class="pickup">
<header class="pickup-header">
<h2 class="pickup-heading">PICKUP CONTENTS</h2>
</header>
<amp-carousel width=480 height=160 layout=responsive type=slides autoplay loop>
<amp-img width=480 height=160 layout=responsive src="//placehold.jp/480x160.png"></amp-img>
<amp-img width=480 height=160 layout=responsive src="//placehold.jp/480x160.png"></amp-img>
<amp-img width=480 height=160 layout=responsive src="//placehold.jp/480x160.png"></amp-img>
</amp-carousel>
</section>
<section class="contents">
<header class="contents-header">
<h2 class="contents-heading">CONTENTS LIST</h2>
</header>
<ul class="contents-list">
<li class="contents-item contents-item-1">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 1</a>
</li>
<li class="contents-item contents-item-2">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 2</a>
</li>
<li class="contents-item contents-item-3">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 3</a>
</li>
<li class="contents-item contents-item-4">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 4</a>
</li>
<li class="contents-item contents-item-5">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 5</a>
</li>
<li class="contents-item contents-item-6">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 6</a>
</li>
<li class="contents-item contents-item-7">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 7</a>
</li>
<li class="contents-item contents-item-8">
<a href="//yukiyamashina.com/blog/" class="contents-anchor">CONTENTS 8</a>
</li>
</ul>
</section>
<section class="photogallery">
<header class="photogallery-header">
<h2 class="photogallery-heading">Photo Gallery</h2>
</header>
<div class="photogallery-container">
<amp-img class="photogallery-figure"
on="tap:photogallery-carousel" role="button" tabindex="0"
src="//i.imgur.com/lzqDsaO.jpg" alt="image-1"
width=480 height=480 layout=responsive></amp-img>
<amp-img class="photogallery-figure"
on="tap:photogallery-carousel" role="button" tabindex="1"
src="//i.imgur.com/uU0tcru.jpg" alt="image-2"
width=480 height=480 layout=responsive></amp-img>
<amp-img class="photogallery-figure"
on="tap:photogallery-carousel" role="button" tabindex="2"
src="//i.imgur.com/cyFbNaP.jpg" alt="image-3"
width=480 height=480 layout=responsive></amp-img>
<amp-img class="photogallery-figure"
on="tap:photogallery-carousel" role="button" tabindex="3"
src="//i.imgur.com/RMAEwWS.jpg" alt="image-4"
width=480 height=480 layout=responsive></amp-img>
<amp-lightbox id="photogallery-carousel" class="photogallery-lightbox" layout="nodisplay">
<amp-carousel class="photogallery-carousel" width=480 height=480 layout=responsive type=slides loop>
<figure>
<amp-img class="lightbox-carousel-image"
src="//i.imgur.com/lzqDsaO.jpg" alt="image-1"
on="tap:photogallery-carousel.close" role="button" tabindex="0"
width=480 height=480 layout=responsive></amp-img>
<figcaption class="photogallery-captions">
figure 1 caption
</figcaption>
</figure>
<figure>
<amp-img class="lightbox-carousel-image"
src="//i.imgur.com/uU0tcru.jpg" alt="image-2"
on="tap:photogallery-carousel.close" role="button" tabindex="1"
width=480 height=480 layout=responsive></amp-img>
<figcaption class="photogallery-captions">
figure 2 caption
</figcaption>
</figure>
<figure>
<amp-img class="lightbox-carousel-image"
src="//i.imgur.com/cyFbNaP.jpg" alt="image-3"
on="tap:photogallery-carousel.close" role="button" tabindex="2"
width=480 height=480 layout=responsive></amp-img>
<figcaption class="photogallery-captions">
figure 3 caption
</figcaption>
</figure>
<figure>
<amp-img class="lightbox-carousel-image"
src="//i.imgur.com/RMAEwWS.jpg" alt="image-4"
on="tap:photogallery-carousel.close" role="button" tabindex="3"
width=480 height=480 layout=responsive></amp-img>
<figcaption class="photogallery-captions">
figure 4 caption
</figcaption>
</figure>
</amp-carousel>
</amp-lightbox>
</div>
</section>
<section class="ad">
<header class="ad-header">
<h2 class="ad-heading">Ad Area</h2>
</header>
<div class="ad-container">
<amp-ad width=300 height=250
type="adsense"
data-ad-client="ca-pub-7999477986195214"
data-ad-slot="1761149686"></ins>
</amp-ad>
</div>
</section>
</div>
</article>
</main>
<footer class="footer">
footer area
<small class="footer-small">© 2015 Yuki Yamashina</small>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.