文字
アセンブラの魔女 ⧫ CSS ⧫ 構文 ⧫ 文字
アセンブラの魔女 ⧫ CSS ⧫ 構文 ⧫ 文字

 CSSの制御下にない部分を除いて、すべてのCSS構文はASCII文字の大文字と小文字を区別しません。 しかし、HTML属性、フォント名、URIなどCSSの制御下にない部分は大文字と小文字が区別されることがあります。特に、HTMLでは要素名の大文字小文字を区別しませんが、XMLでは大文字小文字を区別しますので注意が必要です。

 識別子(セレクタ内の要素名、クラス、およびIDを含む)名に使う文字には次のような文字を使用することができます。

半角アルファベット小文字('a'~'z')
半角アルファベット大文字('A'~'Z')
半角数字('0'~'9')(*1)
ISO 10646文字U + 00A0以上
ハイフン('-')(*1)
アンダースコア('_')
エスケープ文字
数値コード化したISO 10646(Unicode)文字

 (*1)数字、2桁のハイフン、ハイフンの後に続く数字から始まることは出来ません。

 例えば、識別子「B&W?」は、エスケープ文字を使って「B\&W\?」と書いたり、文字コードを使って「B¥26W ¥3F」と書くことができます。

 文字列中の'バックスラッシュ'+'改行'は無視されます。

 CSSの特殊文字の意味をエスケープします。16進数、改行、キャリッジリターン、改頁を除くすべての文字はバックスラッシュを使ってエスケープ文字として表現することができます。

書式
\C

 C はエスケープ対象の文字を意味します。例えば、"\""という文字列の中身は'"'(1個のダブルクォート)となります。

 バックスラッシュによるエスケープは識別子や文字列中で使うことができます。

、

 バックスラッシュの後に最大6桁の16進数(文字コード)を置くことで、ISO 10646(Unicodeとほぼ互換)の文字を表現することもできます。

書式
\h(1,6)

 hは1~6桁のISO 10646の16進数の文字コード。

 例えば、'文字'という文字はISO 10646の文字コードで次のように書くことができます。

"\6587\5b57"

 しかし、文字コードの直後に'a'~'f'、'A'~'F'、'0'~'9'のいずれかの範囲にある文字が続く場合、上記の書き方では文字コードと後に続く文字の区別がつかなくなります。この問題に対処するには二つの方法があります。

 最初の方法は、文字コードの直後に半角スペースなどの空白文字を挿入する方法です。文字コードの直後の空白文字は、文字コードの区切りとして扱われ、文字コードがでコードされた後除去されます。例えば、文字コードで表現した'文字'という文字の後に'a'という文字を続ける場合、次のように書くことができます。

"\6587\5b57 a"

 これは次のように文字コードの直後の空白文字が除去された状態で表示されます。

 もう一つの方法は、文字コードの上位桁を'0'で埋めて6桁のコードにする方法です。上記の例は、次のように書くことができます。

"\006587\005b57a"

 この書き方では、コードの桁が揃っていることによる読みやすさがありますが、コードと後に続く文字の区別が難しくなりそうです。コードを6桁にそろえる場合でも、空白文字で区切る方が可読性が高くなります。

"\006587 \005b57 a"

 文字コードの直後の空白文字は除去されてしまいますので、これを意図的に入れるには文字コードの後に同じ空白文字を2個置くかエスケープする必要があります。

、
▼ Property
記事情報
datePublished2011-01-01
dateModified2018-06-22
authorアセンブラの魔女
headlineCSSの文字に関する記事です
keywordsCSS
keywordsCascading Style Sheets
keywords構文
keywords文字
publisher name= wiredFish, logo.name= wiredFish, logo.url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png size= 208 pixel x 50 pixel
image.url url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png , size= 208 pixel x 50 pixel