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. empty-cells
  2. table-layout
  3. 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-collapse
  15. border-bottom
  16. border-bottom-width
  17. border-bottom-style
  18. border-bottom-color
  19. border-left
  20. border-left-width
  21. border-left-style
  22. border-left-color
  23. border-right
  24. border-right-width
  25. border-right-style
  26. border-right-color
  27. border-spacing
  28. border-top
  29. border-top-width
  30. border-top-style
  31. border-top-color
  32. 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 Fragmentation Module
  1. break-after
10. CSS Flexible Box Layout Module
  1. flex
  2. flex-direction
11. CSS Fonts Module
  1. font
  2. font-family
  3. font-size
  4. font-style
  5. font-variant
  6. font-weight
12. CSS Generated Content Module
  1. content
13. CSS Grid Layout Module
  1. layout-grid
  2. layout-grid-char
  3. layout-grid-line
  4. layout-grid-mode
  5. layout-grid-type
14. CSS Inline Layout Module
  1. line-height
  2. vertical-align
15. CSS Lists and Counters Module
  1. list-style
16. CSS Logical Properties and Values
  1. clear
  2. float
  3. caption-side
17. 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
18. CSS Overflow Module
  1. text-overflow
19. CSS Positioned Layout Module
  1. top
  2. right
  3. bottom
  4. left
  5. position
20. CSS Ruby Annotation Layout Module
  1. ruby-align
  2. ruby-overhang
  3. ruby-position
21. CSS Text Module
  1. text-transform
  2. white-space
  3. tab-size
  4. word-break
  5. line-break
  6. hyphens
  7. overflow-wrap
  8. word-wrap
  9. text-align
  10. text-align-all
  11. text-align-last
  12. text-justify
  13. word-spacing
  14. letter-spacing
  15. text-indent
  16. hanging-punctuation
22. 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
23. CSS Writing Modes
  1. writing-mode
  2. direction
  3. unicode-bidi
24. Filter Effects Module
  1. filter
  2. flood-color
  3. flood-opacity
  4. lighting-color
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);
}

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

参考文献

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

CSS (Cascading Style Sheets)

目次

style属性

コメント

変数

参考文献