CSSのcontentプロパティの文字化けについて
2015年1月15日 20:28

CSSのcontentプロパティというのがありますね。
これは便利。
知らない人のために少しだけ。
contentプロパティとは、HTMLソースに記述されていない内容(文字もOK)をcssを使用して付加することができるプロパティのことです。
例えば、リスト<li></li>の中の要素の先頭に「☆」を入れたいというときなどにこのプロパティを使用します。

【html】

 
<ul> 
	<li>佐藤さん</li>
	<li>鈴木さん</li>
	<li>高橋さん</li>
</ul>

【css】

ul li:before { 
	content: "☆";
}

こう書くわけですね。
これで首尾よく以下のように表示されるはずです。



☆佐藤さん
☆鈴木さん
☆高橋さん


しかし…!
文字コードやなんやのおかげ様で文字化けを起こしてしまうことがあります。



?佐藤さん
?鈴木さん
?高橋さん


↑こんなん(´д`)

やっぱし2バイト文字は数値文字参照の値で書いた方がいいかと思います。
数値文字参照は16進数で記述します。

例えば☆を数値文字参照変換すると「&#x2606;」という値になりますが、contentプロパティで利用する場合は、そのまま書いても☆にはなりません。

&を\に変更し、#とxを0に変更してさらにセミコロンを消す必要があります。

(‘A`)マンドクセ・・・

↓そんな時はコレー(・∀・)

【16進数値文字参照 変換表】

! \00021
" \00022
# \00023
$ \00024
% \00025
& \00026
' \00027
( \00028
) \00029
* \0002A
+ \0002B
, \0002C
- \0002D
. \0002E
/ \0002F
: \0003A
; \0003B
< \0003C
= \0003D
> \0003E
? \0003F
@ \00040
\00080
 \00081
\00082
ƒ \00083
\00084
\00085
\00086
\00087
ˆ \00088
\00089
Š \0008A
\0008B
© \000A9
֍ \0058D
֎ \0058E
֏ \0058F
۞ \006DE
۩ \006E9
߷ \007F7
\00DF4
\0222E
\0222F
\02230
\02231
\02232
\02233
\02234
\02235
\02313
\02314
\02315
\02316
\02317
\02318
\0231A
\0231B
\02326
\02327
\02328
\0232C
\0234B
\0234C
\0234D
\0234E
\0234F
\02350
\02351
\02352
\02353
\02354
\02355
\02356
\02357
\02358
\02359
\0235A
\0235B
\0235C
\0235D
\0235E
\0235F
\02360
\02361
\02362
\02363
\02364
\02365
\02366
\02367
\02368
\02369
\0236A
\0236B
\0236C
\0236D
\0236E
\0236F
\02371
\02372
\02373
\02374
\02375
\02376
\02377
\02378
\02379
\0237A
\0237B
\0237C
\0237D
\0237E
\0237F
\02380
\02381
\02382
\02383
\02384
\02385
\02386
\02387
\02388
\02389
\0238A
\0238B
\0238C
\0238D
\0238E
\0238F
\02390
\02391
\02392
\02393
\02394
\02395
\02396
\02397
\02398
\02399
\0239A
\023CE
\023CF
\023E9
\023EA
\023EB
\023EC
\023ED
\023EE
\023EF
\023F0
\023F1
\023F2
\023F3
\023F4
\023F5
\023F6
\023F7
\023F8
\023F9
\023FA
\02460
\02461
\02462
\02463
\02464
\02465
\02466
\02467
\02468
\02469
\0246A
\0246B
\0246C
\0246D
\0246E
\0246F
\02470
\02471
\02472
\02473
\02474
\02475
\02476
\02477
\02478
\02479
\0247A
\0247B
\0247C
\0247D
\0247E
\0247F
\02480
\02481
\02482
\02483
\02484
\02485
\02486
\02487
\02488
\02489
\0248A
\0248B
\0248C
\0248D
\0248E
\0248F
\02490
\02491
\02492
\02493
\02494
\02495
\02496
\02497
\02498
\02499
\0249A
\0249B
\0249C
\0249D
\0249E
\0249F
\024A0
\024A1
\024A2
\024A3
\024A4
\024A5
\024A6
\024A7
\024A8
\024A9
\024AA
\024AB
\024AC
\024AD
\024AE
\024AF
\024B0
\024B1
\024B2
\024B3
\024B4
\024B5
\024B6
\024B7
\024B8
\024B9
\024BA
\024BB
\024BC
\024BD
\024BE
\024BF
\024C0
\024C1
\024C2
\024C3
\024C4
\024C5
\024C6
\024C7
\024C8
\024C9
\024CA
\024CB
\024CC
\024CD
\024CE
\024CF
\024D0
\024D1
\024D2
\024D3
\024D4
\024D5
\024D6
\024D7
\024D8
\024D9
\024DA
\024DB
\024DC
\024DD
\024DE
\024DF
\024E0
\024E1
\024E2
\024E3
\024E4
\024E5
\024E6
\024E7
\024E8
\024E9
\024EA
\024EB
\024EC
\024ED
\024EE
\024EF
\024F0
\024F1
\024F2
\024F3
\024F4
\024F5
\024F6
\024F7
\024F8
\024F9
\024FA
\024FB
\024FC
\024FD
\024FE
\024FF
\025A0
\025A1
\025A2
\025A3
\025A4
\025A5
\025A6
\025A7
\025A8
\025A9
\025B0
\025B1
\025B2
\025B3
\025B4
\025B5
\025B6
\025B7
\025B8
\025B9
\025BA
\025BB
\025BC
\025BD
\025BE
\025BF
\025C0
\025C1
\025C2
\025C3
\025C4
\025C5
\025C6
\025C7
\025C8
\025C9
\025CA
\025CB
\025CC
\025CD
\025CE
\025CF
\025D0
\025D1
\025D2
\025D3
\025D4
\025D5
\025E2
\025E3
\025E4
\025E5
\025E6
\025E7
\025E8
\025E9
\025EA
\025EB
\025EC
\025ED
\025EE
\025EF
\025F0
\025F1
\025F2
\025F3
\025F4
\025F5
\025F6
\025F7
\025F8
\025F9
\025FA
\025FB
\025FC
\025FD
\025FE
\025FF
\02600
\02601
\02602
\02603
\02604
\02605
\02606
\02607
\02608
\02609
\0260A
\0260B
\0260C
\0260D
\0260E
\0260F
\02610
\02611
\02612
\02613
\02614
\02615
\02616
\02617
\02618
\02619
\0261A
\0261B
\0261C
\0261D
\0261E
\0261F
\02620
\02621
\02622
\02623
\02624
\02625
\02626
\02627
\02628
\02629
\0262A
\0262B
\0262C
\0262D
\0262E
\0262F
\02638
\02639
\0263A
\0263B
\0263C
\02654
\02655
\02656
\02657
\02658
\02659
\0265A
\0265B
\0265C
\0265D
\0265E
\0265F
\02660
\02661
\02662
\02663
\02664
\02665
\02666
\02667
\02668
\02669
\0266A
\0266B
\0266C
\0266D
\0266E
\0266F
\02670
\02671
\02672
\02673
\02674
\02675
\02676
\02677
\02678
\02679
\0267A
\0267B
\0267C
\0267D
\0267E
\0267F
\02686
\02687
\02688
\02689
\02690
\02691
\02692
\02693
\02694
\02695
\02696
\02697
\02698
\02699
\0269A
\0269B
\0269C
\0269D
\0269E
\0269F
\026A0
\026A1
\026A2
\026A3
\026A4
\026A5
\026A6
\026A7
\026A8
\026A9
\026AA
\026AB
\026AC
\026AD
\026AE
\026AF
\026B0
\026B1
\026B2
\026B3
\026B4
\026B5
\026B6
\026B7
\026B8
\026B9
\026BA
\026BB
\026BC
\026BD
\026BE
\026BF
\026C0
\026C1
\026C2
\026C3
\026C4
\026C5
\026C6
\026C7
\026C8
\026C9
\026CA
\026CB
\026CC
\026CD
\026CE
\026CF
\026D0
\026D1
\026D2
\026D3
\026D4
\026D5
\026D6
\026D7
\026D8
\026D9
\026DA
\026DB
\026DC
\026DD
\026DE
\026DF
\026E0
\026E1
\026E2
\026E3
\026E4
\026E5
\026E6
\026E7
\026E8
\026E9
\026EA
\026EB
\026EC
\026ED
\026EE
\026EF
\026F0
\026F1
\026F2
\026F3
\026F4
\026F5
\026F6
\026F7
\026F8
\026F9
\026FA
\026FB
\026FC
\026FD
\026FE
\026FF
\02700
\02701
\02702
\02703
\02704
\02705
\02706
\02707
\02708
\02709
\0270A
\0270B
\0270C
\0270D
\0270E
\0270F
\02710
\02711
\02712
\02713
\02714
\02715
\02716
\02717
\02718
\02719
\0271A
\0271B
\0271C
\0271D
\0271E
\0271F
\02720
\02721
\02722
\02723
\02724
\02725
\02726
\02727
\02728
\02729
\0272A
\0272B
\0272C
\0272D
\0272E
\0272F
\02730
\02731
\02732
\02733
\02734
\02735
\02736
\02737
\02738
\02739
\0273A
\0273B
\0273C
\0273D
\0273E
\0273F
\02740
\02741
\02742
\02743
\02744
\02745
\02746
\02747
\02748
\02749
\0274A
\0274B
\0274C
\0274D
\0274E
\0274F
\02750
\02751
\02752
\02753
\02754
\02755
\02756
\02757
\02758
\02759
\0275A
\0275B
\0275C
\0275D
\0275E
\0275F
\02760
\02761
\02762
\02763
\02764
\02765
\02766
\02767
\02768
\02769
\0276A
\0276B
\0276C
\0276D
\0276E
\0276F
\02770
\02771
\02772
\02773
\02774
\02775
\02776
\02777
\02778
\02779
\0277A
\0277B
\0277C
\0277D
\0277E
\0277F
\02780
\02781
\02782
\02783
\02784
\02785
\02786
\02787
\02788
\02789
\0278A
\0278B
\0278C
\0278D
\0278E
\0278F
\02790
\02791
\02792
\02793
\02794
\02795
\02796
\02797
\02798
\02799
\0279A
\0279B
\0279C
\0279D
\0279E
\0279F
\027A0
\027A1
\027A2
\027A3
\027A4
\027A5
\027A6
\027A7
\027A8
\027A9
\027AA
\027AB
\027AC
\027AD
\027AE
\027AF
\027B0
\027B1
\027B2
\027B3
\027B4
\027B5
\027B6
\027B7
\027B8
\027B9
\027BA
\027BB
\027BC
\027BD
\027BE
\027BF
\027C0
\027C1
\027F0
\027F1
\02900
\02901
\02902
\02903
\02904
\02905
\02906
\02907
\02908
\02909
\0290A
\0290B
\0290C
\0290D
\0290E
\0290F
\02910
\02911
\02912
\02913
\02914
\02915
\02916
\02917
\02918
\02919
\0291A
\0291B
\0291C
\0291D
\0291E
\0291F
\02920
\02921
\02922
\02923
\02924
\02925
\02926
\02927
\02928
\02929
\0292A
\0292B
\0292C
\0292D
\0292E
\0292F
\02930
\02931
\02932
\02933
\02934
\02935
\02936
\02937
\02938
\02939
\0293A
\0293B
\0293C
\0293D
\0293E
⤿ \0293F
\02940
\02941
\0297C
\0297D
\0297E
⥿ \0297F
\02980
\02981
\02982
\02993
\02994
\02995
\02996
\02997
\02998
\02999
\0299A
\0299B
\0299C
\0299D
\0299E
\0299F
\029A0
\029A1
\029A2
\029A3
\029A4
\029A5
\029A6
\029A7
\029A8
\029A9
\029AA
\029AB
\029AC
\029AD
\029AE
\029AF
\029B0
\029B1
\029B2
\029B3
\029B4
\029B5
\029B6
\029B7
\029B8
\029B9
\029BA
\029BB
\029BC
\029BD
\029BE
⦿ \029BF
\029C0
\029C1
\029C2
\029C3
\029C4
\029C5
\029C6
\029C7
\029C8
\029C9
\029CA
\029CB
\029CC
\029CD
\029CE
\029CF
\029D0
\029D1
\029D2
\029D3
\029D4
\029D5
\029D6
\029D7
\029D8
\029D9
\029DA
\029DB
\029DC
\029DD
\029DE
\029DF
\029E0
\029E1
\029E2
\029E3
\029E4
\029E5
\029E6
\029E7
\029E8
\029E9
\029EA
\029EB
\029EC
\029ED
\029EE
\029EF
\029F0
\029F1
\029F2
\029F3
\029F4
\029F5
\029F6
\029F7
\029F8
\029F9
\029FA
\029FB
\029FC
\029FD
\029FE
⧿ \029FF
\02A00
\02A01
\02A02
\02A03
\02A04
\02A05
\02A06
\02A07
\02A08
\02A09
\02A0A
\02A0B
\02A0C
\02A0D
\02A0E
\02A0F
\02A10
\02A11
\02A12
\02A13
\02A14
\02A15
\02A16
\02A17
\02A18
\02A19
\02A1A
\02A1B
\02A1C
\02A1D
\02A1E
\02A1F
\02A20
\02A21
\02A22
\02A23
\02A24
\02A25
\02A26
\02A27
\02A28
\02A29
\02A2A
\02A2B
\02A2C
\02A2D
\02A2E
\02A2F
\02A30
\02A31
\02A32
\02A33
\02A34
\02A35
\02A36
\02A37
\02A38
\02A39
\02A3A
\02A3B
\02A3C
\02A3D
\02A3E
⨿ \02A3F
\02A40
\02A41
\02A42
\02A43
\02A44
\02A45
\02A46
\02A47
\02A48
\02A49
\02A4A
\02A4B
\02A4C
\02A4D
\02A4E
\02A4F
\02A50
\02A51
\02A52
\02A53
\02A54
\02A55
\02A56
\02A57
\02A58
\02A59
\02A5A
\02A5B
\02A5C
\02A5D
\02A5E
\02A5F
\02A60
\02A61
\02A62
\02A63
\02A64
\02A65
\02A66
\02A67
\02A68
\02A69
\02A6A
\02A6B
\02A6C
\02A6D
\02A6E
\02A6F
\02A70
\02A71
\02A72
\02A73
\02A74
\02A75
\02A76
\02A77
\02A78
\02A79
\02A7A
\02A7B
\02A7C
\02A7D
\02A7E
⩿ \02A7F
\02A80
\02A81
\02A82
\02A83
\02A84
\02A85
\02A86
\02A87
\02A88
\02A89
\02A8A
\02A8B
\02A8C
\02A8D
\02A8E
\02A8F
\02A90
\02A91
\02A92
\02A93
\02A94
\02A95
\02A96
\02A97
\02A98
\02A99
\02A9A
\02A9B
\02A9C
\02A9D
\02A9E
\02A9F
\02AA0
\02AA1
\02AA2
\02AA3
\02AA4
\02AA5
\02AA6
\02AA7
\02AA8
\02AA9
\02AAA
\02AAB
\02AAC
\02AAD
\02AAE
\02AAF
\02AB0
\02AB1
\02AB2
\02AB3
\02AB4
\02AB5
\02AB6
\02AB7
\02AB8
\02AB9
\02ABA
\02ABB
\02ABC
\02ABD
\02ABE
⪿ \02ABF
\02AC0
\02AC1
\02AC2
\02AC3
\02AC4
\02AC5
\02AC6
\02AC7
\02AC8
\02AC9
\02ACA
\02ACB
\02ACC
\02ACD
\02ACE
\02ACF
\02AD0
\02AD1
\02AD2
\02AD3
\02AD4
\02AD5
\02AD6
\02AD7
\02AD8
\02AD9
\02ADA
\02ADB
\02ADC
\02ADD
\02ADE
\02ADF
\02AE0
\02AE1
\02AE2
\02AE3
\02AE4
\02AE5
\02AE6
\02AE7
\02AE8
\02AE9
\02AEA
\02AEB
\02AEC
\02AED
\02AEE
\02AEF
\02AF0
\02AF1
\02AF2
\02AF3
\02AF4
\02AF5
\02AF6
\02AF7
\02AF8
\02AF9
\02AFA
\02AFB
\02AFC
\02AFD
\02AFE
⫿ \02AFF
\02B00
\02B01
\02B02
\02B03
\02B04
\02B05
\02B06
\02B07
\02B08
\02B09
\02B0A
\02B0B
\02B0C
\02B0D
\02B0E
\02B0F
\02B10
\02B11
\02B12
\02B13
\02B14
\02B15
\02B16
\02B17
\02B18
\02B19
\02B1A
\02B1B
\02B1C
\02B1D
\02B1E
\02B1F
\02B20
\02B21
\02B22
\02B23
\02B24
\02B25
\02B26
\02B27
\02B28
\02B29
\02B2A
\02B2B
\02B2C
\02B2D
\02B2E
\02B2F
\02B30
\02B31
\02B32
\02B33
\02B34
\02B35
\02B36
\02B37
\02B38
\02B39
\02B3A
\02B3B
\02B3C
\02B3D
\02B3E
⬿ \02B3F
\02B40
\02B41
\02B42
\02B43
\02B44
\02B45
\02B46
\02B47
\02B48
\02B49
\02B4A
\02B4B
\02B4C
\02B4D
\02B4E
\02B4F
\02B50
\02B51
\02B52
\02B53
\02B54
\02B55
\02B56
\02B57
\02B58
\02B59
\02B5A
\02B5B
\02B5C
\02B5D
\02B5E
\02B5F
\02B60
\02B61
\02B62
\02B63
\02B64
\02B65
\02B66
\02B67
\02B68
\02B69
\02B6A
\02B6B
\02B6C
\02B6D
\02B6E
\02B6F
\02B70
\02B71
\02B72
\02B73
\02B74
\02B75
\02B76
\02B77
\02B78
\02B79
\02B7A
\02B7B
\02B7C
\02B7D
\02B7E
⭿ \02B7F
\02B80
\02B81
\02B82
\02B83
\02B84
\02B85
\02B86
\02B87
\02B88
\02B89
\02B8A
\02B8B
\02B8C
\02B8D
\02B8E
\02B8F
\02B90
\02B91
\02B92
\02B93
\02B94
\02B95
\02B96
\02B97
\02B98
\02B99
\02B9A
\02B9B
\02B9C
\02B9D
\02B9E
\02B9F
\02BA0
\02BA1
\02BA2
\02BA3
\02BA4
\02BA5
\02BA6
\02BA7
\02BA8
\02BA9
\02BAA
\02BAB
\02BAC
\02BAD
\02BAE
\02BAF
\02BB0
\02BB1
\02BB2
\02BB3
\02BB4
\02BB5
\02BB6
\02BB7
\02BB8
\02BB9
\02BBA
\02BBB
\02BBC
\02BBD
\02BBE
⮿ \02BBF
\02BC0
\02BC1
\02BC2
\02BC3
\02BC4
\02BC5
\02BC6
\02BC7
\02BC8
\02BC9
\02BCA
\02BCB
\02BCC
\02BCD
\02BCE
\02BCF
\02BD0
\03036
\03037
\03038
\03039
\0303A
\0303B
\0303C
\0303D
\03220
\03221
\03222
\03223
\03224
\03225
\03226
\03227
\03228
\03229
\0322A
\0322B
\0322C
\0322D
\0322E
\0322F
\03230
\03231
\03232
\03233
\03234
\03235
\03236
\03237
\03238
\03239
\0323A
\0323B
\0323C
\0323D
\0323E
\0323F
\03240
\03241
\03242
\03243
\03244
\03245
\03246
\03247
\03248
\03249
\0324A
\0324B
\0324C
\0324D
\0324E
\0324F
\03250
\03251
\03252
\03253
\03254
\03255
\03256
\03257
\03258
\03259
\0325A
\0325B
\0325C
\0325D
\0325E
\0325F
\03280
\03281
\03282
\03283
\03284
\03285
\03286
\03287
\03288
\03289
\0328A
\0328B
\0328C
\0328D
\0328E
\0328F
\03290
\03291
\03292
\03293
\03294
\03295
\03296
\03297
\03298
\03299
\0329A
\0329B
\0329C
\0329D
\0329E
\0329F
\032A0
\032A1
\032A2
\032A3
\032A4
\032A5
\032A6
\032A7
\032A8
\032A9
\032AA
\032AB
\032AC
\032AD
\032AE
\032AF
\032B0
\032B1
\032B2
\032B3
\032B4
\032B5
\032B6
\032B7
\032B8
\032B9
\032BA
\032BB
\032BC
\032BD
\032BE
\032BF
\032C0
\032C1
\032C2
\032C3
\032C4
\032C5
\032C6
\032C7
\032C8
\032C9
\032CA
\032CB
\032D0
\032D1
\032D2
\032D3
\032D4
\032D5
\032D6
\032D7
\032D8
\032D9
\032DA
\032DB
\032DC
\032DD
\032DE
\032DF
\032E0
\032E1
\032E2
\032E3
\032E4
\032E5
\032E6
\032E7
\032E8
\032E9
\032EA
\032EB
\032EC
\032ED
\032EE
\032EF
\032F0
\032F1
\032F2
\032F3
\032F4
\032F5
\032F6
\032F7
\032F8
\032F9
\032FA
\032FB
\032FC
\032FD
\032FE
\03300
\03301
\03302
\03303
\03304
\03305
\03306
\03307
\03308
\03309
\0330A
\0330B
\0330C
\0330D
\0330E
\0330F
\03310
\03311
\03312
\03313
\03314
\03315
\03316
\03317
\03318
\03319
\0331A
\0331B
\0331C
\0331D
\0331E
\0331F
\03320
\03321
\03322
\03323
\03324
\03325
\03326
\03327
\03328
\03329
\0332A
\0332B
\0332C
\0332D
\0332E
\0332F
\03330
\03331
\03332
\03333
\03334
\03335
\03336
\03337
\03338
\03339
\0333A
\0333B
\0333C
\0333D
\0333E
\0333F
\03340
\03341
\03342
\03343
\03344
\03345
\03346
\03347
\03348
\03349
\0334A
\0334B
\0334C
\0334D
\0334E
\0334F
\03350
\03351
\03352
\03353
\03354
\03355
\03356
\03357
\03358
\03359
\0335A
\0335B
\0335C
\0335D
\0335E
\0335F
\03360
\03361
\03362
\03363
\03364
\03365
\03366
\03367
\03368
\03369
\0336A
\0336B
\0336C
\0336D
\0336E
\0336F
\03370
\03371
\03372
\03373
\03374
\03375
\03376
\03377
\03378
\03379
\0337A
\0337B
\0337C
\0337D
\0337E
\0337F
\03380
\03381
\03382
\03383
\03384
\03385
\03386
\03387
\03388
\03389
\0338A
\0338B
\0338C
\0338D
\0338E
\0338F
\03390
\03391
\03392
\03393
\03394
\03395
\03396
\03397
\03398
\03399
\0339A
\0339B
\0339C
\0339D
\0339E
\0339F
\033A0
\033A1
\033A2
\033A3
\033A4
\033A5
\033A6
\033E0
\033E1
\033E2
\033E3
\033E4
\033E5
\033E6
\033E7
\033E8
\033E9
\033EA
\033EB
\033EC
\033ED
\033EE
\033EF
\033F0
\033F1
\033F2
\033F3
\033F4
\033F5
\033F6
\033F7
\033F8
\033F9
\033FA
\033FB
\033FC
\033FD
\033FE

【css】

ul li:before { 
	content: "\02606";
}

これで完璧に以下のように表示されるはずです。



☆佐藤さん
☆鈴木さん
☆高橋さん