■目次
１．はじめに
２．リンクについて
２－１．リンクの作り方の基本
２－２．リンクを別のタブで開く方法
３．本文中への目次の挿入方法
３－１．目次の作り方の基本
３－２．目次を作る時のルール
３－３．【応用】項番付きの目次の作り方
４．まとめ
１．はじめに
先日、Qiitaで初めて下記記事を作成しました。（もしよろしければ読んでみてください。）
執筆時はQiita公式が上げている、「Markdown記法のチートシート」を参考に作成しました。
その中でリンクに関し、「リンクを別のタブで開く方法」と「本文中への目次の挿入方法」について詰まった点があったため、本記事ではそれらの方法をまとめました。
２．リンクについて
２－１．リンクの作り方の基本
まずはリンクの作り方を説明します。
Qiita記事ではMarkdown記法とHTMLが使用できます。
それぞれのリンクの作成方法は下記の通りです。
| Markdown | HTML |
|---|---|
[リンク名](url) |
<a href="url">リンク名</a> |
例として、MarkdownではQiitaの当社ホーム、HTMLでは当社のホームページへのリンクを作成してみます。
<!--Markdown-->
[【Qiitaホーム】株式会社NEXT TECHNOLOGY](https://qiita.com/organizations/nexttechnology)
<!--HTML-->
<a href="https://nexttechnology.jp/">【ホームページ】株式会社NEXT TECHNOLOGY</a>
【出力結果】
【Qiitaホーム】株式会社NEXT TECHNOLOGY
【ホームページ】株式会社NEXT TECHNOLOGY
以上です、シンプルですね。
リンクをクリックしていただくとページが遷移します。
しかし、中にはリンクを別のタブで開きたい方もいらっしゃるのではないでしょうか。
次項ではその方法を説明していきます。
２－２．リンクを別のタブで開く方法
リンクを別のタブで開くにはリンクカードを使用します。
使い方はシンプルで下記の通りです。
<!--空行-->
url
<!--空行-->
注意点はurlの前後に空行を挿入することです。
例としてurlをQiitaの当社ホームにすると出力結果は下記の通りになります。
<!--空行-->
https://qiita.com/organizations/nexttechnology
<!--空行-->
注意点は、下記のようなtarget=""_blank"を使用した書き方はサポートされていない点です。
サポートされていない書き方
【Markdown】
[リンク名](url){:target=""_blank""}
【HTML】
<a href="url" target="_blank">リンク名</a>
３．本文中への目次の挿入方法
ここまでリンクの基本について説明してきました。
ここからはリンクを使って本文中への目次の作り方を説明していきます。
なお、目次に関し、Markdown記法のチートシートには、下記のように説明されています。
そのため、本文中への目次の挿入は不要のように思えます。
確かに、PCサイズで記事を読むと右側で目次が確認できる一方、スマートフォンやタブレットのサイズで読む場合、画面サイズ的に確認ができません。
下記はQiita記事をPC画面とスマートフォン画面で見た時の比較です。
【PCで見た場合】
【スマートフォンで見た場合】
そのため、スマートフォンやタブレットで読む場合を想定して、本文中に目次を挿入するのは有用なことといえるのではないでしょうか。
３－１．目次の作り方の基本
手順は下記の通りです。
①見出し(Headings)をつくる(リンク化)
②見出しを使用して目次を作る
それぞれ順番に確認していきましょう。
①見出し(Headings)をつくる(リンク化)
#を使用して見出しを作ることができます。このとき自動でリンク化も行われます。
#の個数でテキストサイズを調整できます。
注意点は#とテキストの間にスペースが必要な点です。
# 見出し1
## 見出し2
### 見出し3
【出力結果】
②見出しを使用して目次を作る
見出し(Headings)を使ったリンクの作り方は下記の通りです。
[テキスト](#リンク名)
例として、本項「②見出しを使用して目次を作る」へのリンクを作成してみます。
<!--見出しへのリンク-->
[②見出しを使用して目次を作る](#見出しを使用して目次を作る)
【出力結果】
②見出しを使用して目次を作る
３－２．目次を作る時のルール
見出し(Headings)を使ったリンクの作り方にはいくつかのルールがあるので注意が必要です。
注意点
・アルファベットはリンク先が大文字でも、すべて小文字でを使用する
・半角スペースは「-」に書き換える
・(),:-などの記号は全てないものとして扱う
３－３．【応用】項番付きの目次の作り方
上記までで学習したことを踏まえ、ここからは項番付きの目次の作成方法を説明します。
具体的には、下記のような「１．」や「 １－１．」を使用した目次です。
【目次】
（例１）１．AAA BBB
（例２）１－１．（タイトル）
【見出し】
（例１）１．AAA BBB
（例２）１－１．（タイトル）
このような目次を作りたいときは下記のように記述します。
[（例１）１．AAA BBB](#例１１aaa-bbb)
[（例２）１－１．（タイトル）](#例２１１タイトル)
出来上がるのが下記リンクです。
実際にリンクをクリックしていただくとそれぞれの見出し部分へリンクします。
（例１）１．AAA BBB
（例２）１－１．（タイトル）
ここでのポイントは３－２で紹介したルールに従い、下記の通りです。
ポイント
・アルファベット大文字は「AAA」→「aaa」のように小文字で表記する。
・「AAA」と「BBB」間の半角スペースを「-」に書き換える。
・「（例１）」の「（）」、「１－１．」の「ー」や「．」などの記号はないもの
として、「例１」や「１１」のように書く。
以上です。
４．まとめ
いかがでしたでしょうか。
Qiita記事の作成時の参考となれば幸いです。