スタイルガイド

見出し (Headings)

H2 見出しのスタイル

H3 見出しのスタイル

H4 見出しのスタイル

段落とインラインテキスト (Paragraph & Inline)

これは通常の段落です。テキストは自動的に折り返されます。文章が長くなっても読みやすいように、適切な行間が設定されています。ここに太字のテキストと斜体のテキスト、そして太字かつ斜体のテキストがあります。

取り消し線のテキストや、インラインコードも使えます。こちらは const x = 42 のような短いコードに便利です。

これは内部リンクで、こちらは外部リンクです。

引用 (Blockquote)

シンプルなブロック引用です。引用はインディゴのアクセントが付きます。

複数段落の引用です。

2つ目の段落もこのように書けます。太字や斜体も引用内で使えます。

リスト (Lists)

順序なしリスト

• リストアイテム 1
• リストアイテム 2
  • ネストされたアイテム A
  • ネストされたアイテム B
    • さらにネストされたアイテム
• リストアイテム 3

順序付きリスト

1. 最初のステップ
2. 次のステップ
   1. サブステップ A
   2. サブステップ B
3. 最後のステップ

タスクリスト

• 完了したタスク
• これも完了
• まだ終わっていないタスク
• これも未完了

コードブロック (Code Blocks)

TypeScript

interface Post {
  title: string;
  date: string;
  tags: string[];
  source: "blog" | "zenn" | "bengo4";
}

async function fetchPosts(): Promise<Post[]> {
  const response = await fetch("/api/posts");
  const data = await response.json();
  return data.posts;
}

JSX / React

export function PostCard({ post }: { post: Post }) {
  return (
    <article className="rounded-lg border p-4">
      <h2 className="text-xl font-bold">{post.title}</h2>
      <time className="text-sm text-muted">{post.date}</time>
      <div className="flex gap-2 mt-2">
        {post.tags.map((tag) => (
          <span key={tag} className="badge">{tag}</span>
        ))}
      </div>
    </article>
  );
}

CSS

.prose h2 {
  border-bottom: 2px solid var(--prose-accent-light);
  padding-bottom: 0.75rem;
}

.prose a:hover {
  background-size: 100% 1px;
}

Shell

pnpm dev
pnpm build
git commit -m "feat: add new post"

JSON

{
  "name": "ktsu2i-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

テーブル (Table)

右寄せ・中央寄せのテーブル

画像 (Image)

水平線 (Horizontal Rule)

上のテキスト

下のテキスト

脚注 (Footnote)

これは脚注付きのテキストです¹。もう一つの脚注もあります²。

リンクカード (Link Card)

URL を単独の段落として貼るだけで、OG画像・タイトル・説明文付きのリンクカードとして表示されます。

GitHub · Change is constant. GitHub keeps you ahead.

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

Zenn｜エンジニアのための情報共有コミュニティ

Zennはエンジニアが技術・開発についての知見をシェアする場所です。本の販売や、読者からのバッジの受付により対価を受け取ることができます。

zenn.dev

通常のインラインリンクはカードにはなりません。

複合的な例 (Combined)

Note: 以下は実際の記事で見られるような構成例です。

API からデータを取得する

まず、fetch 関数を使って API を呼び出します:

const res = await fetch("https://api.example.com/posts");
const posts: Post[] = await res.json();

取得したデータは以下のような構造です:

1. レスポンスを パース する
2. 型を Post[] に キャスト する
3. 結果を listAllPosts() で マージ する

詳しくは公式ドキュメントを参照してください。