at backyard

Color my life with the chaos of trouble.

【サンプルあり】Markdownでページ内リンクの書き方(はてなのMarkdown対応)

Markdownでページ内リンクの書き方

Markdownでページ内リンク(アンカーリンク)の書き方

忘れた頃にMarkdownでいつもページ内リンクを書きたくなるので、こちらに書き残しておくことにした。
なお、このはてなブログ内でも正常に動くことを確認している。
(もちろんプレビューでも動く)

Markdownでのページ内リンクの書き方

下記のように#を使って設定したアンカーに飛ばすようにする

[midashiにとぶ](#midashi)

アンカー自体の書き方は下記のように id 属性を用いて記載する
(検索結果を見てみると name属性で設定する例も書かれているが、これは現在は非推奨なので利用しない。詳細については こちら に書いた

<a id="midashi"></a>
midashi

具体例

では、実際に上に書いた例をこのページ内に書いてみる。
ここでは下記のようにmarkdownを記述している。

[midashiにとぶ](#midashi)

・
・
・

<a id="midashi"></a>
## midashi

実際にHTMLに描画されたものが下になる。
(この下の midashiにとぶ というリンクを踏むと、midashi という位置に画面が移動するのがわかる)

midashiにとぶ



midashi

ちなみにこの #midashi のところは日本語で #みだし でも問題なく動く。

みだしにとぶ



みだし

使い方は以上となる。

aタグのname属性はHTML5で廃止されたのでアンカーとしては利用しない

ページ内のリンク先の場所を定義するアンカーとして以前は name 属性がよく利用されたようだが、これはHTML5では廃止になっているので利用しないようにする。
(現在もGoogleで検索するとアンカーとして name 属性を用いた記述も目にするが、現在は name ではなく id を利用することが推奨されている)

developer.mozilla.org