【Qiita記事作成】リンクについて（リンクを別のタブで開く、本文中への目次の挿入）

# ■目次
[１．はじめに](#１はじめに)
[２．リンクについて](#２リンクについて)
　[２－１．リンクの作り方の基本](#２１リンクの作り方の基本)
　[２－２．リンクを別のタブで開く方法](#２２リンクを別のタブで開く方法) 
[３．本文中への目次の挿入方法](#３本文中への目次の挿入方法)
　[３－１．目次の作り方の基本](#３１目次の作り方の基本)
　[３－２．目次を作る時のルール](#３２目次を作る時のルール)
　[３－３．【応用】項番付きの目次の作り方](#３３応用項番付きの目次の作り方)
[４．まとめ](#４まとめ)

# １．はじめに
先日、Qiitaで初めて下記記事を作成しました。（もしよろしければ読んでみてください。）

https://qiita.com/tajima_next/private/69275ea61e71f4658a25

執筆時はQiita公式が上げている、「Markdown記法のチートシート」を参考に作成しました。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

その中でリンクに関し、「リンクを別のタブで開く方法」と「本文中への目次の挿入方法」について詰まった点があったため、本記事ではそれらの方法をまとめました。

# ２．リンクについて
#### ２－１．リンクの作り方の基本
まずはリンクの作り方を説明します。
Qiita記事ではMarkdown記法とHTMLが使用できます。
それぞれのリンクの作成方法は下記の通りです。

| Markdown | HTML |
|:-:|:-:|
|`[リンク名](url)`| `<a href="url">リンク名</a>`|

例として、MarkdownではQiitaの当社ホーム、HTMLでは当社のホームページへのリンクを作成してみます。
```markdown
<!--Markdown-->
[【Qiitaホーム】株式会社NEXT TECHNOLOGY](https://qiita.com/organizations/nexttechnology)
```
```HTML
<!--HTML-->
<a href="https://nexttechnology.jp/">【ホームページ】株式会社NEXT TECHNOLOGY</a>
```
【出力結果】
[【Qiitaホーム】株式会社NEXT TECHNOLOGY](https://qiita.com/organizations/nexttechnology)
<a href="https://nexttechnology.jp/">【ホームページ】株式会社NEXT TECHNOLOGY</a>

以上です、シンプルですね。
リンクをクリックしていただくとページが遷移します。
しかし、中にはリンクを別のタブで開きたい方もいらっしゃるのではないでしょうか。
次項ではその方法を説明していきます。

#### ２－２．リンクを別のタブで開く方法
リンクを別のタブで開くには**リンクカード**を使用します。
使い方はシンプルで下記の通りです。
```markdown
<!--空行-->
url
<!--空行-->
```
注意点はurlの前後に空行を挿入することです。
例としてurlをQiitaの当社ホームにすると出力結果は下記の通りになります。

```markdown
<!--空行-->
https://qiita.com/organizations/nexttechnology
<!--空行-->
```

https://qiita.com/organizations/nexttechnology

注意点は、下記のようなtarget=""_blank"を使用した書き方はサポートされていない点です。

:::note alert
サポートされていない書き方
【Markdown】
 `[リンク名](url){:target=""_blank""}`
 
【HTML】
 `<a href="url" target="_blank">リンク名</a>`
:::

# ３．本文中への目次の挿入方法
ここまでリンクの基本について説明してきました。
ここからはリンクを使って本文中への目次の作り方を説明していきます。

なお、目次に関し、[Markdown記法のチートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)には、下記のように説明されています。
<!--
># 目次(TOC)の自動挿入
>目次は記事内の見出しを元に自動生成し、右に自動挿入されます
-->
![目次の自動挿入.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025818/1592ce95-66cc-4dc2-baed-f5035a2b18ac.jpeg)

そのため、本文中への目次の挿入は不要のように思えます。
確かに、PCサイズで記事を読むと右側で目次が確認できる一方、スマートフォンやタブレットのサイズで読む場合、画面サイズ的に確認ができません。
下記はQiita記事をPC画面とスマートフォン画面で見た時の比較です。

【PCで見た場合】
![Qiita PC画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025818/31077867-b3c8-4e3f-937b-dae64e7c85ee.jpeg)

【スマートフォンで見た場合】
![Qiita スマホ画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025818/dd00bfc1-3cad-4e73-a8e2-971e7738db14.png)

そのため、スマートフォンやタブレットで読む場合を想定して、本文中に目次を挿入するのは有用なことといえるのではないでしょうか。

#### ３－１．目次の作り方の基本
手順は下記の通りです。

[①見出し(Headings)をつくる(リンク化)](#見出しheadingsをつくるリンク化)
[②見出しを使用して目次を作る](#見出しを使用して目次を作る)
それぞれ順番に確認していきましょう。

###### ①見出し(Headings)をつくる(リンク化)
#を使用して見出しを作ることができます。このとき自動でリンク化も行われます。
#の個数でテキストサイズを調整できます。
注意点は#とテキストの間にスペースが必要な点です。

```markdown
# 見出し1
## 見出し2
### 見出し3
```
【出力結果】

![見出し.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4025818/2075cf80-1bc6-4438-b711-2cb6343f5252.jpeg)

<!--
# 見出し1
## 見出し2
### 見出し3
-->
<!--**②見出しを使用して目次を作る**-->
###### ②見出しを使用して目次を作る
見出し(Headings)を使ったリンクの作り方は下記の通りです。

```markdown
[テキスト](#リンク名)
```
例として、本項「②見出しを使用して目次を作る」へのリンクを作成してみます。
```markdown
<!--見出しへのリンク-->
[②見出しを使用して目次を作る](#見出しを使用して目次を作る)
```

【出力結果】
[②見出しを使用して目次を作る](#見出しを使用して目次を作る)

#### ３－２．目次を作る時のルール
見出し(Headings)を使ったリンクの作り方にはいくつかのルールがあるので注意が必要です。

:::note warn
注意点
・アルファベットはリンク先が大文字でも、すべて小文字でを使用する
・半角スペースは「-」に書き換える
・(),:-などの記号は全てないものとして扱う
:::

# ３－３．【応用】項番付きの目次の作り方
上記までで学習したことを踏まえ、ここからは項番付きの目次の作成方法を説明します。
具体的には、下記のような「**１．**」や「 **１－１．**」を使用した目次です。

【目次】
[（例１）１．AAA BBB](#anchor1)
[（例２）１－１．（タイトル）](#anchor1)

【見出し】
###### （例１）１．AAA BBB
###### （例２）１－１．（タイトル）

このような目次を作りたいときは下記のように記述します。
```markdown
[（例１）１．AAA BBB](#例１１aaa-bbb)
[（例２）１－１．（タイトル）](#例２１１タイトル)
```
出来上がるのが下記リンクです。
実際にリンクをクリックしていただくとそれぞれの見出し部分へリンクします。
[（例１）１．AAA BBB](#例１１aaa-bbb)
[（例２）１－１．（タイトル）](#例２１１タイトル)

ここでのポイントは３－２で紹介したルールに従い、下記の通りです。

:::note info 
ポイント
・アルファベット大文字は「AAA」→「aaa」のように小文字で表記する。
・「AAA」と「BBB」間の半角スペースを「-」に書き換える。
・「（例１）」の「（）」、「１－１．」の「ー」や「．」などの記号はないもの
　として、「例１」や「１１」のように書く。
:::

以上です。

# ４．まとめ
いかがでしたでしょうか。
Qiita記事の作成時の参考となれば幸いです。