Hello World

はじめに

これはサンプル記事です。MDX を使って記事を書くことができます。本文のテキストは Inter フォントで表示され、行間は読みやすい 1.8 に設定しています。太字や 斜体、そしてリンクといったインライン要素も確認できます。

また、inline code のスタイリングもここで確認できます。長めの段落を書くことで、本文の折り返しやマージンが正しく機能しているかを検証します。段落間のスペーシングも重要なデザイン要素のひとつです。

見出しレベルの確認

H3 見出し

セクションの小見出しとして使用します。

H4 見出し

さらに細かい分類が必要な場合に使用します。

コードブロック

TypeScript

interface Post {
  title: string
  description: string
  date: string
  published: boolean
  category: string
  tags: string[]
}
 
function getAllPosts(posts: Post[]): Post[] {
  return posts
    .filter((post) => post.published)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
}

JSX / TSX

export function Card({ title, description }: CardProps) {
  return (
    <div className="rounded-md border border-border p-6">
      <h3 className="font-heading text-lg font-semibold">{title}</h3>
      <p className="mt-2 text-sm text-text-secondary">{description}</p>
    </div>
  )
}

CSS

:root {
  --brand: #00ff00;
  --background: #ffffff;
  --text-primary: #0d0d0d;
}

リスト

順序なしリスト

• フロントエンド開発（React, Next.js, TypeScript）
• UI / UX デザイン（Figma, Pencil）
• モバイルアプリ開発
  • iOS（Swift）
  • Android（Kotlin）
  • クロスプラットフォーム（React Native）

順序ありリスト

1. プロジェクトの初期設定
2. デザインシステムの構築
3. コンポーネントの実装
4. ページの組み立て
5. テスト・デプロイ

引用

デザインとは、単に見た目や感触のことではない。デザインとは、どう機能するかだ。

— Steve Jobs

テーブル

画像

レスポンシブ画像のテストです。ビルド時に <picture> + srcset に変換されます。

動画

YouTube 動画の埋め込みテストです。<YouTube> コンポーネントで動画 ID を指定します。

水平線

セクション間の区切りとして使用：

インライン要素まとめ

• 太字テキスト — 強調表現
• 斜体テキスト — 補足・注釈
• 取り消し線 — 訂正・削除
• インラインコード — コード参照
• 外部リンク — ナビゲーション
• キーボード: Cmd + Shift + P

まとめ

以上が MDX 記事で使用する主要なレイアウト要素です。各要素のスペーシング、フォントサイズ、カラーがデザインシステムに沿って正しく表示されていることを確認してください。