W３Cエラー修復の１つ
こんにちは！
W３Cのエラー修復に大苦戦したココロです。
このページでは、
@charset 規則が指定できるのは、スタイルシートの最初の部分のみです。直前にスペースが入っていたりしないか確認してみてください。 @charset "utf-8";
と、
"text-rendering"は存在しません:auto
という２つのエラー →
W３CのHTML、CSSエラーの修復する方法の１つをご紹介しているページです。
※ 本ページはプロモーションを
含んでいます
「 W3C CSS 検証サービス 」
「 W3C HTML 検証サービス 」
といったキーワードで検索をかけると、
https://jigsaw.w3.org/css-validator/
https://validator.w3.org/unicorn/?ucn_lang=ja
というサイトさんが出てきます。こちらのサイトさんはざっくりいうと国際基準に沿ってHTMLやCSSのエラーをオンラインでチェックしてくれるものすごくありがたいサイトさんです。
ただ残念なことにHTMLのエラーチェックのほうは２０２３年3月31日にはオンラインサービスの提供を停止したとのことで愛用しているココロとしてはごっつ残念な感じになってます…。HTML構文を直接入力でチェックしてくれる機能だけでも維持してもらえたらなぁ、と淡い期待を寄せています。
話は戻ってそのサイトさんでエラーチェックをかけると…
そうです。
この２つのエラー。
１つ目の 「@charset 規則が指定できるのは、スタイルシートの最初の部分のみです。」 のエラーなんて…
・ style.cssの最初部分である
・ 直前にスペースもなし
・ font-family部分に全角もなし
といった感じで
（※ 画像のCSSは適当なコードです ※）
「 Why？！どこも間違ってないのに？！ 」
とGoogle先生を訪ね回る旅へとズンドコモッコイ。
２つ目の 「"text-rendering"は存在しません:auto」 のエラーなんて…、
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
「 CDNで外部から読み込んでいたらどうしようないジャマイカ 」
と嘆きながらこのエラー修復に大苦戦しました。当初はわけもわからず外部からの読み込みでしかFont Awesomeさんのアイコンを使うことができなかったため、ダウンロードの方法から調べていきました…。
このページでは主にこの２つのエラーの修復についてココロのエラー修復奮闘記なるものをメモしています。この下にリストをご用意していますので、もし同じ様にお困りの方がおられましたら１つの解決法としてお役に立てれば幸いです。
≪リストからジャンプ≫
@charset 規則エラー
私はメモ帳などのテキストエディタにHTMLやCSSを直接書き込んで（コピペさせてもらって）サーバーに放り込んでサイトを作っているスタンスです。使わせていただいているTemplate-Party さんのテンプレートは正確なのでちゃんとスタイルシートの最初の部分に「 @charset "utf-8"; 」を書いてくれています。
このエラーの原因はいくつかあるそうなのですが、飽くまでも私のケースでは…
CSSファイル
（ style.css ファイル ）
を、
UTF-8(BOM 付き)で保存
していたから
でした…。orz
つまり私の場合の解決法は、
UTF-8(BOM 付き)で保存していたCSSファイル（ style.css ファイル ）をメモ帳で開いてUTF-8で保存しなおしてサーバーにアップロードする
というシンプリーな方法で解決しました。このエラー自体はCSSファイル（ style.css ファイル ）だけを修正するとこのエラーは消えるっぽいです。余談ですが念のために確認してみたらUTF-8(BOM 付き)で保存していたHTMLファイルもいくつかあったのでついでに全部修正しました。
私はHTMLやCSSをメモ帳に直接書き込むスタンスでサイトを作成していたため、どっかのタイミングでメモを取るために開いたメモ帳を保存する時にUTF-8(BOM 付き)で保存してしまったんだと思います。そしてそのファイルをコピーして使ったり、そのファイルから新規でファイルを作ってしまったりと…それに気づかずにHTMLやCSSファイルをいじる時に保存形式はそのままで保存してしまったのでCSSファイルもUTF-8(BOM 付き)になっちゃったんでしょう、きっと。
調べてみると
BOM 付きではないUTF-8 で保存するのは基本のことだそうで、備忘録も兼ねて以下に詳細をメモしておきます。
UTF-8の保存形式のメモ
ざっくりとですけどUTF-8(BOM 付き)のBOMはByte Order Markを略した数バイトのデータを表すもので、UTF-8(BOM 付き)はUTF-8と似て非なるものっぽいとのことでした。「UTF-8ってどっかで見たことあるなぁ…」と調べていくうちに気が付いたのがmetaタグのコード。
<meta charset="UTF-8">
このコード。
なるほど。
どうもmetaタグで宣言しているのは純粋なUTF-8のことを指しているのかもしれない。
「 UTF-8？UTF-8…？違う所でも見たことがあるような… 」
「 そういやメモ帳の保存形式でそんな選択をする箇所が…おおぅ。まさか。 」
予想どおりUTF-8(BOM 付き)で保存してしまっておりましたorz。 どこでどうなったのかさっぱりわからん。しかし実に興味深い。なんて言ってないでとにかく保存形式をUTF-8にして保存。
UTF-8で保存しなおしたCSSをサーバーにアップロード。
ようやく謎がとけました。
この保存形式の確認はメモ帳から表示を選択してステータスバーにチェックを入れると右下の所にUTF-8と表示されますのでここから確認することもできます。
このUTF-8はmetaタグで
<meta charset="UTF-8">
と宣言してるのにUTF-8(BOM 付き)はおかしい、ということでした。そもそもBOM付きではないUTF-8で保存するのは基本のことのようでW３Cさんのサイトでも、
文字エンコーディングは常にUTF-8を使用するべきです（UTF-8でファイルを保存することも忘れないようにしてください）。どうしてもUTF-8を使えない場合は、考慮すべきことを参照してください。
出典：https://www.w3.org/International/questions/qa-html-encoding-declarations.ja
このようにバチコンと書いてくださっているという…。なにはともあれ各サイトさんに助けてもらって１つ目の私のケースでのエラーは修復できました。
残るはtext-renderingのエラー修復です。以下に修復方法などをご紹介させていただきます。
“text-rendering” エラー
続いては２つ目のエラー →
「 プロパティ "text-rendering" は存在しません :auto 」の修復についてです。ポイント的な結論としては、
CDNで外部から読み込んでいるFont Awesomeフォントを自分のPCにダウンロードしてCSSフォルダ内の all.min.css の中にある text-rendering:auto; をCtrl+Fなどで検索して、このコードだけを削除する
という方法で解決しました。
以前はFont AwesomeさんのFREEの5.6.3ｖを外部読み込みのCDNの形で使わせていただいていた時に今回のCSSエラーが表示された次第です。
私の場合は幸いなことにこのコードを削除しても表示崩れなどが生じたアイコンはありませんでしたけども、もしかするとこのFont Awesomeフォントの中でこのコードが必要なアイコンがあるのかもしれません。もし使っておられるアイコンの表示が乱れるなどの不具合が生じた場合は削除したtext-rendering:auto;のコードを戻せばいいのですけどそれじゃエラーが回避できないというジレンマに…。その際は違うアイコンを使われるか 「エラー？知らねぇっ！」 と突っ切るしかないかもです。一応このエラーコード発見の経緯としましては、
「CSSのエラーだからのCSSファイルの中にこのコードがあるんだろうけど、どこだろう？」
と、
このURLにアクセスして 「 text-rendering:auto; 」 で検索かけるとわりと最初のほうにこのコードがありました。このままでは手が出せないのでダウンロードして該当コードを削除した、という流れです。結果的にサブセットもできてGoogle PageSpeed Insightsのスコアも改善できたのでよかったかな、と思います。
以下ではFont Awesomeフォントのダウンロードで手こずってしまったのでざっくりとですけど備忘録を兼ねてメモしています。
Font Awesomeダウンロード
https://fontawesome.com/ へアクセス
（２０２３/３/３１現在の情報です）
無料版を使いたい場合は左側のStart for Freeを選択、次へと進んで少し下にスクロールするとページ真ん中あたりにOther Ways to Useとあるので、Downloadを選択。
すぐ下の画像の右上のほうにある黄色い枠の中で Font Awesome 5 か Font Awesome 6 を選んで使いたいバージョンを決定。
少し下のほうにスクロールしてバージョンの型を選択。無料版を使う場合は、
Web ： pro free
Desktop ： pro free
と並んでいる所の web側のfree を選んでダウンロードを開始。
もしバージョンの型などがわからない場合はCDNで読み込んでいるFont AwesomeさんのURLを参考にしたらわかると思います。
（例）https://use.fontawesome.com/releases/v5.6.3/css/all.css
Font Awesome補足情報
Font AwesomeをダウンロードするとCSSファイルなど削除しても問題のないファイルもたくさんあるっぽいです。詳しくはこちらのサイトさんが書いてくださっています。
Font Awesomeをダウンロードした場合、フォルダ分けをするかもしれません。その時は参照URLが変わるのでFont Awesomeのall.min.css内の、
@font-face{
font-family:
"Font Awesome 5 Free";
font-style:normal;
font-weight:900;
src:url(../webfonts/〇〇〇.eot);}
の部分の参照先も置換などで一発変換して参照先を変更しておくといいです。ついでにFont Awesomeのサブセットもしておくこともおすすめです。GoogleさんのPageSpeed Insightsの項目で 「 とにかく読み込みスピードを向上させておいたほうがいいよ 」 という項目をクリアしておくと、サイトの表示速度がサクサクになりやすいと思います。もしFont Awesomeのアイコンを数種類しか使わない場合ですと読み込まないアイコンのＣＳＳまで読み込んでしまってページの表示速度が遅くなったりしますので…。
私はこちらさんのサイトを参考にさせてもらってサブセットしました。Googleウェブフォントのサブセットも要領は同じことだと思ったのでこの方法がおすすめでしょうか…。
こちらのサイトさんのサブセットを簡単にいうと、
予めFont Awesomeで使いたいアイコンを1ページ内に全部表示させておく
↓
デベロッパーツールを起動させる
↓
デベロッパーツールから使ってないアイコンのCSSを削除していく
という感じでできます。
おすすめの方法としてはダウンロードしたall.min.cssの原本とコピーを作っておいて、
使うアイコンのCSS
使わないアイコンのCSS
使うアイコンのCSS
との間に☆☆☆でも◎◎◎でもなんでもいいので目印をつけておいて、削除開始の目印を検索してshiftを押しながら選択する方法で削除するのが楽ちんでした。もし後でFont Awesomeアイコンを追加したい際は原本のall.min.cssがあれば該当するコードだけを追加してあげればいけると思います。
こちらのサイトさんの方法は実際に試していないのですけど、ある種の制限はあっても比較的簡単にできるようです。
W３CのHTMLエラーチェッカーは２０２３年３月３１日でサービスが終了されたので、別のHTMLチェッカーのURLも載せておきます。
https://html5.validator.nu/
エラーを修復するメリット
メリットとしては、
SEO対策
PageSpeed Insightsの
スコア改善
W３Cの理念に沿える
などなど
といった感じでPageSpeed InsightsのスコアもSEOに関係してくるっぽいのでなるべくエラーはクリアにしておいたほうがいいかな、と思います。
おわりに
たまたまW３Cのエラーチェックを知ることができて 「 W３Cとはなんぞや？ 」 と調べてみたらその理念も素敵だなぁ…と感じました。エラーの有無はSEOにも関わってくるのなら尚更きれいにしておきたいなと思い備忘録を兼ねてメモさせていただいた感じです。
少しでもエラー修復のお力になれたら幸いです。とあるココロの修復目録でした
（*＾ω＾）
もし、このページの情報が少しでも役に立ちそうだな、役に立ったな、と思ってもらえましたら、気になる広告をポチりとクリックしてやってください。(｡･ω･｡)ﾉ凸”
記事を書く励みになります！
よろしくお願いします。
(* . .)⁾⁾ﾍﾟｺﾘっ
