LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Markdownのページ内リンクの書き方。HTMLのソース表示でidを確認して記載するのが一番楽!!

結論

タイトルの通りです!

Markdownのページ内リンクは、記載のルール絶対覚えられません!!!:no_good::no_good::no_good:

ページ内でリンクしたい場合があるハズ
[ケース13](#ケース13)

みたいな感じで、特定の場所に飛ばしたいことがあるハズ。

しかし、

とにかく、いろんな条件、例外があって、記載のルール、絶対、覚えられません!!!

■条件、例外とは。

  • 見出しのレベル
  • 見出しに空白文字が含まれる
  • 見出しにハイフンとかが含まれる
  • 見出しにパンクチャが含まれる
  • 見出しに絵文字がある
  • 同じ見出しが何個もある
  • これらの組み合わせ!!!
検索して記載ルールを調べるのもいいとも思いますが。。。。「Markdown, ページ内リンク」ぐらいの検索ワードで簡単にうまい説明に出会えるとは思いますが。。。。。

HTMLのソース表示でidを確認して記載するのが一番楽!!

リンクの例です

リンク先1
リンク先6
リンク先11
リンク先12

Markdown

[リンク先1](#リンク先をつくるための記載)
[リンク先6](#リンク先をつくるための記載1-2-a)
[リンク先11](#小まとめ-及び補足情報-2)
[リンク先12](#tadaリンク先をつくるための記載2-2)

リンク対象のHTMLのソースです


<h1>
<span id="リンク先をつくるための記載" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%89"><i class="fa fa-link"></i></a>リンク先をつくるための記載</h1>

<p>↑ ここに飛びたい場合を「リンク先1」とします。</p>

<h2>
<span id="リンク先をつくるための記載1" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%891"><i class="fa fa-link"></i></a>リンク先をつくるための記載1</h2>

<p>↑ ここに飛びたい場合を「リンク先2」とします。</p>

<h3>
<span id="リンク先をつくるための記載1-1star2" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%891-1star2"><i class="fa fa-link"></i></a>リンク先をつくるための記載1-1<img alt=":star2:" class="emoji" height="20" src="https://cdn.qiita.com/emoji/twemoji/unicode/1f31f.png" title=":star2:" width="20">
</h3>

<p>↑ ここに飛びたい場合を「リンク先3」とします。</p>

<h4>
<span id="小まとめ-及び補足情報" class="fragment"></span><a href="#%E5%B0%8F%E3%81%BE%E3%81%A8%E3%82%81-%E5%8F%8A%E3%81%B3%E8%A3%9C%E8%B6%B3%E6%83%85%E5%A0%B1"><i class="fa fa-link"></i></a>小まとめ, 及び, 補足情報</h4>

<p>↑ ここに飛びたい場合を「リンク先4」とします。</p>

<h3>
<span id="リンク先をつくるための記載1-2" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%891-2"><i class="fa fa-link"></i></a>リンク先をつくるための記載1-2</h3>

<p>↑ ここに飛びたい場合を「リンク先5」とします。</p>

<h3>
<span id="リンク先をつくるための記載1-2-a" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%891-2-a"><i class="fa fa-link"></i></a>リンク先をつくるための記載1-2 a</h3>

<p>↑ ここに飛びたい場合を「リンク先6」とします。</p>

<h2>
<span id="リンク先をつくるための記載2" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%892"><i class="fa fa-link"></i></a>リンク先をつくるための記載2</h2>

<p>↑ ここに飛びたい場合を「リンク先7」とします。</p>

<h3>
<span id="リンク先をつくるための記載2-1new" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%892-1new"><i class="fa fa-link"></i></a>リンク先をつくるための記載2-1<img alt=":new:" class="emoji" height="20" src="https://cdn.qiita.com/emoji/twemoji/unicode/1f195.png" title=":new:" width="20">
</h3>

<p>↑ ここに飛びたい場合を「リンク先8」とします。</p>

<h4>
<span id="小まとめ-及び補足情報-1" class="fragment"></span><a href="#%E5%B0%8F%E3%81%BE%E3%81%A8%E3%82%81-%E5%8F%8A%E3%81%B3%E8%A3%9C%E8%B6%B3%E6%83%85%E5%A0%B1-1"><i class="fa fa-link"></i></a>小まとめ, 及び, 補足情報</h4>

<p>↑ ここに飛びたい場合を「リンク先9」とします。</p>

<h3>
<span id="リンク先をつくるための記載2-2" class="fragment"></span><a href="#%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%892-2"><i class="fa fa-link"></i></a>リンク先をつくるための記載2-2</h3>

<p>↑ ここに飛びたい場合を「リンク先10」とします。</p>

<h4>
<span id="小まとめ-及び補足情報-2" class="fragment"></span><a href="#%E5%B0%8F%E3%81%BE%E3%81%A8%E3%82%81-%E5%8F%8A%E3%81%B3%E8%A3%9C%E8%B6%B3%E6%83%85%E5%A0%B1-2"><i class="fa fa-link"></i></a>小まとめ, 及び, 補足情報</h4>

<p>↑ ここに飛びたい場合を「リンク先11」とします。</p>

<h3>
<span id="tadaリンク先をつくるための記載2-2" class="fragment"></span><a href="#tada%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E8%A8%98%E8%BC%892-2"><i class="fa fa-link"></i></a><img alt=":tada:" class="emoji" height="20" src="https://cdn.qiita.com/emoji/twemoji/unicode/1f389.png" title=":tada:" width="20">リンク先をつくるための記載2-2</h3>

<p>↑ ここに飛びたい場合を「リンク先12」とします。</p>

リンク先をつくるための記載

↑ ここに飛びたい場合を「リンク先1」とします。

リンク先をつくるための記載1

↑ ここに飛びたい場合を「リンク先2」とします。

リンク先をつくるための記載1-1:star2:

↑ ここに飛びたい場合を「リンク先3」とします。

小まとめ, 及び, 補足情報

↑ ここに飛びたい場合を「リンク先4」とします。

リンク先をつくるための記載1-2

↑ ここに飛びたい場合を「リンク先5」とします。

リンク先をつくるための記載1-2 a

↑ ここに飛びたい場合を「リンク先6」とします。

リンク先をつくるための記載2

↑ ここに飛びたい場合を「リンク先7」とします。

リンク先をつくるための記載2-1:new:

↑ ここに飛びたい場合を「リンク先8」とします。

小まとめ, 及び, 補足情報

↑ ここに飛びたい場合を「リンク先9」とします。

リンク先をつくるための記載2-2

↑ ここに飛びたい場合を「リンク先10」とします。

小まとめ, 及び, 補足情報

↑ ここに飛びたい場合を「リンク先11」とします。

:tada:リンク先をつくるための記載2-2

↑ ここに飛びたい場合を「リンク先12」とします。

まとめ

特にありません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0