2019/08/09

cssが効かない！- !importantで解決

最近、士業さんのサイトをお手伝いさせていただいています。

ワードプレステーマはAGENT。テンプレートがかなり作り込まれていて、ほぼ文章と画像を流し込む作業で済むのですが。。。。これは一長一短。

初心者にはとてもわかりやすく、特別なスキルや知識がなくてもできそう。

しかし、お客様の希望を伺うと、既存のレイアウトにうまくはめ込めない場合や変更をした方がいい部分がポロポロ出てくる。

そして、装飾を加えようとcssを書き込むのだけれど。。。。どうしても反映しない部分がところどころ。真夜中に３時間ほどあの手この手で違うコードを試していくうちに船をこきこき・・・気がつけば朝刊配達の音・・・・。あっ、またやっちゃった。首が痛い。

埒が明かない。でも、細かいフォントや余白の調整ができないと気持ちが悪くで、どうにもおさまりが悪い・・・。でも、設定マニュアル見てもそんなことには触れられていない。

「師匠・・・なぜですか・・・私のコード変ですか・・・ε～(￣、￣;)ゞﾌｰ」

スタイルシートの優先順位が関係

styleが最も優先されます。優先度が高い順に並べてみると、style>id>class>タイプセレクタとなることがわかりました。

あとに書き込んだ方が優先されます。

今回は、何が優先されて反映されなかったのかは不明なのですが・・・その優先度に負けて反映されなかったらしいです。

ずばり、希望のプロパティ書き込んで半角開けて!important

「えっ！？おっ！スッキリ～！」

何か他に優先されているセレクタがありプロパティが反映されない時に、書き込んだプロパティを最優先させてくれるものなんですね。

これは、便利！

３時間の睡眠時間確保！so important!