Skip to content

Latest commit

 

History

History
157 lines (110 loc) · 5.93 KB

5.mdx

File metadata and controls

157 lines (110 loc) · 5.93 KB
Raw
type title description i18nReady
tutorial
サイト全体にスタイルを追加する
「初めてのAstroブログ」チュートリアル - グローバルスタイルシートを作成してサイト全体のスタイルを設定する
true

import Badge from '/components/Badge.astro'; import Checklist from '/components/Checklist.astro'; import Spoiler from '/components/Spoiler.astro'; import Box from '/components/tutorial/Box.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

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

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

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

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

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

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

  1. 以下のコードを新しいファイル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;
}

  2. 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";
---

  3. 概要ページをブラウザのプレビューで確認すると、新しいスタイルが適用されているはずです！

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

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

✅ コードを表示 ✅

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

---
import '../styles/global.css';
---

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

### パターンを分析する

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

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

    はい。

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

    はい、`

    `はグローバルで`2.5rem`のサイズを持っていますが、ローカルの`<style>`タグでは`4rem`です。ローカルの`4rem`のルールが概要ページに適用されます。

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

    競合するスタイルがページにローカルな`<style>`タグとグローバルの両方で定義されている場合、ローカルのスタイルがグローバルのスタイルを上書きします。（しかし、他の要因が関係する場合もあるので、スタイルが正しく適用されているかどうか、常にサイトを目視して確認してください！）

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

    サイト全体にスタイルを適用したい場合は、`global.css`ファイルを使用することを選択します。一方、単一の`.astro`ファイルのHTMLコンテンツのみにスタイルを適用し、サイトの他の要素に影響を与えないようにしたい場合は、`<style>`タグを選択します。

## チェックリスト - [ ] `.css`ファイルをインポートして、グローバルなCSSスタイルを追加できる。

参考