CSS (Cascading Style Sheets)

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

目次

1. 書き方
   1. <style>
   2. <link>
   3. style属性
2. プロパティ
   1. 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. border
      9. border-width
      10. border-style
      11. border-color
      12. border-radius
      13. border-collapse
      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-spacing
      27. border-top
      28. border-top-width
      29. border-top-style
      30. border-top-color
   2. 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
   3. CSS Flexible Box Layout Module
      1. flex
      2. flex-direction
   4. CSS Masking Module
      1. mask-image
      2. mask-mode
      3. mask-repeat
      4. mask-position
      5. mask-clip
      6. mask-origin
      7. mask-size
      8. mask-composite
      9. mask
      10. mask-border-source
      11. mask-border-mode
      12. mask-border-slice
      13. mask-border-width
      14. mask-border-outset
      15. mask-border-repeat
      16. mask-border
   5. 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
   6. 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
   7. 非標準のプロパティ
      1. -moz-appearance
      2. -webkit-appearance
      3. -webkit-touch-callout
3. /* comment */
4. セレクタ
   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
5. 擬似要素
   1. ::after
   2. ::before
   3. ::first-letter
   4. ::first-line
   5. ::-moz-progress-bar
   6. ::-webkit-progress-bar
   7. ::-webkit-progress-value
6. 疑似クラス
   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
7. ルール
   1. @charset
   2. @font-face
   3. @import
   4. @media
   5. @page
   6. @page:first
   7. @page:right
   8. @page:left
8. 変数
   1. var
9. フレームワーク
   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
10. 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