読者です 読者をやめる 読者になる 読者になる

CSS コーディングガイドライン(暫定)

以前にも書いた事があるのですが時間も経ったので若干更新しました。古い記事。

セットフォーマット

.selector {
  property: value;
  property: value;
  property: value;
}
  • セレクタ名の後は半角スペース1つで { を入力
  • 各プロパティはインデントは半角スペース2つ
  • プロパティ名の後 : スペース無し
  • : と値の前は半角スペースを1つ
  • 値の後 ; で終了を示し } は改行
  • 色指定は小文字16進数8ビット 例:#ff3300
  • 省略プロパティは極力使わない
  • アドレスを指定する場合は url(http://example.com/)

プロパティの順序

プロパティの順序の概要
  1. ボックスモデル(Box model)
  2. ビジュアルフォーマットモデル(Visual Formatting model)
  3. ビジュアルエフェクト(Visual effects)
  4. 生成 内容 自動番号付け及びリスト(Generated content, Automatic numbering, and Lists)
  5. カラー(Colors)
  6. バックグラウンド(Backgrounds)
  7. フォント(Fonts)
  8. テキスト(Text)
  9. 表(Tables)
  10. 利用者インターフェイス(User Interface)
  11. 聴覚スタイルシート(Aural style sheets)
1. ボックスモデル(Backgrounds)
  • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • padding
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
  • border
    • border-width
    • border-color
    • border-style
    • border-top
    • border-right
    • border-bottom
    • border-left
    • border-top-width
    • border-right-width
    • border-bottom-width
    • border-left-width
    • border-top-color
    • border-right-color
    • border-bottom-color
    • border-left-color
    • border-top-style
    • border-right-style
    • border-bottom-style
    • border-left-style
2. ビジュアルフォーマットモデル(Visual Formatting model)
  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • clear
  • direction
  • unicode-bidi
  • min-width
  • width
  • max-width
  • min-height
  • height
  • max-height
  • line-height
  • vertical-align
3. ビジュアルエフェクト(Visual effects)
  • overflow
  • clip
  • visibility
4. 生成 内容 自動番号付け及びリスト(Generated content, Automatic numbering, and Lists)
  • content
  • quotes
  • counter-reset
  • counter-increment
  • marker-offset
  • list-style
    • list-style-type
    • list-style-image
    • list-style-position
5. カラー(Colors)
  • color
6. バックグラウンド(Backgrounds)
  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
7. フォント(Fonts)
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-stretch
    • font-size
    • font-size-adjust
8. テキスト(Text)
  • text-indent
  • text-align
  • text-decoration
  • text-shadow
  • letter-spacing
  • word-spacing
  • text-transform
  • white-space
9. 表(Tables)
  • caption-side
  • table-layout
  • border-collapse
  • border-spacing
  • empty-cells
  • speak-header
10. 利用者インターフェイス(User Interface)
  • cursor
  • outline
    • outline-width
    • outline-style
    • outline-color
11.聴覚スタイルシート(Aural style sheets)
  • volume
  • speak
  • pause
    • pause-before
    • pause-after
  • cue
    • cue-before
    • cue-after
  • play-during
  • azimuth
  • elevation
  • speech-rate
  • voice-family
  • pitch
    • pitch-range
  • stress
  • richness
  • speak-punctuation
  • speak-numeral