Astroでは、コンポーネントごとにスタイルを当てたり、サイト全体に共通のスタイルを適用したり、SCSSを使うこともできます。
ここでは基本的な使い方を4つのパターンに分けて説明します。
Astroコンポーネントに直接CSSを書く (<style> タグ)
特定のコンポーネントの中だけで使うスタイルを定義するのに便利な方法です。
- スタイルを当てたい
.astroファイル（例:src/components/Button.astro）を開きます。 - ファイルのテンプレート部分（
---の下、通常はHTML要素の後）に<style>タグを追加します。 -
<style>タグの中に、通常のCSSルールを記述します。
{/* src/components/Button.astro */}
<button>
<slot /> {/* ボタンのテキストを受け取る */}
</button>
<style>
/* このスタイルはこのButtonコンポーネント内のbutton要素にのみ適用されます */
button {
background-color: var(--button-bg-color, blue); /* CSS変数も使える */
color: white;
padding: 0.5em 1em;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: var(--button-hover-bg-color, darkblue);
}
</style>
ポイント: <style> タグに書いたCSSは、デフォルトでそのコンポーネント内の要素にしか適用されません (スコープされます)。他のコンポーネントの同じ要素（例: 他のファイルの button）には影響しないので安心です。
補足: もし意図的に他の要素にも影響させたい場合（あまり推奨されません）は、<style is:global> と書くか、セレクタの前に :global() を付けます (例: :global(body) { margin: 0; })。
外部CSSファイルをimport で読み込む
サイト全体で使うスタイル（リセットCSS、基本的なタイポグラフィなど）や、複数のコンポーネントで共通するスタイルは、別のCSSファイルに書いて読み込むのが一般的です。
-
src/ディレクトリ内（例:src/styles/）にCSSファイルを作成します (例:src/styles/global.css)。 - CSSファイルに必要なスタイル（例: bodyのフォント設定など）を記述します。
- サイト共通のレイアウトファイル（例:
src/layouts/BaseLayout.astro）の フロントマター (---内) で、そのCSSファイルを 相対パス でimportします。
---
// src/layouts/BaseLayout.astro
import '../styles/global.css'; // ← CSSファイルをインポート
import Header from '../components/Header.astro';
// ...
---
<html lang="ja">
{/* ... */}
</html>
この方法でインポートしたCSSは、サイト全体にグローバルに適用 されます。通常、グローバルCSSはこの方法でレイアウトコンポーネントから読み込みます。
外部CSSファイルを<link> タグで読み込む
-
public/ディレクトリ内にCSSファイルを配置します (例:public/css/legacy.css)。 - レイアウトファイル（例:
src/layouts/BaseLayout.astro）の<head>内に<link>タグを記述します。
<head>
{/* ... */}
<link rel="stylesheet" href="/css/legacy.css"> {/* ← ルート相対パスで指定 */}
<!-- 外部 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism-tomorrow.css">
</head>
注意: この方法はAstroによる最適化が行われません。特別な理由がない限り、先ほどの import を使う方が推奨されます。またhref は必ず / から始まる ルート相対パス で指定します。
SCSS (Sass) を使う方法
変数やネスト、ミックスインなどが使える高機能なCSSプリプロセッサSCSSも簡単に導入できます。
sass パッケージをインストール: ターミナルで以下のコマンドを実行します。
npm install sass
# または pnpm install sass / yarn add sass
SCSSを<style> タグで使う
.astro ファイル内で <style lang="scss"> と記述し、その中にSCSSコードを書きます。
<style lang="scss">
$primary-color: #3490dc; // SCSSの変数
$padding: 1rem;
.card {
padding: $padding;
border: 1px solid #ddd;
h2 { // ネスト
color: $primary-color;
margin-bottom: $padding / 2;
}
}
</style>
.scss ファイルを読み込んで使う
src/styles/ などに .scss ファイルを作成し、通常のCSSファイルと同様に .astro ファイルのフロントマターで import '../styles/variables.scss'; のようにインポートします。
まとめ
これらの方法を使い分けることで、Astroプロジェクトのスタイリングを効率的かつ整理された状態で行うことができます。