☰

CSSコンテンツ値にUnicode文字を配置する[重複] 質問する

tag-icon • tag-icon css unicode symbols unicode-escapes
CSSコンテンツ値にUnicode文字を配置する[重複] 質問する

問題があります。下向き矢印のHTMLコードを見つけました。↓(↓)

いいですね。今度はこれを CSS で次のように使用する必要があります。

nav a:hover {content:"&darr";}

これは HTML シンボルなので、明らかに機能しません↓。CSS で使用されるこれらの「エスケープされた Unicode」シンボルに関する情報は少ないようです。他にも似たようなシンボルは\2020見つかりましたが、矢印はありませんでした。矢印コードとは何ですか?

ベストアンサー1

CSS ファイルを UTF-8 として保存/提供してみませんか?

nav a:hover:after {
    content: "↓";
}

それでも十分ではなく、すべて ASCII のままにしておきたい場合は、次のようにします。

nav a:hover:after {
    content: "\2193";
}

文字列内の Unicode 文字の一般的な形式は、バックスラッシュに続いて 6 桁の 16 進数です\000000。Unicode文字が文字列の最後の文字である場合、または Unicode 文字の後にスペースを追加する場合は\FFFFFF、先頭の数字を省略できます。0詳細については、以下の仕様を参照してください。

CSS2仕様の関連部分:

3つ目に、バックスラッシュエスケープにより、著者は文書に簡単には入れられない文字を参照することができます。この場合、バックスラッシュの後に最大6桁の16進数（0..9A..F）が続き、これはISO 10646（[ISO10646]) 文字をその数値で区切ります。この数値は 0 であってはなりません。(スタイルシートに Unicode コードポイント 0 の文字が含まれている場合に何が起こるかは CSS 2.1 では未定義です。 ) 16 進数の後に [0-9a-fA-F] の範囲の文字が続く場合は、数値の終わりを明確にする必要があります。それには 2 つの方法があります。

  1. スペース（またはその他の空白文字）を含む：「\26 B」（「&B」）。この場合、ユーザーエージェントは「CR/LF」ペア（U+000D/U+000A）を単一の空白文字として扱う必要があります。
  2. 正確に6桁の16進数を指定する: "\000026B" ("&B")

実際、これら 2 つの方法を組み合わせることができます。16 進エスケープの後には、1 つの空白文字だけが無視されます。これは、エスケープ シーケンスの後の「実際の」スペースを 2 倍にする必要があることを意味することに注意してください。

数字が Unicode で許可されている範囲外の場合 (たとえば、「\110000」は現在の Unicode で許可されている最大値 10FFFF を超えています)、UA はエスケープ文字を「置換文字」(U+FFFD) に置き換えることができます。文字を表示する場合、UA は「欠落文字」グリフなどの目に見えるシンボルを表示する必要があります (cf.15.2、ポイント5）。

  • 注: バックスラッシュエスケープは常に識別子または文字列 (つまり、「{」は句読点ですが、「\7B」は句読点ではありません。また、「2」はクラス名の先頭では許可されませんが、「\32」は許可されます)。
    識別子「te\st」は、「test」とまったく同じ識別子です。

包括的なリスト:Unicode 文字「下矢印」(U+2193)。

おすすめ記事