• HOME
  • HTML/CSS
  • CSSプロパティを記述する際の順番のサンプル

CSSプロパティを記述する際の順番のサンプル

管理人:sofu

人によって様々な書き方があるCSSプロパティの順番。今回は参考になりそうなサンプルを紹介します。

CSSプロパティの記述順序 - かたつむりくんのWWW」で紹介されていました分かりやすくキレイにまとまったサンプルです。Mozillaの順序をベースに、W3Cの仕様書(CSS2 Specification)と「Web標準の教科」の順番をミックスしたものらしいです。

CSSプロパティの記述の順番

 
1.表示や配置など「視覚整形モデル」に関するプロパティ
 display
 list-style**
   1. list-style-type
   2. list-style-image
   3. list-style-position
   4. marker-offset(CSS2.1勧告候補では削除)
 
 position**
   1. top
   2. right
   3. bottom
   4. left
 
 float
 clear
 z-index
 
2.ボックスモデルに関するプロパティ
 width**
   1. min-width
   2. max-width
 
 height**
   1. min-height
   2. max-height
 
 line-height
 vertical-align
 overflow
 clip
 visibility
 margin**
   1. margin-top
   2. margin-right
   3. margin-bottom
   4. margin-left
 
 padding**
   1. padding-top
   2. padding-right
   3. padding-bottom
   4. padding-left
 
 border**
   1. border-width
   2. border-top-width
   3. border-right-width
   4. border-bottom-width
   5. border-left-width
   6. border-color
   7. border-top-color
   8. border-right-color
   9. border-bottom-color
  10. border-left-color
  11. border-style
  12. border-top-style
  13. border-right-style
  14. border-bottom-style
  15. border-left-style
  16. border-top
  17. border-bottom
  18. border-right
  19. border-left
 
3.背景と前景に関するプロパティ
 background**
   1. background-color
   2. background-image
   3. background-repeat
   4. background-attachment
   5. background-position
 
4.フォントとテキストに関するプロパティ
 color
 font**
   1. font-family
   2. font-style
   3. font-variant
   4. font-weight
   5. font-stretch
   6. font-size
   7. font-size-adjust(CSS2.1勧告候補では削除)
 
 text-indent
 text-decoration
 text-align
 vertical-align
 white-space
 other text**
   1. text-shadow(CSS2.1勧告候補では削除)
   2. letter-spacing
   3. word-spacing
   4. text-transform
   5. white-space
 
5.表に関するプロパティ**
 
   1. caption-side
   2. table-layout
   3. border-collapse
   4. border-spacing
   5. empty-cells
 
6.生成内容に関するプロパティ**
 
   1. content
   2. counter-increment
   3. counter-reset
   4. quotes
 
7.UIに関するプロパティ**
 
   1. outline
   2. outline-width
   3. outline-style
   4. outline-color
   5. cursor
 
8.印刷に関するプロパティ**
 
   1. size
   2. marks
   3. page-break-before
   4. page-break-after
   5. page-break-inside
   6. page
   7. orphans
   8. widows
 
9.音声に関するプロパティ**
 
   1. speak-header
   2. volume
   3. speak
   4. pause-before
   5. pause-after
   6. pause
   7. cue-before
   8. cue-after
   9. cue
  10. play-during
  11. azimuth
  12. elevation
  13. speech-rate
  14. voice-family
  15. pitch
  16. pitch-range
  17. stress
  18. richness
  19. speak-punctuation
  20. speak-numeral
 

そのまま引用させていただいたのですが、vertical-alignとwhite-spaceが重複していてます。vertical-alignは「ボックスモデルに関するプロパティ」と「フォントとテキストに関するプロパティ」、white-spaceは「フォントとテキストに関するプロパティ」に2つ載っています。個人的には、vertical-alignは「フォントとテキストに関するプロパティ」として使うことが多いので、そちらに書きます。white-spaceは滅多に使うことがないので「フォントとテキストに関するプロパティ」の最後に書いてます。

Dreamweaverで自動的にCSSプロパティの順番を並べ替える

自分で並び順のルールを作っても、急いで組んだり、ふと順番を忘れてしまいルールに則ってない書き方になることがあると思います。

組み終わった後に自動的に並べ替えてくれる機能があったらいいなと思い、ググってみたところ、Dreamweaverの拡張機能でできることが判明。すぐにその拡張機能を導入してみました。

導入方法は「CSSプロパティの記述順序 - かたつむりくんのWWW」に詳しく載っています。

まだ導入したばかりなので、あまり使ってないですが、今のところいい感じに並べ替えてくれてます。ただ、インデントを使って階層を分かりやすくしているCSSは、そのインデントが崩れてしまいます。ご注意を。

blog comments powered by Disqus

PageTop