擬似要素（::before、::after）のcontentプロパティで日本語など文字化けすることがある | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website

テクノロジーカテゴリーの変更を依頼記事元:

shanabrian.com

1user がブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fshanabrian.com%2Fweb%2Fhtml-css-js-technics%2Fcss-content-property-character-corruption.php" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://shanabrian.com/web/html-css-js-technics/css-content-property-character-corruption.php">擬似要素（::before、::after）のcontentプロパティで日本語など文字化けすることがある | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website</a><a href="https://b.hatena.ne.jp/entry/s/shanabrian.com/web/html-css-js-technics/css-content-property-character-corruption.php">はてなブックマーク - 擬似要素（::before、::after）のcontentプロパティで日本語など文字化けすることがある | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

擬似要素（::before、::after）のcontentプロパティで日本語など文字化けすることがある | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website

起こる条件としては、対象の擬似要素が含まれるCSSが外部ファイルであること、CSSファイルの文字コード... 起こる条件としては、対象の擬似要素が含まれるCSSが外部ファイルであること、CSSファイルの文字コードがShift_JIS以外であることです。この現象を回避するには、contentプロパティにしている値をUnicodeに変換することで回避できます。例えば"日本語文字"という文字をUnicodeにすると"¥u65e5¥u672c¥u8a9e¥u6587¥u5b57"となります。このようにUnicodeは¥u + 16進数の4桁から6桁で表しますが、contentプロパティで使用する場合は、¥ + 16進数の4桁から6桁と"u"を除いた状態で指定する必要があります。