Typography

font-heading (Inter)

Heading 1 — 見出し1

Heading 2 — 見出し2

Heading 3 — 見出し3

Heading 4 — 見出し4

font-sans (Noto Sans JP)

本文テキスト — とあるSEのポートフォリオ & ブログ。Web 開発を中心に、学んだこと・作ったものを記録しています。

サブテキスト — 補足情報やキャプションに使用するスタイルです。

font-mono (JetBrains Mono)

const greeting = "Hello, World!";

Colors

accent

#6929FF

accent-hover

#5720CC

bg

Light: #FAFAFA / Dark: #0A0A0A

text

Light: #1A1A1A / Dark: #E5E5E5

border

Light: #E5E5E5 / Dark: #2A2A2A

Buttons

Primary

ブログを読む

Secondary (outlined)

About

Icon button

ThemeToggle

Text link

すべての記事を見る →

Tags / Badges

Blog tags

dev astro css darkmode

Tech badges

Astro Tailwind CSS React TypeScript

CategoryBadge

Tech Note

DraftBadge

下書き DEV ONLY

Cards

Blog post card

2026/3/20

記事タイトルのサンプル

記事の説明文が入ります。概要や要約を表示するエリアです。

dev astro

BlogPostCard

2026/3/22 約4分 Tech

Astro ブログで Mermaid 図を使う

Markdown のコードブロックから Mermaid ダイアグラムを描画する仕組みを Astro に組み込んだので、その実装と使い方を紹介します。

devastromarkdown

Project card

プロジェクト名

プロジェクトの説明文が入ります。

Astro React

Navigation

Header (default)

ShingoLab

MobileMenu (Astro / Vanilla JS)

← タップしてメニューを開閉

Code Block

With copy button (hover to reveal)

// astro.config.mjs
import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://shingolab.com",
});

Footer

Mermaid Zoom

MermaidZoom — ダブルクリックで拡大・ドラッグで移動

ブログ記事内の Mermaid 図（.prose > picture）を自動検出し、インタラクティブな Zoom / Pan UI を付与するスクリプトコンポーネント。実際の動作は Mermaid 記事で確認できます。

Share Buttons

ShareButtons

Background

BackgroundCanvas

全ページの背面に Layout.astro が 1 つだけ敷く演出のため、このページで実際に動いているものがそのまま実例になる（多重配置はできない）。ライトでは文字が降り、ダークでは星座が浮かぶ。右上の ThemeToggle で切り替えて確認できる。

view="home": 文字が降り続ける（記事詳細以外の全ページ）
view="article": 雨が止まり、記事の見出しが余白に静止する
data-bg-keepout: 付けた要素の矩形には文字を落とさない

Spacing Reference

site-shell 共通の横幅（max-w-4xl + mx-auto + px-6）

page-shell 共通ページ幅（site-shell + py-12）

px-6 水平パディング（24px）

py-12 ページ縦パディング（48px）

gap-6 ナビリンク間隔（24px）

gap-2 タグ間隔（8px）

Component Library