Markdown はサーバーに送信されますか?

いいえ。解析・目次生成はすべてブラウザ内の JavaScript で行います。社内資料や下書きでも安心して貼り付けてください。

アンカーリンクはどう生成しますか?

GitHub の slug 仕様に近い形で生成します: 小文字化 → 半角スペースをハイフンに → 英数字 / ハイフン / アンダースコア / 日本語以外の記号を削除。例: 'API リファレンス' → '#api-リファレンス'。同じ見出し名が複数あるときは末尾に -1, -2 を付けて衝突を回避します。

Setext 形式 (Heading\n=====) は対応していますか?

現バージョンでは ATX 形式 (`# Heading`) のみ対応です。Setext 形式が必要な場合は、見出し行を `# Heading` の形式に書き換えてから入力してください。

コードフェンス内の # はどう扱われますか?

``` または ~~~ で開かれたフェンスの内側は無視します。シェルスクリプト風の `# This is a comment` や、見出しの説明としてフェンス内に書いた `### Title` も TOC に含まれません。インデントコードブロック (4 スペース) は現バージョンでは判定せず、行頭の `#` を見出しとして拾います。

H1 を含める / 含めないはどちらがおすすめ?

ページタイトルが既に表示される (GitHub の README / Notion / ブログ) 場合は H1 を含めない方が綺麗です。長い静的サイトやドキュメントで H1 を本文セクションとして使っている場合は含めてください。デフォルトは含めない (off) です。

アンカーが実際のページで効かない

GitHub・Notion・Qiita 系は slug 自動生成が同じルールではない場合があります。本ツールの生成結果と一致しないときは、各サービスがレンダリング後に発行するアンカー (` ` を確認) に合わせて手動で調整してください。

開発へ戻る

Markdown 目次生成 — 見出しから TOC を抽出

Markdown 文書の見出し (#, ##, …) を拾い上げ、GitHub 互換のアンカー付きリンクで目次 (TOC) を生成します。階層リスト / 平坦リスト、含める見出しの最大レベル、H1 の除外などを切替可能。コードフェンス内の `#` は自動で無視。結果は Markdown のコピーや .md ダウンロードで他のエディタにそのまま貼れます。すべてブラウザ内処理。

開発Markdown生成

使い方

リスト形式 (階層 / 平坦) を選び、Markdown 本文を貼り付けて「目次を生成」を押すと、ATX 形式の見出し (`# foo`, `## bar`, …) から GitHub 互換のアンカー付きリンクを並べた目次が出力されます。最大レベルや H1 の取り扱いはオプションで調整可能。コードフェンス (```...```) 内の `#` で始まる行はコメント扱いで自動的に除外されます。生成結果は Markdown のコピーまたは .md ファイルダウンロードで、そのまま README やドキュメントに貼り付けられます。

よくある質問

Markdown はサーバーに送信されますか?: いいえ。解析・目次生成はすべてブラウザ内の JavaScript で行います。社内資料や下書きでも安心して貼り付けてください。
アンカーリンクはどう生成しますか?: GitHub の slug 仕様に近い形で生成します: 小文字化 → 半角スペースをハイフンに → 英数字 / ハイフン / アンダースコア / 日本語以外の記号を削除。例: 'API リファレンス' → '#api-リファレンス'。同じ見出し名が複数あるときは末尾に -1, -2 を付けて衝突を回避します。
Setext 形式 (Heading\n=====) は対応していますか?: 現バージョンでは ATX 形式 (`# Heading`) のみ対応です。Setext 形式が必要な場合は、見出し行を `# Heading` の形式に書き換えてから入力してください。
コードフェンス内の # はどう扱われますか?: ``` または ~~~ で開かれたフェンスの内側は無視します。シェルスクリプト風の `# This is a comment` や、見出しの説明としてフェンス内に書いた `### Title` も TOC に含まれません。インデントコードブロック (4 スペース) は現バージョンでは判定せず、行頭の `#` を見出しとして拾います。
H1 を含める / 含めないはどちらがおすすめ?: ページタイトルが既に表示される (GitHub の README / Notion / ブログ) 場合は H1 を含めない方が綺麗です。長い静的サイトやドキュメントで H1 を本文セクションとして使っている場合は含めてください。デフォルトは含めない (off) です。
アンカーが実際のページで効かない: GitHub・Notion・Qiita 系は slug 自動生成が同じルールではない場合があります。本ツールの生成結果と一致しないときは、各サービスがレンダリング後に発行するアンカー (`<h2 id="...">` を確認) に合わせて手動で調整してください。

類似のツール

Markdown プレビュー — リアルタイムレンダリング

Markdown を入力すると、横並びでリアルタイムに HTML プレビューが表示されます。GFM (テーブル / タスクリスト / 自動リンク) と改行→<br> の変換に対応。レンダリングした HTML をコピー / ダウンロードできます。すべての処理はブラウザ内で完結します。

開発Markdown

Markdown ⇄ HTML 変換 — 双方向で往復

Markdown を HTML に、HTML を Markdown に双方向変換します。ブログから WordPress、静的サイトジェネレータへの移行、Web ページから README 化など、フォーマット間の橋渡しに最適。marked と turndown をブラウザ内で実行するので、原稿を外部に送信せずに変換できます。

開発Markdown変換

バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

数字や文字列を 1 次元バーコード (JAN-13 / EAN-13・JAN-8 / EAN-8・UPC-A・CODE128・CODE39・ITF・Codabar/NW-7・MSI) に変換し、PNG / SVG として保存できます。バーの太さ・高さ・色・余白や、下部の数字表示の有無を細かく調整可能。チェックディジットの検証も自動で行います。生成はすべてブラウザ内で完結し、入力した値が外部に送信されることはありません。

開発生成画像

CSS シャドウビルダー — box-shadow / text-shadow を GUI で組み立て

CSS の box-shadow と text-shadow を GUI で組み立てるツール。Mode で box / text を切り替え、offset-x / offset-y / blur / spread (box のみ) / color / inset (box のみ) をスライダーと数値入力で調整。多重シャドウ (カンマ区切りで複数重ね) に対応し、Material Design 風の影や Neumorphism / 文字の縁取り / 蛍光グローなど 9 種類のプリセットからワンクリックで開始。ライブプレビュー (実 div / 実テキスト) + 値だけ / 宣言付きコピー切替対応。gradient-css の対称ツールとして CSS スタイル系のロングテール需要を満たします。すべてブラウザ内で処理。

開発生成