コンテンツにスキップ
Astro Astro

概要ページにスタイルを設定する

あなたに関するコンテンツをもつ概要ページができたので、スタイルを追加しましょう！

ここで学ぶことは…

  • 特定のページの要素にスタイルを設定する
  • CSS変数を使う

個別のページにスタイルを適用する

Astroの<style></style>タグを使うと、ページの要素にスタイルを適用できます。このタグに属性とディレクティブを追加すると、より多くの方法でスタイルを設定できます。

  1. 以下のコードをコピーして、src/pages/about.astroに貼り付けます。

    src/pages/about.astro
    <html lang="ja">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head>

    ブラウザのプレビューで3つのページを確認します。

    • ページのタイトルの色は何ですか？

      • ホームページは
      • 概要ページは
      • ブログページは

    • タイトルテキストが最も大きいページはどれですか？

  2. 概要ページに生成される<li>要素にクラス名skillを追加して、スタイルを適用できるようにします。コードは以下のようになります。

    src/pages/about.astro
    <p>私のスキルは以下の通りです。</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>

  3. 既存のスタイルタグに以下のコードを追加します。

    src/pages/about.astro
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>

  4. ブラウザで概要ページを再度開き、スキルのリストの各項目が緑色で太字になっていることを目視で確認、あるいは開発者ツールで確認します。

初めてのCSS変数

Astroの<style>タグでは、define:vars={ {...} }ディレクティブを使用して、フロントマタースクリプトの変数を参照することもできます。コードフェンス内で変数を定義し、スタイルタグ内でCSS変数として使用できます。

  1. src/pages/about.astroのフロントマタースクリプトに、以下のようにskillColor変数を定義します。

    src/pages/about.astro
    ---
    const pageTitle = "私について";
    

    const identity = {
      firstName: "サラ",
      country: "カナダ",
      occupation: "技術ライター",
      hobbies: ["写真", "バードウォッチング", "野球"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];
    

    const happy = true;
    const finished = false;
    const goal = 3;
    

    const skillColor = "navy";
    ---

  2. 既存の<style>タグを以下のように更新して、skillColor変数をまず定義し、続いて二重波括弧内で使用します。

    src/pages/about.astro
    <style define:vars={{skillColor}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>

  3. ブラウザのプレビューで概要ページを確認します。define:varsディレクティブに渡されたskillColor変数によって、スキルがネイビーブルーになっているはずです。

やってみよう - CSS変数を定義する

  1. 概要ページの<style>タグを以下のように更新します。

    src/pages/about.astro
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>

  2. 概要ページのスキルリストにこれらのスタイルが適用されるように、不足している変数定義をフロントマタースクリプトに追加しましょう。

    • テキストの色はネイビーブルーとします
    • テキストは太字とします
    • リスト項目はすべて大文字とします
✅ コードを表示 ✅
src/pages/about.astro
---
const pageTitle = "私について";


const identity = {
  firstName: "サラ",
  country: "カナダ",
  occupation: "技術ライター",
  hobbies: ["写真", "バードウォッチング", "野球"],
};


const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];


const happy = true;
const finished = false;
const goal = 3;


const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

チェックリスト

Resources