Home > P.077

P.077

  • 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 { /* 以下省略*/

Download

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/33
Listed below are links to weblogs that reference
P.077 from lh3.jp

Home > P.077

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top