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-left
  19. border-left-width
  20. border-left-style
  21. border-left-color
  22. border-right
  23. border-right-width
  24. border-right-style
  25. border-right-color
  26. border-top
  27. border-top-width
  28. border-top-style
  29. border-top-color
  30. 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-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
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);
}

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

参考文献

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

CSS (Cascading Style Sheets)

目次

style属性

コメント

変数

参考文献