CSSの『Expected RBRACE 』エラーって何なの？（WordPress4.9で判明）

今回は、WordPressを新バージョンにしたら判明した、変なCSSエラーがでていた件についてお話します。 エラーがわかる便利な機能がついてるんで、今まで（致命的ではなかったけど）放置していたものについても、発見できましたので、対処をみていきます。

なぜWordPress新バージョンで、CSSのエラーがすぐわかるようになったか？

先日リリースされた新バージョン『4.9ティプトン』（詳細はWordPress公式ページで） https://ja.wordpress.org/2017/11/17/tipton/ で実装された、『エラーチェック機能』です。

こんな感じで、タグが閉じてないとか、構文がおかしいみたいなCSSやphpのエラーを、ダメな版で保存してサイトを壊す前に通知してくれます。これにより、判明したエラーもありましたのでお知らせします。

CSSエラー『Expected RBRACE』(右側ブレース)の状況・意味と解決方法

このサイトの例

実はお取引先さまのサイトとかには、セキュリティー上の理由とかそういう理由で最新版にしていたんですが、自分のサイトは最新版ワードプレスに更新するのを忘れていました。

最近、バージョン4.9にしたところ エラー通知が機能して、こんな感じで通知されました。

（2020追記）『Expected RBRACE』の意味とは？

Expectedは検索すればすぐ出そうなので、R BRACEについて。意味がわかれば、エラー対処も容易です。weblioで調べたところ、コード書く時の波括弧を『curly brace』というそうです。そのほか、エラー調査中に知った『L BRACE』というのから、LとRで『Rは右側』と判定。エラーメッセージ意味としては『通常あるはずの、右側の波括弧が無いよ』ということになるでしょうか。

◆波括弧を翻訳（weblio）
https://ejje.weblio.jp/content/波括弧

◆“Expected LBRACE” Error（WordPressフォーラム・英語・）
https://wordpress.org/support/topic/expected-lbrace-error/

対処方法

結論からいうと、パスエラーでした。上記の『ブレース』と『レフト・ライト』の意味を考えると、サクッとわかるでしょう。コード内のカッコ閉じてないとか、そういうときに出ます。CSSの最後に書いてあった『メディアクエリPC（レスポンシブで、PCサイズディスプレイで表示したとき適応するやつ）』の最後のカッコかと思ったら・・

その上にある、『メディアクエリ』の部分で、終了部分のカッコが閉じられていませんでした。これを修正したところ、エラー通知は消えました。

このように、カッコをきちんと閉じます。

あとがき・まとめ

という感じです。特に、カスタマイザー使わないでphpやCSSを編集してしまう方には、エラーでサイト見れなくなる前に通知してくれるので便利だと思います。