[2026/4/9]

[Astro #09] AstroにおけるCSS設計：グローバルCSSの基本とサイバーパンク・スタイリングの実践

はじめに

前回の[Astro #08] インタラクティブなShader計算機の実装では、コンポーネント内に閉じた高度なUIとロジックを扱いました。
今回は視点を広げ、サイト全体を包み込む「CSS設計」について解説します。

[Astro #08] Shader パラメータ計算機：静的なブログに動きを吹き込む // PROTOCOL.LAIN

Astro と React を組み合わせ、MDX 内で動作する Gerstner Wave パラメータ計算機を構築。client:visible ディレクティブによるパフォーマンス最適化と、サイバーパンク風の UI カスタマイズについて詳しく紹介します。

humanxai.info

AstroはデフォルトでコンポーネントごとにCSSがスコープ（カプセル化）される強力な機能を持っていますが、ベースとなるデザインやMarkdownのスタイリングには「グローバルCSS」が不可欠です。

今回は、AstroにおけるCSSディレクトリの推奨構造やグローバルCSSの読み込み方に加え、当サイトで実際に使用しているサイバーパンク風（PROTOCOL.LAIN風）のCSSコードを紐解きながら、実践的なスタイリング手法を解説します。

1. AstroにおけるCSSの基本とディレクトリ構造

Astroでは、.astroファイルの<style>タグ内に書かれたCSSは、デフォルトでそのコンポーネントにのみ適用されます。これにより、意図しないスタイルの衝突を防ぐことができます。

しかし、サイト全体の背景色、フォント、Markdown記事の標準スタイルなどは、全ページで共有すべきです。そのため、用途に合わせてCSSファイルを分割し、適切に管理するツリー構造が推奨されます。

一般的なCSSディレクトリツリーの例

src/
 ├─ components/
 ├─ layouts/
 │   └─ BaseLayout.astro   # ここでグローバルCSSを読み込む
 ├─ pages/
 └─ styles/                # CSSファイルを集約するディレクトリ
     ├─ global.css         # サイト全体のベース、CSS変数
     ├─ markdown.css       # コードブロックなどのMarkdown固有の装飾
     └─ article.css        # 記事内の見出し、テーブル、カスタムUIの装飾

グローバルCSSの読み込み方法

作成したCSSファイルをサイト全体に適用するには、すべてのページの土台となるレイアウトコンポーネント（例：BaseLayout.astro）のFrontmatter（---で囲まれた部分）でインポートするだけです。

---
// src/layouts/BaseLayout.astro
import '../styles/global.css';
import '../styles/markdown.css';
import '../styles/article.css';
---

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>My Site</title>
  </head>
  <body>
    <slot />
  </body>
</html>

これで、すべてのページにCSSが適用されるようになります。

2. 実践：プロジェクトのCSSコード解説

ここからは、当サイトで実際に実装しているCSSファイルを例に、どのような意図でスタイリングが行われているのかを解説します。

global.css：テーマの根幹を定義する

global.cssの役割は、サイト全体で使い回す「CSS変数（カスタムプロパティ）」の定義と、bodyタグへのベーススタイルの適用です。

/* src/styles/global.css */
:root {
  /* サイトのテーマカラーを定義 */
  --color-neon-cyan: #00e5ff;
  --color-neon-magenta: #ff0055;
  --color-neon-red: #ff3030;
  --bg-dark: #050505;
}

body {
  background-color: var(--bg-dark);
  color: #e0e0e0;
  font-family: 'Courier New', monospace; /* 無機質な雰囲気を演出 */
}

ポイント: :rootに色を定義しておくことで、後からテーマカラーを変更したくなった場合、このファイル内のカラーコードを書き換えるだけでサイト全体の色が一括で変更されます。

markdown.css：Astroのコードブロックをハックする

Astroはデフォルトでシンタックスハイライト機能（Shikiなど）を提供しており、コードブロックは<pre class="astro-code">として出力されます。ここにサイバーパンク風の「疑似ラベル」を付与しています。

/* src/styles/markdown.css (一部抜粋) */

/* コードブロック本体 */
.markdown-body pre.astro-code {
  position: relative; /* ラベルの基準点 */
  padding: 40px 16px 16px !important; /* 上部にラベル用の余白を作る */
  background-color: #1a2230 !important;
  border: 1px solid rgba(0, 229, 255, 0.2) !important;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
}

/* 上部のラベル "SOURCE_CODE // ENCRYPTED" */
.markdown-body pre.astro-code::before {
  content: "SOURCE_CODE // ENCRYPTED";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 42, 58, 0.9);
  padding: 4px 12px;
  border-radius: 4px 0 4px 0;
  font-size: 11px;
  color: #00e5ff;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

ポイント: ::before疑似要素を使って、HTMLを汚さずにCSSだけで「ラベル」を追加しています。親要素（pre）にposition: relativeを、子要素（::before）にposition: absoluteを指定し、top: 0, left: 0とすることで左上にピタリと配置しています。
レスポンシブ対応: @media (max-width: 600px)を使用して、スマホ閲覧時にはラベルの文字サイズ（font-size: 9px）や余白を小さくし、画面領域を無駄にしないよう最適化しています。

article.css：見出しとカスタムUIの装飾

記事本文の装飾（H2、H3、引用など）と、連載#08で作成したインタラクティブ計算機（.gerstner-calc）の専用スタイルです。

/* src/styles/article.css (一部抜粋) */

/* H2装飾 */
.markdown-body h2 {
  color: #fff;
  border-left: 8px solid #ff3030;
  padding: 12px 20px;
  background: linear-gradient(90deg, rgba(255, 48, 48, 0.15) 0%, rgba(0, 229, 255, 0.02) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 右側に装飾テキストを追加 */
.markdown-body h2::after {
  content: "SECTION_DATA //";
  font-size: 10px;
  color: rgba(255, 48, 48, 0.5);
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

ポイント: display: flex; justify-content: space-between;を活用することで、見出しの左側に本文、右側に::afterで生成した「SECTION_DATA //」というメタテキストをきれいに両端揃えで配置しています。

カスタムコンポーネント用CSSの統合

連載#08の計算機UIのスタイルもこのファイルに定義されています。

/* Shader Calculator (PROTOCOL.LAIN風) */
.gerstner-calc {
  background-color: #050505;
  border: 1px solid #00e5ff;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
}
/* ...略... */
.gerstner-calc input[type="range"] {
  width: 100%;
  accent-color: #ff0055; /* スライダーの色をマゼンタに変更 */
}

ポイント: <input type="range">（スライダー）の色は、CSSのaccent-colorプロパティを使うことで、ブラウザのデフォルトデザインを簡単に上書きし、テーマカラーであるネオンマゼンタ（#ff0055）に統一しています。

3. まとめ

Astroでのスタイリングは、コンポーネント内のスコープCSSと、今回解説したグローバルCSSの組み合わせで成り立っています。

CSS変数を活用する: :rootで色やフォントを定義し、全体に一貫性を持たせる。
疑似要素を駆使する: ::beforeや::afterを使うことで、Markdownから生成されたHTMLを変更せずにリッチな装飾（ラベルやメタタグなど）を追加できる。
役割でファイルを分割する: global.css, markdown.css, article.cssのように分割し、BaseLayout.astroで一括インポートする。

これらを意識することで、Astroでのサイト構築がよりスムーズになり、メンテナンス性の高いモダンなフロントエンド環境を維持できます。

COMM_LOG: astro-09-css-architecture

NO DATA FOUND IN THIS SECTOR.