激しく今更な HTML 解析機 と CSS 解析機

箸休め。

この土日はちょっと身近なところのためのものをせっせと作っていたのですが、ちょっと飽きたので箸休めを。 今更感がぷんぷん漂いますが、成分解析 on WEB - 入力した成分を分析しますで作業中に遊んでいたところ、成分解析メイカー ver1.2 なるものがあるではありませんか。 まあよくある「○○占いジェネレータ」的なものなのですが、作業の頭の切り替えにちょっと作ってみました。

• HTML 解析機
• CSS 解析機

HTML 解析機の成分リスト

HTML 4.01 および XHTML 1.0 の DTD で定義されている要素を元に作ってみました。 成分リストを 100個指定しない場合は適当なもので埋められます とのことなのですが、 97 個しか定義されていません。 なので、オマケ要素的なものを付け加えています。 ( 独自要素あるいは廃止された要素であることは書いた上で )

1. a 要素
2. abbr 要素
3. acronym 要素
4. address 要素
5. applet 要素
6. area 要素
7. b 要素
8. base 要素
9. basefont 要素
10. bdo 要素
11. big 要素
12. blockquote 要素
13. body 要素
14. br 要素
15. button 要素
16. caption 要素
17. center 要素
18. cite 要素
19. code 要素
20. col 要素
21. colgroup 要素
22. dd 要素
23. del 要素
24. dfn 要素
25. dir 要素
26. div 要素
27. dl 要素
28. dt 要素
29. em 要素
30. fieldset 要素
31. font 要素
32. form 要素
33. frame 要素
34. frameset 要素
35. h1 要素
36. h2 要素
37. h3 要素
38. h4 要素
39. h5 要素
40. h6 要素
41. head 要素
42. hr 要素
43. html 要素
44. I 要素
45. iframe 要素
46. img 要素
47. input 要素
48. ins 要素
49. isindex 要素
50. kbd 要素
51. label 要素
52. legend 要素
53. li 要素
54. link 要素
55. map 要素
56. menu 要素
57. meta 要素
58. neframes 要素
59. noscript 要素
60. object 要素
61. ol 要素
62. optgroup 要素
63. option 要素
64. p 要素
65. param 要素
66. pre 要素
67. q 要素
68. rb 要素
69. rbc 要素
70. rp 要素
71. rt 要素
72. rtc 要素
73. ruby 要素
74. s 要素
75. samp 要素
76. script 要素
77. select 要素
78. small 要素
79. span 要素
80. strike 要素
81. strong 要素
82. style 要素
83. sub 要素
84. sup 要素
85. table 要素
86. tbody 要素
87. td 要素
88. textarea 要素
89. tfoot 要素
90. th 要素
91. thead 要素
92. title 要素
93. tr 要素
94. tt 要素
95. u 要素
96. ul 要素
97. var 要素
98. marquee要素 ( IE 独自拡張の要素 )
99. blink要素 ( NN 独自拡張の要素 )
100. xmp要素 ( 廃止された要素 )

実際に解析してみると、次のようになります。 hxxk.jp で HTML 解析してみました。

hxxk.jpの45%はstrong 要素で構成されています

hxxk.jpの38%はbdo 要素で構成されています

hxxk.jpの7%はb 要素で構成されています

hxxk.jpの5%はarea 要素で構成されています

hxxk.jpの5%はbase 要素で構成されています

強くて太いらしいです。

CSS 解析機の成分リスト

CSS 2 で定義されているプロパティを元に作ってみました。 こちらの場合は 100 個以上のプロパティがありましたので、順に並べていって 100 個目までを成分リストに指定しました。 次に羅列するプロパティリストは CSS 解析機の結果には現れないものも含まれています。

1. azimuth プロパティ
2. background プロパティ
3. background-attachment プロパティ
4. background-color プロパティ
5. background-image プロパティ
6. background-position プロパティ
7. background-repeat プロパティ
8. border プロパティ
9. border-collapse プロパティ
10. border-color プロパティ
11. border-spacing プロパティ
12. border-style プロパティ
13. border-top プロパティ
14. border-bottom プロパティ
15. border-left プロパティ
16. border-light プロパティ
17. border-top-color プロパティ
18. border-bottom-color プロパティ
19. border-left-color プロパティ
20. border-light-color プロパティ
21. border-top-style プロパティ
22. border-bottom-style プロパティ
23. border-left-style プロパティ
24. border-light-style プロパティ
25. border-top-width プロパティ
26. border-bottom-width プロパティ
27. border-left-width プロパティ
28. border-light-width プロパティ
29. border-width プロパティ
30. bottom プロパティ
31. caption-side プロパティ
32. clear プロパティ
33. clip プロパティ
34. color プロパティ
35. content プロパティ
36. counter-increment プロパティ
37. counter-reset プロパティ
38. cue プロパティ
39. cue-after プロパティ
40. cue-before プロパティ
41. cursor プロパティ
42. direction プロパティ
43. display プロパティ
44. elevation プロパティ
45. float プロパティ
46. font プロパティ
47. font-family プロパティ
48. font-size プロパティ
49. font-size-adjust プロパティ
50. font-stretch プロパティ
51. font-style プロパティ
52. font-variant プロパティ
53. font-weight プロパティ
54. height プロパティ
55. left プロパティ
56. letter-spacing プロパティ
57. line-height プロパティ
58. list-style プロパティ
59. list-style-image プロパティ
60. list-style-position プロパティ
61. list-style-type プロパティ
62. margin プロパティ
63. margin-top プロパティ
64. margin-bottom プロパティ
65. margin-left プロパティ
66. margin-right プロパティ
67. marker-offset プロパティ
68. marks プロパティ
69. max-height プロパティ
70. max-width プロパティ
71. min-height プロパティ
72. min-width プロパティ
73. orphans プロパティ
74. outline プロパティ
75. outline-color プロパティ
76. outline-style プロパティ
77. outline-width プロパティ
78. overflow プロパティ
79. padding プロパティ
80. padding-top プロパティ
81. padding-bottom プロパティ
82. padding-left プロパティ
83. padding-right プロパティ
84. page プロパティ
85. page-break-after プロパティ
86. page-break-before プロパティ
87. page-break-inside プロパティ
88. pause プロパティ
89. pause-after プロパティ
90. pause-before プロパティ
91. pitch プロパティ
92. pitch-range プロパティ
93. play-during プロパティ
94. positiion プロパティ
95. quotes プロパティ
96. richness プロパティ
97. right プロパティ
98. size プロパティ
99. speak プロパティ
100. speak-header プロパティ
101. speak-numeral プロパティ
102. speak-punctuation プロパティ
103. speech-rate プロパティ
104. stress プロパティ
105. table-layout プロパティ
106. text-align プロパティ
107. text-decoration プロパティ
108. text-indent プロパティ
109. text-shadow プロパティ
110. text-transform プロパティ
111. top プロパティ
112. unicode-bidi プロパティ
113. vertical-align プロパティ
114. visibility プロパティ
115. voice-family プロパティ
116. volume プロパティ
117. white-space プロパティ
118. widows プロパティ
119. width プロパティ
120. word-spacing プロパティ
121. z-index プロパティ

実際に解析してみると、次のようになります。 hxxk.jp で CSS 解析してみました。

hxxk.jpの53%はmarker-offset プロパティでスタイルが定義されています

hxxk.jpの32%はborder-left-style プロパティでスタイルが定義されています

hxxk.jpの8%はbackground-repeat プロパティでスタイルが定義されています

hxxk.jpの6%はbackground-image プロパティでスタイルが定義されています

hxxk.jpの1%はbackground-attachment プロパティでスタイルが定義されています

そんなにマーカーや左枠線にこだわっているつもりはないのですが。