LoginSignup
10
7

More than 5 years have passed since last update.

Qiitaでページ内リンクがうまくいかない場合

Posted at

いつもあれ?っと戸惑うので。うまく飛ばない場合。

まず、リンク元はMarkdownで記載。
[表示文言](#アンカー名)

リンク先は実際のHTMLをデベロッパーツールなりで見て、コピペするのが手っ取り早いと思います。大文字やスペース、括弧などがある場合特に。

例えば、次の場合。

見出し1

見出し 2

見出し (3)

header4

Header 5
HEADER, 6

Markdownではこのようにしています。

#見出し1
##見出し 2
###見出し (3)
####header4
##### Header 5
###### HEADER, 6

実際のHTMLは次のようになっていました。

<h1>
<span id="見出し1" class="fragment"></span><a href="#%E8%A6%8B%E5%87%BA%E3%81%971"><i class="fa fa-link"></i></a>見出し1</h1>

<h2>
<span id="見出し-2" class="fragment"></span><a href="#%E8%A6%8B%E5%87%BA%E3%81%97-2"><i class="fa fa-link"></i></a>見出し 2</h2>

<h3>
<span id="見出し-3" class="fragment"></span><a href="#%E8%A6%8B%E5%87%BA%E3%81%97-3"><i class="fa fa-link"></i></a>見出し (3)</h3>

<h4>
<span id="header4" class="fragment"></span><a href="#header4"><i class="fa fa-link"></i></a>header4</h4>

<h5>
<span id="header-5" class="fragment"></span><a href="#header-5"><i class="fa fa-link"></i></a>Header 5</h5>

<h6>
<span id="header-6" class="fragment"></span><a href="#header-6"><i class="fa fa-link"></i></a>HEADER, 6</h6>

このため、リンクは次のようになります。
[見出し1 へ](#見出し1)見出し1 へ
[見出し2 へ](#見出し-2)見出し2 へ
[見出し3 へ](#見出し-3)見出し3 へ
[見出し4 へ](#header4)見出し4 へ
[見出し5 へ](#header-5)見出し5 へ
[見出し6 へ](#header-6)見出し6 へ

以上

10
7
1

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
10
7