Embedded Files
bootstrapとかも良いんですが、AMP対応を考えると、そもそもJavaScriptを使っている時点でダメだし、CSSのサイズ的にも、AMPのCSSの50KB制限に対して、ミニファイしても100KBオーバーと使えない。
ということで、AMP対応を考えると、HTMLの構造も、CSSもよりシンプルなものにする必要があり、そうなると、基本的には、PC版ではナビゲーションを横に表示して、スマホ版では、ページ下部に表示するといった形になる（しかない？）。
AMP BasicテーマでのHTML/CSS設計
基本的なHTML構造とCSSのクラスの例
基本的なHTML構造とCSSのクラスの例
【投稿ページ】
body
header
div id="main-frame"
main
article
header
div class="header-article-image"
img
div class="header-article-title"
h1
div class="article-body"
h2
p
h2
p
・・・
nav
footer
【トップページ】
body
header
div id="main-frame"
main
article
header
div class="header-article"
img
div class="header-article-title"
h1
ul class="article-list"
li
article
li
article
・・・
nav
footer
AMP対応もあるのでCSSは短ければ短いほど良し（目標は1000行以下）
AMP対応もあるのでCSSは短ければ短いほど良し（目標は1000行以下）
inheritでのスタイルの継承
inheritでのスタイルの継承
CSSでは、colorやfont-sizeなど文字に関するスタイルは親要素から子要素に継承されますが、マージンやパディング、幅や高さ、フロートなど要素の配置や大きさについてのスタイルは継承されません。
Cascading Style SheetsのCascadeの意味は、「階段状に連続する滝」だそうですが、その名の割には、継承されるスタイルは多くありません。
AMP Basicテーマでは、マージンとパディングについては、inheritを指定してなるべく継承させるようにします。
結局inheritは使いにくい部分もあって、AMP Basicでは積極的には使わなかった。
【表】継承されるプロパティと継承されないプロパティの例
継承される
継承されない
プロパティ
color
font-*
text-align
width
height
max-*
min-*
margin-*
padding-*
border-*
background-*
float
vertical-align
対象ブラウザー
対象ブラウザー
下記のブラウザーを対象ブラウザーとします。基本的には最新版を対象とするので、気にすべきなのは、Android BrowserとIEになります。
【表】対象ブラウザー
FlexboxとCSS Gridは使用しない
FlexboxとCSS GridはIE11が部分的な対応に留まるので使用しません。残念ながら、後2～3年は、floatでがんばりましょう。
文字サイズ、マージン、パディングの指定方法
基本的にremで。
【参考ページ】
Androidのバージョン/ブラウザのサポートについてまとめてみたのだ。
Google、Android 4.0向けChromeのサポート打ち切りへ
Report abuse