BLOG

ブログ

基本的なAMPサイトのつくり方

基本的なAMPサイトのつくり方

<!DOCTYPE html>を文書宣言とする

hrmlに⚡を記述する<html ⚡ lang="ja" dir="ltr">

<head>の次は<meta charset="utf-8">にする

<head>内に<meta name="viewport" content="width=device-width, initial-scale=1>を記述する

<head>内に<script async src="https://cdn.ampproject.org/v0.js"></script>を記述する

<head>内に
<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></style>の中に記述する


一番簡単なAMPサイトであればこれだけでできます。

▲PAGE TOP

©ITコンサルタントの網樹屋