コンテンツにスキップ

サイト全体にスタイルを追加する

概要ページにスタイルを適用できたので、サイトの残りの部分にグローバルスタイルを追加しましょう!

ここで学ぶことは…

  • スタイルをグローバルに適用する

グローバルスタイルシートを追加する

Astroの<style>タグはデフォルトでスコープされることを確認しました。つまり、そのファイル内の要素にのみ影響します。

Astroでは、スタイルをグローバルに定義する方法がいくつかありますが、このチュートリアルではglobal.cssファイルを作成して各ページにインポートします。スタイルシートと<style>タグの組み合わせにより、サイト全体のスタイルを制御したり、特定のスタイルをピンポイントに適用したりできます。

  1. src/styles/global.cssに新しいファイルを作成します(まずstylesフォルダを作成する必要があります)。

  2. 以下のコードを新しいファイルglobal.cssにコピーします。

    src/styles/global.css
    html {
    background-color: #f1f5f9;
    font-family: sans-serif;
    }
    body {
    margin: 0 auto;
    width: 100%;
    max-width: 80ch;
    padding: 1rem;
    line-height: 1.5;
    }
    * {
    box-sizing: border-box;
    }
    h1 {
    margin: 1rem 0;
    font-size: 2.5rem;
    }
  3. about.astroのフロントマターに以下のインポート文を追加します。

    src/pages/about.astro
    ---
    import '../styles/global.css';
    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";
    ---
  4. 概要ページをブラウザのプレビューで確認すると、新しいスタイルが適用されているはずです!

やってみよう - グローバルスタイルシートをインポートする

プロジェクトの各.astroファイルに必要なコードを追加して、サイトのすべてのページにグローバルスタイルを適用しましょう。

✅ コードを表示 ✅

以下のインポート文をsrc/pages/index.astrosrc/pages/blog.astroの2つのページファイルに追加します。

src/pages/index.astro
---
import '../styles/global.css';
---

ページテンプレートに静的または動的にHTML要素を追加して、概要ページのコンテンツを変更または追加してみましょう。JavaScriptをフロントマタースクリプトに追加して、HTMLで使用する値を準備します。ページの出来に満足したら、次のレッスンに進む前にGitHubに変更をコミットしてください。

パターンを分析する

概要ページは現在、インポートされたglobal.cssファイルと<style>タグの両方を使用してスタイリングされています。

  • 両方のスタイリング方法からスタイルが適用されていますか?

  • 競合しているスタイルはありますか?あれば、どちらが適用されますか?

  • global.css<style>の関係を説明してください。

  • global.cssファイルでスタイルを宣言するか、または<style>タグで宣言するか、どのように選択すればよいですか?

チェックリスト

参考