支援者募集中!仕事依頼はこちら

AMPではCSSのimportantが使えない!importantに頼らないには?

AMPでimportantは使えない Web制作

こんにちは!ぽんひろ(@ponhiroo)です。

「AMP対応面倒くせー!」と嘆いている僕ですが、AMPのことはまだ1%ほどしか理解できていません。

先ほどAMPについて一つ学んだことがあったので共有しようと思います。

AMP入門者の僕が今回学んだこと

AMPでは「!important」が使えない。

常識やんけ!くそが!」と思った方、ごめんなさい。

ということでこの記事で伝えたいことはもう伝えてしまいました。

一応解決策など、詳細を説明していきますので、よかったら見て行ってください!

ちなみに前提として「AMPとは何かを知っている」「!importantが何かを知っている」こととします。

AMPで当ブログのデザインが崩れた箇所

importantが反省されてないだと

当ブログはWordPressを使用しており、テーマはCocoonを使っています。

Cocoonは無料にも関わらず、1クリックでAMP対応ができる優れものです。

そんな中、なぜ崩れてしまったかというと自分でCSSをカスタマイズしているからです。

今回、デザインが崩れた箇所がこちらです。該当URLはこちら!

【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK【カスタマイズ】
Cocoonのリスト(箇条書き)のカスタマイズ記事です。組み合わせ次第で40種類作れます。色やアイコンも変えられるようになっています。設定は面倒ですが一度カスタマイズしてしまえば簡単にリスト(箇条書き)が使えるのでオススメです。他にもCocoonカスタマイズをやってるのでよかったらそちらもご覧ください。

まず、理想がこれ!
AMPでデザインが崩れた図(理想)

もちろんAMPでなければ上図のように正しく表示されます。

しかし、AMPで表示させると…
AMPでデザインが崩れた図(現実)

左に寄ってしまうんです。

この時使っていたコードがこちら。


<div class="flow">
<ol>
 	<li class="now">好きなリストを選ぶ</li>
 	<li>好きなボックスを選ぶ</li>
 	<li>リストのCSSをコピペ</li>
 	<li>リストの色を変更する(任意)</li>
 	<li>アイコン付のリストはアイコンを変更(任意)</li>
 	<li>ボックスのCSSをコピペ</li>
 	<li>ボックスの色を変更(任意)</li>
 	<li>「AddQuicktag」をインストール</li>
 	<li>確認作業!</li>
</ol>
</div>

.flow{
	padding:1em;
	background:#fef9ed;
	margin:0;
}
.flow li{
	opacity:0.5;
	margin: 0 0 0 5em !important;
}
.flow .now{
	opacity:1;
	font-weight:bold;
	position:relative;
}
.flow .now:before{
	 content: "今ココ";
	 position: absolute;
	 left: -5.5em;
	 padding: 0 7px;
	 background: #ffa952;
	 color: #fff;
	 border-radius: 10px;
}

原因はもうわかるかと思いますが、「!important」ですね。AMPではmarginが効かなくなっています。

自慢ではありませんが僕はimportant人間です。importantを多用する者です。

多用すると管理がしにくくなるのであまり使わない方がいいってことはわかってるんですが、面倒くささが勝ってしまうんですよね。

一からWebサイトを作る時はimportantを使わないように意識できるんですが、WordPressで既存のテーマを使っているとどうしてもimportantに頼ってしまいます。

良くないですね、反省

importantに頼らないためにはCSSの優先度を知る

CSSの優先順位って知ってる?

ここからはimpotantに頼ってしまう人向けに書きます。

そんな皆さんに質問です。CSSの優先度、正しく説明できますか?

あれでしょ?classよりidが優先されるやつ

僕はわかっているようでわかっていませんでした。

だからimportant人間なんだね!

CSSの優先度とは?

CSSが重複しているときの順位決めとして、CSSには優先順位というものが存在します。

CSSの優先順位の規則は以下の通りです。

  • あとに書いたものが優先される
  • セレクターの合計点数によって優先順位が変わる

詳しくは別記事で紹介しますが、セレクタの点数表は以下の通りです。

指定方法点数
全称セレクタ*0
タイプセレクタp1
擬似要素:hover1
擬似クラス[type=”text”]10
classセレクタ.hoge10
idセレクタ#hoge100
要素に直書きstyle=””1000

これらの合計点が高いCSSが優先されて表示されるってことですね。

WordPressでimportantに頼らないには

もうimportantに頼らない

優先順位はセレクタの合計点で決まるので、セレクタの数を増やして書けば優先される可能性が高いです。

当ブログ(Cocoon)の場合、


.flow li{
	opacity:0.5;
	margin: 0 0 0 5em !important;
}

この書き方だと点数は10+1=11点です。

これで表示されればそのまんまでいいのですが、僕は他にもいつ書いたか覚えていない


.article ul li, .article ol li{
   margin: 0.7em 0;
}

がありました。

こっちのliのCSSが適用されていたってことです。

僕のコーディング力レベルの低さがわかりますね!

この記述の合計点数は10+1+1=12点です。よって、12点の方が優先されて表示されます。

修正方法はもう皆さん何となくわかるかと思いますが、どちらかの点数を変更する必要があります。

優先したいものには


#main .flow li{
	opacity:0.5;
	margin: 0 0 0 5em;
}

のように親要素を使うと点数があげられます。この場合は100+10+1=111点ですね。

といった感じで、もしimportantに頼っちゃっている人は点数を意識して、CSSを組んであげると良いです。

その他AMPでデザインが崩れる例

importantを使ってないのにデザインが崩れたって方は下記項目も確認してみてください。

AMPデザイン崩壊時確認項目
  • CSSのサイズが50KB以上
  • HTMLの画像(amp-img)の縦横サイズが記載されていない
  • @Charsetを使っている

上記が当てはまる場合は修正が必要です。

それでも崩れる場合はAMPページURLの後ろに「#development=1」をいれ、コンソールを開いてみてください。エラーが出ていれば原因が表示されるため、解決策がわかるかもしれません。

コメント

ページトップへ