マークダウン記法完全ガイド

マークダウンのすべての記法を網羅したサンプル記事です。見出し、リスト、コードブロック、テーブル、引用など、すべての記法を確認できます。

Tech Blog 編集部 | 2024-12-01 | 10分

この記事では、マークダウンのすべての記法を網羅的に紹介します。各セクションで異なる記法を確認できます。

H3見出し

H4見出し

H5見出し
H6見出し

通常のテキストです。

太字(Bold) のテキストです。

斜体(Italic) のテキストです。

太字と斜体(Bold Italic) のテキストです。

取り消し線(Strikethrough) のテキストです。

インラインコードは const example = "hello" のように記述します。

複数行のコードブロック(JavaScript):

function greet(name) {
console.log(`Hello, ${name}!`);
return `Welcome, ${name}`;
}
const message = greet('World');
console.log(message);

複数行のコードブロック(Python):

def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
for i in range(10):
print(f"F({i}) = {fibonacci(i)}")

複数行のコードブロック(TypeScript):

interface User {
id: number;
name: string;
email: string;
}
const users: User[] = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' }
];
function findUser(id: number): User | undefined {
return users.find(user => user.id === id);
}

言語指定なしのコードブロック:

これは言語指定のないコードブロックです。
シンタックスハイライトは適用されません。

順序なしリスト

  • 項目1
  • 項目2
  • 項目3
    • ネストされた項目1
    • ネストされた項目2
      • さらにネストされた項目
  • 項目4

順序付きリスト

  1. 最初の項目
  2. 2番目の項目
  3. 3番目の項目
    1. ネストされた順序付き項目1
    2. ネストされた順序付き項目2
  4. 4番目の項目

混合リスト

  1. 順序付き項目1
    • ネストされた順序なし項目
    • 別のネストされた項目
  2. 順序付き項目2
    • さらにネスト
      • 深いネスト

チェックボックスリスト

  • 完了したタスク
  • 別の完了したタスク
  • 未完了のタスク
  • もう一つの未完了タスク

通常のリンク

タイトル付きリンク

参照形式のリンク:参照リンク

自動リンク:https://example.com

メールリンク:email@example.com

代替テキスト

参照形式の画像:参照画像

これは引用ブロックです。 複数行にわたる引用も可能です。

空行を挟むこともできます。

ネストされた引用も可能です。


上記が水平線です。以下のようにも記述できます:



基本的なテーブル

列1列2列3
データ1データ2データ3
データ4データ5データ6

配置指定付きテーブル

左揃え中央揃え右揃え
中央
テキストテキストテキスト
長いテキストの例中央揃えのテキスト右揃えのテキスト

複雑なテーブル

機能説明対応状況
マークダウン基本的な記法✅ 対応
コードブロックシンタックスハイライト✅ 対応
テーブル複雑なレイアウト✅ 対応
数式LaTeX記法⚠️ 一部対応

特殊文字をエスケープするには、バックスラッシュを使用します:

*これはアスタリスクです*

# これはハッシュ記号です

[これは角括弧です]

マークダウン内でHTMLタグも使用できます:

これはHTMLのdivタグで囲まれたテキストです。

Ctrl + C でコピーできます。

ハイライトされたテキスト

小さなテキスト

下付き文字上付き文字

これは段落です。同じ段落内では改行は無視されます。

これは別の段落です。空行を挟むことで新しい段落になります。

この行の末尾に2つのスペースを入れると、
強制的に改行されます。

タスクリスト(GitHub風)

  • 完了したタスク1
  • 完了したタスク2
  • 未完了のタスク1
  • 未完了のタスク2

定義リスト(一部のマークダウン実装で対応)

用語1 : 用語1の定義

用語2 : 用語2の定義 : 用語2の別の定義

JSON

{
"name": "サンプル",
"version": "1.0.0",
"dependencies": {
"react": "^18.0.0",
"typescript": "^5.0.0"
}
}

CSS

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>これはサンプルのHTMLです。</p>
</body>
</html>

Bash/Shell

#!/bin/bash
echo "Hello, World!"
# 変数の使用
NAME="Astro Blog"
echo "Welcome to $NAME"
# ループ
for i in {1..5}; do
echo "Iteration $i"
done

YAML

name: markdown-syntax-showcase
version: 1.0.0
description: マークダウン記法の完全ガイド
features:
- 見出し
- リスト
- コードブロック
- テーブル
author:
name: Tech Blog 編集部
email: editor@example.com

この記事では、マークダウンの主要な記法をすべて紹介しました:

  1. 見出し - H1からH6まで
  2. テキスト強調 - 太字、斜体、取り消し線
  3. リスト - 順序付き、順序なし、チェックボックス
  4. リンクと画像 - 通常形式、参照形式
  5. コード - インラインコード、コードブロック
  6. 引用 - 単一レベル、ネスト
  7. テーブル - 基本的なテーブル、配置指定
  8. その他 - 水平線、HTMLタグ、エスケープ

これらの記法がすべて正しく表示されることを確認してください。

Portfolio

Astro、React、Framer Motion、Three.jsで構築されたポートフォリオサイト

技術スタック

  • Astro
  • React
  • Framer Motion
  • Three.js
  • TailwindCSS
  • shadcn/ui

© 2026 Portfolio. All rights reserved.