CSSプロパティの記述順序

CSSの記述順序をまとめてみました。 おおまかなところはMozillaの順序をベースにし、それにW3Cの仕様書(CSS2 Specification)と僕のバイブルである『Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト』での出現順序をミックスさせて、少し自分好みに並べ替えました。 使用頻度の低いプロパティは隠してありますので「**」のついている項目をクリックすれば表示されるよ...

CSSの記述順序をまとめてみました。

おおまかなところはMozillaの順序をベースにし、それにW3Cの仕様書(CSS2 Specification)と僕のバイブルである『Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト』での出現順序をミックスさせて、少し自分好みに並べ替えました。

使用頻度の低いプロパティは隠してありますので「**」のついている項目をクリックすれば表示されるようになっています。

ちなみにこのアコーディオンは、タブ形式で切り換えることにも対応できるように「よくある質問っぽいののjQueryを使ったサンプル」で紹介されているライブラリを使用させていただきました。

なお、qaTab.js の以下の部分の2行目と8行目に「.accord」を加えて、dt.accordだけがアコーディオンするように変えています。そうすれば、<dt>要素の次に<dd>がない場合でも大丈夫なので。

$(document).ready(function() {
	$("div.tabContainer dt.accord").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
	$("div.tabContainer dd").css("display","none");
	$("div.tabContainer dt.accord").click(function(){
		$(this).next().slideToggle("normal");
		});
});
【2008-08-27 追記】

現在、このライブラリは使用していません。したがって、「**」のついている項目も最初から表示してあります。

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. contentcounter-increment
  2. counter-reset
  3. 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
Published 2008-02-13
Updated 2019-06-25