iStudio 2|21: CSS スタイルシート雑技 No. 5 Safari で before、after に日本語を使いたい

CSS スタイルシート雑技 No. 5

Safari で before、after に日本語を使いたい

HTML ファイルに直接記述するならば何も問題なし。外部CSSファイルを使用するなら Unicode の区点コードで記述すればOK

解説

前項で before, after を使うと、ちょっとした装飾に便利だと書きましたが、例えば「§」などの日本語を使用する場合、 Safari では HTML ファイル内で記述するぶんには何の問題もないのですが、外部 CSS を読み込む形だと文字が化けてしまい、うまく表示されません。

# HTML ソース内に記述すると、文字が化けない。

<html>
 <head>
  <style type="text/css">
   h1:before{
    content: '§';
   }
  </style>
 </head>
 
 <body>
  <h1>見出し</h1>
 </body>
</html>



---

# CSS ファイルを別にして記述すると、文字が化けてしまう。

《 CSS部 》
h1:before{
        content: '§';
}

《 HTML部 》
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="url">
 </head>
 
 <body>
  <h1>見出し</h1>
 </body>
</html>

CSS ファイルを別にした際の文字化けを回避するには、なぜかバックスラッシュ(\)でエスケープした Unicode の句点コードで表記することで回避出来ます。

《 CSS部 》
h1:before{
        content: '\00a7'; /* §の Unicode 句点コード */
}

《 HTML部 》
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="url">
 </head>
 
 <body>
  <h1>見出し</h1>
 </body>
</html>

これについてはまだ色々と疑問が残っており調査中ですが、 Mozilla 系のブラウザでもこの表記で問題ない事、また、外部 CSS の漢字コードが ISO-2022-JP (いわゆるJIS)や、Shift JIS や EUC で宣言・記述していても、Unicode の表記で問題なく表示される事など、不思議な要素が残ったままです。

また、これは「Safari で和文フォントを指定する方法」の項でも触れており、繰り返しになりますが、 Safari で外部 CSS を記述する場合、漢字コードは Shift JIS のほうが都合が良いようです。
例えば、見出しにヒラギノ角ゴシック Std W8 を使用したいとして、下記のように記述したとします。

《 CSS部 》
@charset "iso-2022-jp";
h1{
        font-family: 'Hiragino Kaku Gothic Std';
        font-weight: normal;
}

《 HTML部 》
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
  <meta http-equiv="Content-Style-Type" content="text/css; charset=ISO-2022-JP">
 </head>
 
 <body>
  <h1>見出し</h1>
 </body>
</html>

ヒラギノ角ゴシック Std W8 を Safari で指定する際、欧文で指定すれば良い、という事は「Safari で和文フォントを指定する方法」の項で触れましたが、欧文のみの表記だと Mozilla 系のブラウザでは解釈されません。どうやら Mozilla 系ではフォントのウエイトまでしっかりと指定しなければならないようです。
では、Mozilla 系のブラウザでも正しく解釈してもらえるように、欧文、和文の両方を併記する形をとります。

《 CSS部 》
@charset "iso-2022-jp";
h1{
        font-family: 'ヒラギノ角ゴ Std W8', 'Hiragino Kaku Gothic Std';
        font-weight: normal;
}

《 HTML部 》
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
  <meta http-equiv="Content-Style-Type" content="text/css; charset=ISO-2022-JP">
 </head>
 
 <body>
  <h1>見出し</h1>
 </body>
</html>

今度は、 Safari では解釈出来ず、Mozilla ではヒラギノ角ゴシック Std W8 で正しく表示されました。これはどうやらブラウザの漢字コードの解釈に起因する問題のようであり、特に ISO-2022-JP、および EUC-JP による記述では、よくこういった問題が見受けられます。
これらの問題を解決するには、外部スタイルシートを Shift_JIS にて記述すれば良いようです。

《 CSS部 》
@charset "shift_jis";
h1{
        font-family: 'ヒラギノ角ゴ Std W8', 'Hiragino Kaku Gothic Std';
        font-weight: normal;
}

《 HTML部 》
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
  <meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS">
 </head>
 
 <body>
  <h1>見出し</h1>
 </body>
</html>

いかがでしょうか。問題なく表示されたのではないでしょうか。この例のように、 HTML ファイルと CSS ファイルは漢字コードが一致している必要はありません。これで問題なく表示されます。