css 基礎文法

キーワード

• cssにて予め定義済みのキーワードは引用符なしで使用.

div {
   color: red;
   display: flex;
}

文字列

• 'または"で囲む.

h2::before {
   content: "Title";
}

数値

• そのまま記述.

URL

• url()を使用することでURLを指定することが可能.

div {
   background-image: url("https://example.com/assets/img/team-dev.png");
}

pxとemについて

• pxは絶対値.
• emは相対値.
  • 親要素に対する文字の大きさを基準として、要素の文字の大きさを比率で決定するもの
• font-sizeにおけるem単位は、親要素のfont-sizeに対する相対値として定義される.
• font-size以外のプロパティのem単位は、現在の要素のfont-sizeに対する相対値として定義される.
  • 例: 親要素のfont-size: 16px → 子要素のfont-size: 0.5emの場合、個要素は8pxとなる.
• 親要素にfont-sizeが設定されていない場合は、根ノードを探索しに行き、そこにも設定がない場合はブラウザデフォルト値の16pxが設定される.

rem

• remは、根ノードのプロパティ値を基準とした相対値として定義される.
• html で設定したフォントサイズを基準として、要素の文字の大きさを比率で決定するもの

%

• 他の値を基準とした値. 親要素を基準とした相対値として使用されることが多い.
• 親要素に対して、子要素が何％を占めるかを指定するもの

vh / vw

• ビューポートの高さ/横幅を基準として相対値を指定.
• 1vhは高さを1/100した値になる.
  • 例: 720px → 7.2px(1vh).
  • 例: 720px → 7.2px(1vw).

calc

• 数学的に計算したい場合.

.blue-box {
   width: 25vw;
   height: 25vh;
   background-color: blue;
}

.red-box {
   width: calc(25vw - 10px);
   height: calc(25vh - 10px);
   background-color: red;
}