AMP時代のHTML/CSS設計(2018年版)

bootstrapとかも良いんですが、AMP対応を考えると、そもそもJavaScriptを使っている時点でダメだし、CSSのサイズ的にも、AMPのCSSの50KB制限に対して、ミニファイしても100KBオーバーと使えない。

ということで、AMP対応を考えると、HTMLの構造も、CSSもよりシンプルなものにする必要があり、そうなると、基本的には、PC版ではナビゲーションを横に表示して、スマホ版では、ページ下部に表示するといった形になる(しかない?)。

AMP Basicテーマでの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-HTML-2018

AMP対応もあるのでCSSは短ければ短いほど良し(目標は1000行以下)

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で。

【参考ページ】

HTML 5.1

CSSの値の継承(Inheritance)のルール

CSS3プロパティ一覧(ABC順)

Can I use

Androidのバージョン/ブラウザのサポートについてまとめてみたのだ。

Google、Android 4.0向けChromeのサポート打ち切りへ

滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話

AMP サポートブラウザ