- Last Modified: 2008年11月24日 16:31
このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。
また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 （ ZIP アーカイブには解説文は含まれていません。）
解説
CSS ファイルの先頭部分にコメントとして一定のガイドラインを書いておいて、いつでも見返すことができるようにするというのも、意外に効果のあるテクニックです。 たとえば、宣言の記述順を書いておくとか、要素型セレクタの記述順を書いておくとか、あるいはサイト内の (X)HTML 文書のツリー構造が共通しているような場合はその構造を書いておくといったことでもよいでしょう。
CSS ファイルの作成ルールや (X)HTML 文書の構造だけでなく、よく使用する配色のスキームを書いておくというのも効果的です。 配色というのは、色相・明度・彩度によってバランスの取れたものが決まるため、好き勝手に指定するよりはいくつかのパターンを持っておくほうがよいからです。
たとえば、筆者が使っている CSS の先頭部分を抜き出すと、次のようなガイドラインが先頭に登場しています（一部本書用に記述を変更しています）。
CSS
@charset "UTF-8";
/*=================================================================
Author and Copyright
Author: LH3 Studio (http://lh3.jp/)
Created: 2007-01-09
Modified: 2007-01-10
Licence: Creative Commons Attribution-ShareAlike 3.0 Unported (http://creativecommons.org/licenses/by-sa/3.0/deed.ja)
=================================================================*/
/*=================================================================
Properties
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
5. margin
6. padding-top
7. padding-right
8. padding-bottom
9. padding-left
10. padding
11. border-top-width
12. border-right-width
13. border-bottom-width
14. border-left-width
15. border-width
16. border-top-color
17. border-right-color
18. border-bottom-color
19. border-left-color
20. border-color
21. border-top-style
22. border-right-style
23. border-bottom-style
24. border-left-style
25. border-style
26. border-top
27. border-bottom
28. border-right
29. border-left
30. border
31. display
32. position
33. top
34. right
35. bottom
36. left
37. float
38. clear
39. z-index
40. direction
41. unicode-bidi
42. width
43. min-width
44. max-width
45. height
46. min-height
47. max-height
48. line-height
49. vertical-align
50. overflow
51. clip
52. visibility
53. content
54. compact
55. run-in
56. quotes
57. marker-offset
58. list-style-type
59. list-style-image
60. list-style-position
61. list-style
62. size
63. marks
64. page-break-before
65. page-break-after
66. page-break-inside
67. page
68. orphans
69. widows
70. color
71. background-color
72. background-image
73. background-repeat
74. background-attachment
75. background-position
76. background
77. font-family
78. font-style
79. font-variant
80. font-weight
81. font-stretch
82. font-size
83. font-size-adjust
84. font
85. text-indent
86. text-align
87. text-decoration
88. text-shadow
89. letter-spacing
90. word-spacing
91. text-transform
92. white-space
93. table-layout
94. empty-cells
95. speak-header
96. cursor
97. outline
98. volume
99. speak
100. pause-before
101. pause-after
102. pause
103. cue-before
104. cue-after
105. cue
106. play-during
107. azimuth
108. elevation
109. speech-rate
110. voice-family
111. pitch
112. pitch-range
113. stress
114. richness
115. speak-punctuation
116. speak-numeral
=================================================================*/
/*=================================================================
Selectors
Universal selector
Core Modules
- Structure Module
- Text Module
- Hypertext Module
- List Module
Applet Module
Text Extension Modules
- Presentation Module
- Edit Module
- Bi-directional Text Module
Forms Modules
- Basic Forms Module
- Forms Module
Table Modules
- Basic Tables Module
- Tables Module
Image Module
Client-side Image Map Module
Server-side Image Map Module
Object Module
Frames Module
Target Module
Iframe Module
Intrinsic Events Module
Metainformation Module
Scripting Module
Style Sheet Module
Style Attribute Module
Link Module
Base Module
Name Identification Module
Legacy Module
=================================================================*/
/*=================================================================
Color Scheme
MainColor => honeydew3 = #c1cdc1 = rgb(193, 205, 193) = rgb(76%, 80%, 76%)
SubColor => honeydew4 = #838b83 = rgb(131, 139, 131) = rgb(51%, 55%, 51%)
BalanceColor => honeydew = #f0fff0 = rgb(240, 255, 240) = rgb(94%, 100%, 94%)
=================================================================*/
/*=================================================================
Universal selector
=================================================================*/
* {
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 100%;
font-family: "Times New Roman" , Verdana , sans-serif;
}
/*=================================================================
Structure Module
=================================================================*/
body { /* 以下省略*/
