LoginSignup
0
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-05-22

結論

タイトルの通りです!

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」とします。

まとめ

特にありません。

0
0
0

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
  3. You can use dark theme
What you can do with signing up
0
0