====================================================================== === SimpleBoxes CSS coding guideline ================================= ====================================================================== Written by Takuya Otani / 01 Jun 2007 Copyright (C) 2007 SimpleBoxes/SerendipityNZ All rights reserved. [改版履歴] * ver 0.00 [2007/06/01] 初版 [要旨] この文書は Takuya Otani@SimpleBoxes が作成する CSS のコーディングスタ イルを定めるものとする [ライセンス] この文書は「クリエティブ・コモンズ・ライセンス 表示 3.0」に従う。 http://creativecommons.org/licenses/by/3.0/ [コメントの記述] - "/*" ならびに "*/" をコメントとして利用する。 - "/* [" ならびに "] */" で囲まれたコメントはグループセパレータとして 利用する。 [ガイドラインの指定] 適用しているガイドラインを明示する。 [グループ] グループとしては以下のようなものがあり、基本的に以下の順で出現する。 * defaults 標準スタイルのリセットならびに再定義。基本的な設定は共通とする。 * layout 大まかなレイアウトを定義する。 * (specific block elemenrs) 特定ブロック要素についてそれぞれ定義する。グループ名は定義するブロッ クに依存する。 * (specific inline elements) 特定インライン要素についてそれぞれ定義する。グループ名は定義する範囲 に依存する。 インライン要素の定義は数が多い場合に限り、グループ化する。少ない場合 は、上記ブロック内の指定に含めてしまってよい。 * fonts font-family プロパティは必要ならば、別途指定する。 * colors color ならびに background-color プロパティを指定する。 * borders border プロパティを指定する。 * images background や list-style-image プロパティを指定する。 * (additioanal styles) 必要ならば、特定の用途に利用するスタイルを追加する。グループ名は用途 に依存する。 [文字数・インデント] * 文字数 一行の文字数の規定は特に設けない。 * タブ インデントとして、タブを利用する。タブ幅は編集者が自由に決定できる。 タブは純粋なインデントとしてのみ利用し、桁揃えにはスペースを利用す る。 [セレクタ] * セレクタの記述 セレクタはインデントなしで記述する。 * セレクタの列挙 セレクタが列挙される場合、末尾に "," を記載し、改行を置く。 最後のセレクタの後には、スペース→ブラケットを記述する。 * ブレースの記述 "{" ならびに "}" の後には改行をいれる。 "}" は基本的に単独で出現する。 好みに応じてインデントしてもよいが、同一文書内では統一すること。 * 記述例 selector { property: value; } selector1, selector2 { property: value; } * 記述例 (ブレースインデント) selector { property: value; } selector1, selector2 { property: value; } [プロパティ] * プロパティの記述 各プロパティはインデントされる。 プロパティ名の後には、必ずコロンを置く。スペースなどは挟まない。 * セミコロン 各プロパティ値の終わりに必ず ";" を置く。 * プロパティの順序 プロパティは一部の例外を除き、CSS2 Specification で出現する順に準拠 する。 1. content - *0 2. margin-top 3. margin-right 4. margin-bottom 5. margin-left 6. margin 7. padding-top 8. padding-right 9. padding-bottom 10. padding-left 11. padding 12. (border-top-width) - *3 13. (border-right-width) - *3 14. (border-bottom-width) - *3 15. (border-left-width) - *3 16. (border-width) - *3 17. (border-top-color) - *3 18. (border-right-color) - *3 19. (border-bottom-color) - *3 20. (border-left-color) - *3 21. (border-color) - *3 22. (border-top-style) - *3 23. (border-right-style) - *3 24. (border-bottom-style) - *3 25. (border-left-style) - *3 26. (border-style) - *3 27. (border-top) - *3 28. (border-bottom) - *3 29. (border-right) - *3 30. (border-left) - *3 31. (border) - *3 32. display 33. position 34. top 35. right 36. bottom 37. left 38. float 39. clear 40. z-index 41. direction 42. unicode-bidi 43. width 44. min-width 45. max-width 46. height 47. min-height 48. max-height 49. line-height 50. vertical-align 51. overflow 52. clip 53. visibility 54. compact 55. run-in 56. quotes 57. marker-offset 58. list-style-type 59. (list-style-image) - *4 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) - *2 71. (background-color) - *2 72. (background-image) - *4 73. (background-repeat) - *4 74. (background-attachment) - *4 75. (background-position) - *4 76. (background) - *4 77. (font-family) - *1 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 117. ブラウザ独自プロパティ (アルファベット順) *0 content 設定する必要がある場合は、最初に記述する。 *1 font-family fonts グループで設定する。 *2 color ならびに background-color colors グループで設定する。 *3 border-* ないし border borders グループで設定する。 *4 list-style-image, background-* (background-color 除く) images グループで設定する。 [特記事項] * 文字コード指定 @charset 宣言は、必要ならば文書の最初に行う。 内部で ASCII しか利用しない場合、省略可能とする。 * line-height の記述 単位は付けない。 [参考文献] - http://www.w3.org/TR/REC-CSS2/ - http://hail2u.net/blog/webdesign/css2-property-order.html [サンプルスタイル] @charset "UTF-8"; /* style.css */ /* == written by Takuya Otani === */ /* == Copyright (C) 2004 SimpleBoxes/SerendipityNZ Ltd. == */ /* guideline : http://serennz.sakura.ne.jp/guidelines/css_ja_000.txt */ /* [defaults] */ * { margin: 0px; padding: 0px; } h1, h2, h3, h4, h5, h6 { margin: 1em 0px; font-style: normal; font-weight: bold; font-size: 110%; } p, dl, ul, ol, blockquote, form, pre { margin: 1em 0px; font-style: normal; font-weight: normal; } th, dt { font-style: normal; font-weight: bold; } blockquote { margin: 1em 2em; } p { line-height: 1.4; } strong, em { font-style: normal; font-weight: bold; } a { text-decoration: underline; } q { quotes: none; font-style: normal; } /* [layout] */ body { margin: 0px; padding: 0px; } /* [specific_block] */ /* use this group if necessary */ /* [specific_inline] */ /* use this group if necessary */ /* [fonts] */ h1, h2, h3, h4, h5, h6 { font-family: sans-serif; } pre, code, kbd { font-family: "Courier New",monospace; } /* [colors] */ body { color: #333; background-color: #fff; } a:link { color: #66b; } a:active { color: #55c; } a:visited { color: #96c; } a:hover { color: #e50; } /* [borders] */ img { border: 0px none #000; } /* [background-images] */ body { background-image: url(sample.jpg); background-repeat: repeat; background-position: 0% 0%; }