CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets)とは、文書の構造(HTML)と体裁(CSS)を分離して定義するスタイルシートで、World Wide Web Consortium (W3C)が勧告しています。CSSの書き方をご紹介します。

書き方
プロパティ
1. Compositing and Blending
  1. isolation
  2. mix-blend-mode
2. CSS Level 2
  1. border-collapse
  2. border-spacing
  3. caption-side
  4. empty-cells
  5. table-layout
  6. z-index
3. CSS Backgrounds and Borders Module
  1. background
  2. background-attachment
  3. background-blend-mode
  4. background-color
  5. background-image
  6. background-position
  7. background-repeat
  8. background-size
  9. border
  10. border-width
  11. border-style
  12. border-color
  13. border-radius
  14. border-bottom
  15. border-bottom-width
  16. border-bottom-style
  17. border-bottom-color
  18. border-bottom-left-radius
  19. border-bottom-right-radius
  20. border-left
  21. border-left-width
  22. border-left-style
  23. border-left-color
  24. border-right
  25. border-right-width
  26. border-right-style
  27. border-right-color
  28. border-top
  29. border-top-width
  30. border-top-style
  31. border-top-color
  32. border-top-left-radius
  33. border-top-right-radius
  34. box-shadow
4. CSS Basic User Interface Module
  1. outline
  2. outline-color
  3. outline-offset
  4. outline-style
  5. outline-width
  6. cursor
  7. caret-color
  8. resize
  9. user-select
5. CSS Box Model Module
  1. margin
  2. margin-bottom
  3. margin-left
  4. margin-right
  5. margin-top
  6. padding
  7. padding-bottom
  8. padding-left
  9. padding-right
  10. padding-top
  11. overflow
6. CSS Box Sizing Module
  1. height
  2. width
  3. max-height
  4. max-width
  5. min-height
  6. min-width
  7. box-sizing
7. CSS Color Module Level
  1. color
  2. opacity
8. CSS Display Module
  1. display
  2. visibility
9. CSS Filter Effects Module
  1. filter
  2. flood-color
  3. flood-opacity
  4. lighting-color
10. CSS Flexible Box Layout Module
  1. flex
  2. flex-direction
  3. flex-wrap
11. CSS Fragmentation Module
  1. break-after
  2. break-before
  3. break-inside
  4. page-break-after
  5. page-break-before
  6. page-break-inside
12. CSS Fonts Module
  1. font
  2. font-family
  3. font-size
  4. font-style
  5. font-variant
  6. font-weight
13. CSS Generated Content Module
  1. content
14. CSS Grid Layout Module
  1. layout-grid
  2. layout-grid-char
  3. layout-grid-line
  4. layout-grid-mode
  5. layout-grid-type
15. CSS Inline Layout Module
  1. line-height
  2. vertical-align
16. CSS Lists and Counters Module
  1. list-style
17. CSS Logical Properties and Values
  1. clear
  2. float
18. CSS Masking Module
  1. clip-path
  2. clip-rule
  3. mask-image
  4. mask-mode
  5. mask-repeat
  6. mask-position
  7. mask-clip
  8. mask-origin
  9. mask-size
  10. mask-composite
  11. mask
  12. mask-border-source
  13. mask-border-mode
  14. mask-border-slice
  15. mask-border-width
  16. mask-border-outset
  17. mask-border-repeat
  18. mask-border
19. CSS Overflow Module
  1. text-overflow
20. CSS Positioned Layout Module
  1. top
  2. right
  3. bottom
  4. left
  5. position
21. CSS Ruby Annotation Layout Module
  1. ruby-align
  2. ruby-overhang
  3. ruby-position
22. CSS Text Module
  1. text-autospace
  2. text-transform
  3. white-space
  4. tab-size
  5. word-break
  6. line-break
  7. hyphens
  8. overflow-wrap
  9. word-wrap
  10. text-align
  11. text-align-all
  12. text-align-last
  13. text-justify
  14. word-spacing
  15. letter-spacing
  16. text-indent
  17. hanging-punctuation
23. CSS Text Decoration Module
  1. text-decoration
  2. text-decoration-color
  3. text-decoration-line
  4. text-decoration-style
  5. text-emphasis
  6. text-emphasis-color
  7. text-emphasis-position
  8. text-emphasis-style
  9. text-underline-position
  10. text-shadow
24. CSS Writing Modes
  1. writing-mode
  2. direction
  3. unicode-bidi
25. 非標準のプロパティ
  1. -moz-appearance
  2. -webkit-appearance
  3. -webkit-touch-callout
/* comment */
セレクタ
1. *
2. e
3. e, e
4. e e
5. e > e
6. e + e
7. e[a]
8. e[a="v"]
9. e[a~="v"]
10. e[a|="v"]
11. .class
12. #id
擬似要素
疑似クラス
1. a:active
2. a:hover
3. a:visited
4. :first-child
5. :empty
6. :focus
7. :lang()
8. :last-child
9. :link
10. :not()
11. :nth-of-type()
12. :root
ルール
1. @charset
2. @font-face
3. @import
4. @media
5. @page
6. @page:first
7. @page:right
8. @page:left
変数
1. var
フレームワーク
1. Bootstrap
2. Bulma
3. Materialize
4. Milligram
5. Primer CSS
6. Pure.css
7. Semantic UI
8. Skeleton
9. Spectre.css
10. Tachyons
11. Tailwind CSS
12. UIkit
13. Zurb Foundation
CSS Validation Service
1. W3C CSS 検証サービス

style属性

HTMLタグのstyle属性にCSSプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。

<h2 style="font-size:large; color:red;">スタイルシート</h2>

/* と */ に囲まれた部分はコメント（注釈）となる。コメントは複数行にわたってもよい。ただし、入れ子（ネスト）にすることはできない。

他の言語にあるような // や # といった単一行コメントは、CSSには無い。

h1 {
  /* 背景は赤色 */
  background-color: red;
}

変数

CSSでは変数を使うことができます。

CSS変数にはスコープ（有効範囲）があり、CSS変数を定義したCSSセレクタ内でのみ有効です。

div.primary {
  /* 変数の宣言 */
  --color-primary: blue;
  /* 変数の参照 */
  color: var(--color-primary);
}

ただし、:root 疑似クラス内で定義したCSS変数はグローバルとなり、どこからでも参照することができます。

:root {
  /* 変数の宣言 */
  --color-primary: blue;
}
div.primary {
  color: var(--color-primary);
}
span.primary {
  color: var(--color-primary);
}

変数の宣言で値を変えれば、変数を参照しているすべての箇所をいっぺんに変更することができます。

text-autospace

normal

CJK文字と非CJK文字の間、および句読点の周囲に自動的に間隔を適用する既定の動作を行う。この値は、ideograph-alphaとideograph-numericの両方を適用した場合と同じ効果を持つ。

no-autospace

CJK文字と非CJK文字の間を自動的に空ける動作を無効にする。

ideograph-alpha

漢字やカタカナなどの表意文字と、ラテン文字などの非表意文字の間にのみ、間隔を追加する。表意文字と非表意文字の数値の間には、間隔を追加しない。

ideograph-numeric

漢字やカタカナなどの表意文字と、ラテン文字などの非表意数値の間にのみ間隔を追加する。表意文字と非表意文字の間の間隔は追加しない。

参考文献

World Wide Web Consortium (2021) CSS Backgrounds and Borders Module Level 3