CSS (Cascading Style Sheets)

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

Table of Contents

  1. 1 書き方
    1. 1.1 <style>
    2. 1.2 <link>
    3. 1.3 style属性
  3. 2 プロパティ
    1. Text Decoration
      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
    3. 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
    5. 非標準のプロパティ
      1. -moz-appearance
      2. -webkit-appearance
      3. -webkit-touch-callout
  5. 3 コメント
    1. 3.1 /* comment */
  7. 4 セレクタ
    1. 4.1 *
    2. 4.2 e
    3. 4.3 e, e
    4. 4.4 e e
    5. 4.5 e > e
    6. 4.6 e + e
    7. 4.7 e[a]
    8. 4.8 e[a="v"]
    9. 4.9 e[a~="v"]
    10. 4.10 e[a|="v"]
    11. 4.11 .class
    12. 4.12 #id
  9. 5 擬似要素
    1. 5.1 ::after
    2. 5.2 ::before
    3. 5.3 ::first-letter
    4. 5.4 ::first-line
    5. 5.5 ::-moz-progress-bar
    6. 5.6 ::-webkit-progress-bar
    7. 5.7 ::-webkit-progress-value
  11. 6 疑似クラス
    1. 6.1 a:active
    2. 6.2 a:hover
    3. 6.3 a:visited
    4. 6.4 :first-child
    5. 6.5 :empty
    6. 6.6 :focus
    7. 6.7 :lang()
    8. 6.8 :last-child
    9. 6.9 :link
    10. 6.10 :not()
    11. 6.11 :nth-of-type()
    12. 6.12 :root
  13. 7 ルール
    1. 7.1 @charset
    2. 7.2 @font-face
    3. 7.3 @import
    4. 7.4 @media
    5. 7.5 @page
    6. 7.6 @page:first
    7. 7.7 @page:right
    8. 7.8 @page:left
  15. 8 変数
    1. 8.1 var
  17. 9 フレームワーク
    1. 9.1 Bootstrap
    2. 9.2 Bulma
    3. 9.3 Materialize
    4. 9.4 Milligram
    5. 9.5 Primer CSS
    6. 9.6 Pure.css
    7. 9.7 Semantic UI
    8. 9.8 Skeleton
    9. 9.9 Spectre.css
    10. 9.10 Tachyons
    11. 9.11 Tailwind CSS
    12. 9.12 UIkit
    13. 9.13 Zurb Foundation
  19. 10 CSS Validation Service
    1. 10.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