CSS

はじめに

筆者はCSSを細かく追う時間は確保できそうにないが、時折追いかけ、ある時にはおさらいをしたい。そのため利用場面が多いと思われる箇所を本ページに残すことにした。

用語

スタイルブロック

例えば、以下をbodyスタイルブロックと呼ぶ。

1
2
3

body {
  color: #333;
}

利用事例として以下のページを挙げる。

プロパティ

例えば、以下のbodyスタイルブロックにある color はプロパティに該当する。

1
2
3

body {
  color: #333;
}

単純セレクタ

CSS セレクターの構造 - CSS: カスケーディングスタイルシート | MDNから引用する。

単純セレクターとは、単一の型セレクター、属性セレクター、擬似クラスなどの単一の成分を持つセレクターのことで、他のセレクター成分や結合子と組み合わせたり含んだりすることがないもの

複合セレクタ

CSS セレクターの構造 - CSS: カスケーディングスタイルシート | MDNから引用する。

複合セレクターは、結合子 (en-US)で区切られていない一連の単純セレクターです。

複雑セレクタ

CSS セレクターの構造 - CSS: カスケーディングスタイルシート | MDNから引用する。

複雑セレクターは、ホワイトスペースの子孫結合子を含む、結合子で区切られた 1 つ以上の単純セレクターや複合セレクターの並びです。

相対セレクタ

CSS セレクターの構造 - CSS: カスケーディングスタイルシート | MDNから引用する。

相対セレクターは、結合子で始まる 1 つ以上のアンカー要素からの相対的な要素を表すセレクターです。

基本なセレクター

CSSでHTML要素を装飾する際にはウェブブラウザにどのHTML要素を装飾するか伝える必要がある。CSSは装飾対象を指定する機能としてセレクタを提供する。

基本セレクター

要素型セレクター

以下に例を示す。

1
2
3

p {
  color: blue;
}

クラスセレクター

クラスセレクター - CSS: カスケーディングスタイルシート | MDN が詳しい。

前述のページとは異なる例を以下に示す。HTML要素に複数のクラスを設けて各クラスにCSSに同じプロパティを定義した場合、どのCSSがHTML要素に適用されるのかが気になったためだ。

次のHTMLはred, blue, yellowの順番でクラスを設けている。

1

<h1 class="red blue yellow">テキスト</h1>

それに対してCSSではクラスred, blue, yellowに対して各々 color プロパティを設けている。CSSではyellow, red, blueの順番で定義したためか、HTMLをウェブブラウザ（Safari, MS Edge）で見ると、クラスblueが優先され、文字色は青であった。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

h1.yellow {
  color: yellow;
}
h1.red {
  color: red;
}
h1.blue {
  color: blue; /* このプロパティが優先される */
}
/* EOF */

セレクターリスト

セレクターリストはカンマ区切りで連ねたセレクターを指す。例を以下に示す。

1
2
3

h1, h2, h3 {
  font-size: 100px;
}

なお、セレクターリスト内に未対応のセレクターがある場合、そのセレクターリストで定義したプロパティはすべて無効になる。例えば次のセレクターリストは h2..foo という未対応のセレクターが存在する。これにより、同セレクターリストで指定したプロパティは h1, h2 に適用されない。

1
2
3

h1, h2..foo, h3 {
  font-size: 100px;
}

回避策として擬似クラス is() もしくは has() を利用する方法がある。
詳しくは以下を参照のこと。

セレクターリスト - CSS: カスケーディングスタイルシート | MDN

結合子

子孫結合子

子孫結合子 - CSS: カスケーディングスタイルシート | MDN が詳しい。

半角スペースを区切り文字のようにしてセレクターを記述したものを子孫セレクターと呼ぶ。

1
2
3

li ul span {
  color: red;
}

例として以下のHTMLをあげる。このHTMLに対して上述のCSSを適用した場合、サブアイテム1が赤字になる。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<ul>    
    <li>
        <span>アイテム1</span>
        <ul>
            <li>
                <span>サブアイテム1</span> <!-- この構造ではこのspan要素のみ赤文字になる -->
                <ul>
                    <li>サブサブアイテム1</li>
                    <li>サブサブアイテム2</li>
                    <li>サブサブアイテム3</li>
                </ul>                
            </li>
            <li>サブアイテム2</li>
            <li>サブアイテム3</li>
        </ul>
    </li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

子結合子

子結合子 - CSS: カスケーディングスタイルシート | MDNから引用する。

子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。

特殊なセレクター

擬似クラスを取り扱う。

TODO :has()

:has() は疑似クラス関数である。

TODO 詳細度

TODO float

TODO flex

Sass - Syntactically Awsome Style Sheet

SassはCSSを拡張したメタ言語である。

SASS記法(拡張子 .sass )のほかに後発のSCSS記法(拡張子 .scss )がある。

Sassコンパイラ

環境構築

Visual Studio Codeを使う場合、以下の拡張機能が重宝する。

  • DartJS Sass Compiler

    • 本拡張機能は拡張子 .scss を保存時にCSSファイルやソースマップファイルを生成する

SCSS記法

入れ子

https://sass-lang.com/documentation/style-rules/declarations/#nesting

SCSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

CSS

1
2
3
4
5
6
7
8
9

.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.enlarge:hover {
  font-size: 36px;
}

当サイトでは利便性向上のために外部サービスにクッキー(Cookie)を送信します。
詳しくはプライバシーポリシーをご参照ください。