Skip to main content

CSS

mdn web doc CSSリファレンス
Webの教科書

Overview​

CSSに関する情報をまとめたセクション。

CSSを本当に理解するには​

参考URL

CSSを理解するには、レイアウトアルゴリズムがどのように機能するかを理解する必要がある。
そのためプロパティを知るだけでは不十分。

CSS 仕組み​

参考URL

CSSの学習はz-index: 10;やjustify-content: center;のようなプロパティと値に着目していました。それぞれのプロパティが何をするのかを理解すれば、CSS全体を深く理解できると考えていたがそれは違う そこで気づいたのは、CSSは単なるプロパティの集合体ではないということです。CSSは相互に接続されたレイアウトアルゴリズムの集合体なのです。それぞれのアルゴリズムは、独自のルールとメカニズムを持つ複雑なシステムです。 ?特定のプロパティが何をするのかを学ぶだけは十分ではありません。レイアウトアルゴリズムがどのように機能するか、プロパティをどのように使用するかを学ぶ必要があります。

CSSは宣言型プログラミング言語だが、近年JavaScriptのような命令型の要素も増えてきている。

カスケーディング(Cascading)​

CSSは「カスケーディングスタイルシート」とも呼ばれ、スタイルは特定のルールに基づいて「カスケード」（流れ落ちる）されます。
これにより、親要素に適用されたスタイルが子要素にも影響を与えることがあります。

CSSの条件分岐​

参考URL

命令型要素について。

  • 属性セレクターで対応する方法
[data-attr='true'] {
    /* if */
}
[data-attr='false'] {
    /* elseif */
}
:not([data-attr]) {
    /* else */
}
  • 擬似クラス
:checked {
    /* if */
}
:not(:checked) {
    /* else */
}
  • メディアクエリ
:root {
    color: red;
}
@media (min-width > 600px) {
    :root {
        color: blue;
    }
}

HEX形式​

参考URL

HEX形式はプログラムイメージ（コードとデータを表すの16進数列）をテキストで表現したもの
最後の2桁は透過部分。

/* HEX6桁 */
.class {
  color: #e0e0e0;
}
/* HEX8桁 最後は透過 */
.class2 {
  color: #E0E0E0E0;
}

cssで動的に値を変更する方法 var()​

参考URL 基本、webなどでCSSを動的に使用するにはJSなどを使用する方法が多いが、 CSSでも変数が使用できるためそちらも検討できる。

var() 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。(使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。)

CSS変数とプリプロセッサー変数の違い​

Webサイトのスタイリングで変数の持つ柔軟性を利用する方法は、SassやLessといったプリプロセッサーの活用。

前提 : 実行環境がブラウザだよ CSS変数 : ブラウザで実行できる動的なCSSプロパティ プリプロセッサ(scssなど) : プリプロセッサーの変数はCSSコードにコンパイルされるためブラウザーは関与しない。

スタイルシートドキュメント内のCSS変数は、インラインスタイル属性やSVGのプレゼンテーション属性で変更したり、JavaScriptで選択、操作したりできるのです。可能性が無限に広がります。プリプロセッサーの変数では実現できません。

アットルール​

リファレンス

アットルールはCSS文のうち、CSSの動作を既定するもの。

疑似クラス​

:root

CSS の :root 疑似クラスは、文書を表すツリーのルート要素を選択します。 HTML_ では、 :root は <html> 要素を表し、詳細度が高いことを除けば html セレクターと同等です。 詳細度は:rootのほうが高い。

メディアクエリとコンテナークエリ​

参考URL

スタッキングコンテキスト​

参考URL

mix-blend-mode の実装で理解した（要はweb pageでのz軸）。

CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められている。
スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言う。
z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちのひとつ。

Tags:
Last updated on