Google-amp-styles-and-custom-css
提供:Dev Guides
Google AMP-スタイルとカスタムCSS
Ampは、多くの慎重な検討の後に画面にページをレンダリングします。読み込まれるページには、実行されるHTTP要求の多くである画像、ビデオ、iframeなどが含まれます。 そのため、ページ上のコンテンツが表示され、画像、ビデオ、iframeをロードするために必要なスペースが作成されるように、実行されるhttpリクエストが遅延されます。
Ampには、プレースホルダー、フォールバック、srcset、レイアウト属性などの機能があり、ページをレスポンシブにし、ページのコンテンツが乱されないようにします。 この章では、これらすべてについて詳しく説明します。
アンプスタイルタグ
Ampには、以下に示すように、 amp-custom が付いたスタイルタグがあります-
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
p {
padding: 1rem;
font-size:25px;
}
largeText {
font-size:30px;
background-color:red;
}
</style>
基本的に、ページに必要なカスタムcssを記述するために使用されます。 amp-custom 属性を追加することを忘れないでください。そうしないと、以下に示すようにアンプの検証に失敗します-
Ampは、以下に示すように、html要素のインラインcssもサポートしています-
<div style = "color:green;margin-left:30px;">
Welcome to finddevguides</p>
外部スタイルシートタグ
Ampは外部スタイルシートをサポートしていないため、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 - Dynamic Css Classes</title>
<link rel = "canonical" href = "
http://example.ampproject.org/article-metadatal">
<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-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-dynamic-css-classes"
src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css">
<style amp-custom>
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Dynamic Css Classes</h3>
<div style = "color:green;margin-left:30px;">
Welcome to finddevguides</p>
</body>
</html>
AMP validatorで検証すると、次のエラーが発生します。
ページの要素をレスポンシブに表示するには、amp要素は要素がページ上で取る幅と高さを指定する必要があります。 レイアウト=「レスポンシブ」を追加すると、要素がページでレスポンシブになり、アスペクト比が維持されます。
レイアウト属性の詳細については、* Google AMP –レイアウト*の章で詳しく説明します。