cssでutf-8指定での文字化け

Question

chromeでの検証の結果、css内のbody部分に赤点が付きcssが無効化される

ソースコード
css

@charset "utf-8";

body{
font-size: 16px;
font-family: Verdana,sans-serif;
color:#333;
margin:0 auto;
}

検証コード

/ここに赤点(/u8)/body{
font-size: 16px;
font-family: Verdana,sans-serif;
color:#333;
margin:0 auto;
}

検索キーワード

chrome developer red dot

全角スペースは使用してない

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

「赤点」だけではわからないので画面キャプチャを添付するかエラーメッセージがあればそのエラーメッセージを提示するかして、具体的に起きた現象を記載してください。

Answer 1

今現在のコードコピペすると何か文字化け？機種依存文字？のようなものが入っているように見受けられます。

W3C CSS Validation Serviceでチェックすると該当箇所にエラーが出てますね。

文法解析エラーが発生しました Lexical error at line 3, column 1. Encountered: "\b" (8), after : ""

この部分を何とかして削りましょう。
他にも同様の箇所があるかもしれないのでチェックしてみてください。

Comments

[t.s_k]

bが環境依存文字みたいですね...
utf8指定もしてるので、理解できないです。

[m.ts10806]

\bなので違いますよ。
回答をよく読んでください。
bodyのbの「前に」謎の文字が入っています。
テキストエディタの仕様によっては入りこむことがあります。
別ファイルで一度作り直されては。（全てではなくbodyの前はコピペしないように）

[m.ts10806]

エディタの仕様というか例えばWebサイトからコピーしてきたときとかですかね。
元の文字コードが違った場合などにあるようです。

[t.s_k]

確認したところ、ファイルを作成し直しても１行目１文字目に謎の環境依存文字が入ることがあったりなかったり（何故）でした。

atomのコアパッケージが何か悪さをしているのかと思うので、開発環境の見直しをすることにします。

[t.s_k]

迅速な回答ありがとうございます！

[m.ts10806]

なるほどエディタが悪さするということも確かにありますね。
BOM付かどうかとかそのあたりも調整してみると良いです。

[t.s_k]

utf-8でも　BOM付き、無し　２通りあったのですね。
改行コードなるものがあるのは初耳でした。

[m.ts10806]

まあそこは問題が起きたときにエディタをかえて確認してみると良いかもしれません。
excelとかも同様に表記はされないけど何バイトも入り込んでいたりして文字数カウントがおかしくなることがあるので、何かのコピペなど自分でコードを打ってないときは注意が必要です。
エディタがかわれば同じ文字コード設定でも何が起きてもおかしくないです。

Answer 2

「header」部のCSSはどうでしょうか？効いていれば「body」部分のみの問題で、効いていなければCSSファイル自体の設定問題と考えられます。

「body」部分のみCSSが効かないのであれば、Chromeのデベロッパーツール等でも良いので、「赤点」部分を削除して確認されたらどうでしょうか？

それでCSSが効く場合は「mts10806」さんのご提案どおり、「赤点」部分を削除してから別ファイルとして作成されるのが良いかと思います。

Comments

[yoshinavi]

回答アップしたら終了でした。スミマセン。