株式会社Anthea エンジニア研修

Appearance

CSS変数の理解 ​

知識課題 ​

知識課題１ ​

  • CSS変数の定義方法と使用方法について、基本構文を示しながら説明してください。
  • CSS変数を実務で活用することで得られるメリットについて考察してください。

知識課題2 ​

  • CSS変数におけるグローバルスコープとローカルスコープの違いについて説明してください
  • グローバルスコープを利用する際の主なメリットを挙げ、それがどのような場面で有用かを説明してください。
  • グローバルスコープを使用する場合における実装上の注意点や課題についても、具体例を挙げて説明してください。
  • CSS変数のオーバーライドについて、実装時の注意点を含めて説明してください。

知識課題3 ​

  • CSS変数を@propertyで登録・活用する方法について、以下の要素を含むコード例とともに説明してください。
    • 構文
    • 型定義
    • 初期値の設定
  • @propertyが特に効果を発揮するケースとそのメリットを具体的に教えてください。

実践課題 ​

以下のサンプルコードを使用して、CSS変数が適用される仕組みを理解してください。コードをブラウザで実行し、各要素が適切にスタイルされることを確認しましょう。

手順 ​

  1. 以下のサンプルコードをコピーして、それぞれindex.htmlとstyles.cssとして保存してください。

    html
    <!DOCTYPE html>
<html lang="ja">
<head>
  <title>CSS変数の確認</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="box">これは青色の文字です</div>
  <div class="box red">これは赤色の文字です</div>
</body>
</html>
    css
    :root {
  --text-color: blue;
}

.box {
  margin: 20px;
  color: var(--text-color);
}

.red {
  --text-color: red;
}

  2. ブラウザでindex.htmlを開き、以下の点を確認してください：

    • 1つ目のdivの文字色が青色になっているか
    • 2つ目のdivの文字色が赤色になっているか
    • それぞれの色がCSS変数によって制御されているか

確認ポイント ​

  • :rootで定義したCSS変数がグローバルスコープとして機能しているか。
  • .redクラス内で再定義したCSS変数が、そのスコープ内で優先して適用されているか。