QiitaのMarkdownパーサー変更にともなう、見出しについてのいろいろな書き方と注意点

7500 ワード
githubflavoredmarkdown Qiita Markdown Qiita テキストリンク

記事投稿シリーズについて

QiitaでGitHub Flavored Markdown (以下GFM) に準拠したMarkdownパーサーがベータ版として公開されました！

Qiitaアカウントによる説明記事にも書いてあるのですが、今までと記法が変わっている箇所があるので注意が必要です。
せっかく書いた記事の表示が崩れてしまうのは困るので、可能な限り防ぎたいと考えています！

そこで、記事を書く時に注意すべき記法などについて、Qiita運営から5日間に分けて10記事のシリーズで投稿することになりました！
少しでも皆様が執筆する際の助けになればと思います。

詳しくはQiitaアカウントによる説明記事に、投稿シリーズの説明や、他の記事一覧が載っていますのでぜひ他の記事も読んでみてください！

基本の書き方

見出しを書くときの　基本形はこんな感じになります。🔽

# 見出し

## 見出し

### 見出し

#### 見出し

##### 見出し

###### 見出し

見え方はこんな感じです。🔽

※ ###### 見出し は<h6>見出し</h6>となりますが、フォントサイズやフォントウェイト等は、変わりません。

他の見出しの書き方

=を使った見出しの書き方

=を使うと、h1を表現できます。
見出しの次の行に=を一個以上入力するとh1になります。
この書き方をすることで、改行を含む見出しにすることができます。

見出し
=

-を使った見出しの書き方

-を使うと、h2を表現できます。
見出しの次の行に-を一個以上入力するとh2になります。
この書き方をすることで、改行を含む見出しにすることができます。

見出し
-

見出しで 使える Markdown 記法 1

ボールド 

### **ボールド**

見た目では区別はありませんが、ちゃんと<strong>ボールド</strong>となります。

イタリック 

### _イタリック_

打ち消し線 

### ~~打ち消し線~~

コード #FFFFFF 

### `コード` `#FFFFFF`

色コード(RGB16進数表記)を入れてもちゃんと色が表示されました。

リンク 

### [リンク](url)

絵文字 

### 絵文字 :qiita-fabicon:

絵文字もちゃんと表示されました。

注釈2 

### 注釈[^2]
[^2]: 本文の語句や文章をとりあげてその意味を解説すること


### ![画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5b725166-6a80-35f8-149c-680c4c3f09b7.png)

見出しでは、使えないこと　

  • note記法
  • リスト
  • チェックボックス
  • 引用
  • 水平線
  • 表
  • 数式
  • リンクカード
  • Twitter埋め込み
  • CodePen
  • バックスラッシュでのMarkdown無効化

注意点

#が7つ以上は見出しではなくなる

#の数で、H1〜H6を表現できますが、#を7つ重ねてると見出しではなくなります。

❌ #の数が多い
####### 見出し

#の前に半角スペースがあっても見出しとして、読み取られる。

半角スペース3つまでは、見出しとして、読み取られるようです。

⭕️ #の前に半角スペースがある
 ###### 見出し

#の後ろに半角スペースがないと見出しとして、読み取ってくれません。

❌ #の後ろに半角スペースがない
######見出し

最後に

他の記法についてもまた別の記事でまとめていますので、合わせて読んでみてください！
詳しくはQiitaアカウントによる説明記事をご覧ください！

↓記事投稿シリーズまとめ

↓次の記事

  1. Qiitaのfavicon ↩

  2. 本文の語句や文章をとりあげてその意味を解説すること ↩