MDUtil LogoMDUtil

Markdown リンクジェネレーター

テキストとURLを入力してリンクの種類を選ぶだけで、GitHub、Discord、Obsidianなどで正しく表示されるMarkdownのリンクをコピーできます。入力した内容がブラウザの外に出ることはありません。

無料 · 登録不要 · ブラウザ内で完結最終更新

Markdownでリンクを貼るには？

表示したい文字を角括弧で囲み、直後に丸括弧でリンク先を書きます：`[リンクテキスト](https://example.com)`。角括弧と丸括弧の間に空白があると機能しません。丸括弧内でURLの後ろに引用符付きのタイトルを添えるとツールチップになります。相対パスや#アンカー、mailto:も同じ書き方です。

markdown
[MDUtil](https://mdutil.com)
[MDUtil](https://mdutil.com "無料のMarkdownツール")

どちらの行もMDUtilと表示されるクリック可能なリンクになります。2行目にはtitle属性が付き、多くのレンダラーではマウスを乗せたときにツールチップとして表示されます。

Markdown リンクジェネレーターを使う

設定

出力

Markdownのリンク記法

Markdownのリンクには4つの書き方があり、さらにサービスごとの独自ルールがいくつか加わります。いずれも最終的には<a>要素になりますが、URLを書く位置と、対応しているレンダラーが異なります。

インラインリンク（標準の書き方）

もっとも一般的な書き方です。角括弧に表示テキスト、丸括弧にリンク先を書き、必要ならその後ろに二重引用符でタイトルを添えます。角括弧と丸括弧の間に半角スペースが1つでも入ると機能しません。

markdown
細かい挙動を議論する前に [CommonMark 仕様](https://commonmark.org "CommonMark 0.31") を読んでおきましょう。

「CommonMark 仕様」がcommonmark.orgへのリンクになり、マウスを乗せると「CommonMark 0.31」が表示されます。

自動リンクと裸のURL

山括弧で囲むと、URLそのものが表示テキストになるリンクになります。GitHub Flavored MarkdownはURLをそのまま書いても自動でリンクにしますが、厳密なCommonMarkではリンクになりません。移植性を重視するなら山括弧を付けるのが確実です。

markdown
<https://mdutil.com>
<[email protected]>

1行目はhttps://mdutil.comへのリンクになり、URLがそのまま表示されます。2行目はmailto:と書かなくてもメールリンクになります。

参照リンク

URLを本文から追い出し、代わりに短いラベルを置いて、定義はファイルの別の場所（多くは末尾）にまとめます。長い段落が読みやすくなり、1つの定義を複数の箇所から使い回せます。

markdown
[CommonMark][spec] が記法を定めており、省略形の [spec][] も同じ場所を指します。

[spec]: https://commonmark.org "CommonMark"

どちらのリンクテキストもcommonmark.orgに解決されます。ラベルは大文字と小文字を区別せず、定義を書いた行は表示結果には現れません。

見出しへのアンカーリンク

同じ文書の中で移動するときはフラグメントを使います。見出しの文字を小文字にし、空白をハイフンに置き換え、記号を取り除いたものがIDです。GitHub、GitLab、主要な静的サイトジェネレーターはこのスラッグを自動で生成します。日本語の見出しは文字がそのままIDになります。

markdown
[クイックスタート](#クイックスタート) へ移動できます。別ファイルの節へは [動作環境](./install.md#requirements) と書きます。

1つ目のリンクは同じページの「クイックスタート」見出しまでスクロールし、2つ目はinstall.mdを開いてRequirementsの見出しまで移動します。

画像リンクと装飾付きのリンクテキスト

先頭に感嘆符を付けると画像になり、リンクの中に画像を入れ子にすると画像自体がクリックできるようになります。READMEのバッジはすべてこの形です。太字などの記号は角括弧の内側に書きます。

markdown
![MDUtilのロゴ](/images/logo.png "MDUtil")
[![Build passing](https://img.shields.io/badge/build-passing-green)](https://ci.example.com)
[**太字のリンクテキスト**](https://mdutil.com)

1行目は代替テキスト付きの画像、2行目はCIのダッシュボードへ飛ぶバッジ、3行目はリンクテキストが太字になったリンクです。

Discordなどチャットアプリでのリンク

Discordではインライン形式をマスクリンクと呼び、通常のメッセージでもBotやWebhookのembedでも表示されます。山括弧にはもう1つ意味があり、URLのプレビューカードを抑制します。SlackはMarkdownのリンク記法そのものを解釈しません。

markdown
[サーバーに参加する](https://discord.gg/example)
<https://example.com>

Discordでは1行目は「サーバーに参加する」だけが表示されるリンクになり、2行目はURLがそのまま投稿されてプレビューカードは表示されません。

各サービスでの対応状況

インラインリンクはどこでも使えますが、参照リンク、相対パス、見出しアンカーの扱いはサービスごとに違います。

プラットフォーム対応状況備考
GitHub / GitLab対応インライン、参照、自動リンク、リポジトリ内の相対パスがすべて使えます。見出しアンカーは自動生成されます。
Discord一部[テキスト](URL) のマスクリンクはメッセージとembedで表示されます。参照リンクは使えず、<URL> はプレビューを抑制します。
Slack一部入力欄は [テキスト](URL) を解釈しません。Slack独自の形式は <https://example.com|テキスト> です。
Obsidian対応標準のMarkdownリンクに加え、Vault内のノート向けに [[ウィキリンク]] と ![[埋め込み]] が使えます。
Notion対応[テキスト](URL) と入力すると自動変換され、文字を選択した状態でURLを貼り付けてもリンクになります。
Qiita / Zenn / はてなブログ対応いずれもインラインリンクと画像リンクに対応します。見出しアンカーのID生成規則はサービスごとに異なります。

Markdownでリンクを作る手順

  1. リンクの種類を選ぶ

    表示テキストを付けるなら標準リンク、URLをそのまま見せるなら自動リンク、同じURLを使い回すなら参照リンク、画像を埋め込むなら画像リンクを選びます。

  2. テキストとURLを入力する

    読者に見せる文字を入力し、リンク先を貼り付けます。絶対URL、相対パス、#アンカー、mailto:のメールアドレスがそのまま使えます。

  3. 必要なオプションを設定する

    タイトルを入力するとマウスオーバー時のツールチップになります。参照リンクではIDを指定し、「新しいウィンドウで開く」を有効にするとHTML出力にtarget属性とrel属性が付きます。

  4. 結果をコピーする

    生成されたMarkdownをコピーします。<a>タグが必要な場合はHTMLタブに切り替え、プレビュータブでリンク先が意図どおりか確認してください。

よくある質問

Markdownでリンクを貼るにはどう書きますか？

表示したい文字を角括弧で囲み、その直後に丸括弧でリンク先を書きます。[リンクテキスト](https://example.com) のような形です。角括弧の閉じと丸括弧の開きの間に空白を入れてはいけません。ツールチップを付けたい場合は、丸括弧の中でURLの後ろに引用符でくくったタイトルを書きます。

Markdownのリンクを別タブで開くには？

Markdownには別タブで開くための記法がありません。HTMLを直接書き、<a>タグにtarget="_blank"とrel="noopener noreferrer"を指定します。MkDocsやattrsプラグインを有効にしたmarkdown-itのように、通常のリンクの後ろに{target=_blank}と書ける実装もあります。GitHubのREADMEなどHTMLをサニタイズするサービスでは、この属性は取り除かれます。

標準リンクと参照リンクの違いは何ですか？

表示結果は同じです。標準リンクはURLを本文の中に書くため、一度しか使わないリンクに向いています。参照リンクは本文には短いラベルだけを置き、URLはファイルの別の場所で定義します。段落が読みやすくなり、10か所で使っているURLも1行直すだけで更新できます。

同じ文書内の見出しにリンクするには？

見出しから作られるフラグメントを使います。文字を小文字にし、空白をハイフンに置き換え、記号を取り除くので、Quick Setupという見出しなら [Quick Setup](#quick-setup) になります。GitHub、GitLab、主要な静的サイトジェネレーターはこのアンカーを自動生成します。同じ見出しが複数ある場合は #quick-setup-1 のように連番が付きます。日本語の見出しは文字がそのままアンカーになります。

Markdownでメールアドレスへのリンクを作るには？

通常のリンクのURL部分にmailto:を使います。たとえば [サポートへ連絡](mailto:[email protected]) と書きます。mailto:[email protected]?subject=Bug%20report のようにクエリ文字列で件名をあらかじめ入れておくこともできます。メールアドレスを山括弧で囲むだけでも自動的にmailtoリンクになります。

Discordでリンクを貼るには？

Discordはマスクリンクに対応しています。[ここをクリック](https://example.com) と書くと文字だけが表示され、URLは隠れます。通常のメッセージでもBotやWebhookのembedでも使えますが、参照リンクは使えません。大きなプレビューカードを出さずにURLを投稿したい場合は、URLを山括弧で囲みます。

Markdownの中でHTMLのリンクタグを使えますか？

多くのレンダラーで使えます。<a>タグならtarget、rel、class、idなど、Markdownでは表現できない属性を指定できます。例外はHTMLをサニタイズしたり禁止したりするサービスで、Discord、Slack、Redditのコメント、一部の静的サイト設定ではタグがエスケープされるか削除されます。

Markdownのリンクが反映されないのはなぜですか？

よくある原因は4つあります。角括弧の閉じと丸括弧の開きの間に空白がある、URLに含まれる空白や丸括弧がエンコードされていない、https:// のようなスキームが抜けている、書式が処理されないコードブロックの中にリンクを書いている、といったケースです。空白は%20にパーセントエンコードするか、丸括弧の中でURLを山括弧で囲むと解決します。

同じリポジトリ内の別のMarkdownファイルにリンクするには？

相対パスを使います。たとえば [インストール手順](./docs/install.md) と書きます。GitHub、GitLab、VS Codeはいずれも現在のファイルを基準に相対リンクを解決するため、リポジトリをクローンしてもドキュメントをまとめて移動してもリンクは有効なままです。./docs/install.md#requirements のようにフラグメントを付ければ、見出しまで直接移動できます。

画像をクリックできるリンクにするには？

画像の記法をリンクの中に入れ子にします。[![代替テキスト](image.png)](https://example.com) と書くと、外側の角括弧がリンク先を、内側の感嘆符付きの記法が画像を指定します。READMEのバッジがビルド状況のダッシュボードやパッケージのページへ飛ぶのは、この書き方によるものです。