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. 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
   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