はじめに

HTMLとCSS(Scss)の用語メモ

:root

:rootセレクタはルート要素にcssを適用するためのセレクタ。
ルート要素は最上位階層の要素のことで、通常のhtmlファイルだとhtmlタグに当たる[1]。

公式では「カスケード変数のためのCSSカスタムプロパティ」と呼ばれている[2]。
例えば

.html{
   --my-color: #ffffff;
}
.test{
   color: var(--my-color);
}

とするとtext要素の文字が白くなる。これは定義した要素とその小要素全てに使える。

コードを書いて画像を描画することができるタグ詳しくは[3]へ。

box-sizingとは最新のCSS規格「CSS3」から追加されたプロパティ。
「要素の幅（width）と高さ（height）の中にpaddingとborderを含めるかどうか」という設定ができる[4]。

// 初期値paddingとborderを含めない
box-sizing: content-box; 
// paddingとborderを含める
box-sizing: border-box; 
// 親要素のborder-boxの値を引き継ぐ
box-sizing: inherit;

プロパティ名の前に書く「-webkit-」「-moz-」「-o-」「-ms-」などの文字のこと。
これを書くことで古いブラウザにCSS3のプロパティを対応させることができる[4][5]。
-webkit-ならchromeとsafariなどに対応する。


-webkit-box-sizing: border-box;

使用すうる時は上のようにプロパティの前につける。

フォントのアンチエイリアスを調節するプロパティ[6]。
新しいプロパティなのでベンダープレフィックスがついていることが多い。

//ぎざぎざ
-webkit-font-smoothing: none;
//滑らか
-webkit-font-smoothing: antialiased;
// 初期値
-webkit-font-smoothing: subpixel-antialiased;