Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@FlatBone(ひらほね)

【初心者向け】Qiitaでよく使うMarkdownの記法チートシート

Posted at

はじめに

公式チートシートをかみ砕いてよく使う順に並べました。
また、解説の追加とその他便利な記法を追加しました。

この記事でわかること

  • Qiitaで特によく使うMarkdownの記法がわかる
  • 基本的なMarkdownの記法がわかる

この記事の対象者

  • Qiitaでの投稿初心者
  • Markdownを書き始めた人
  • シンプルなチートシートが欲しい人

検証環境

  • 2024/4/1時点のQiita

Markdownとは

一言で表すと「簡単な書き方で文書を装飾できる書き方」のことです。
何回か手を動かしながら文書を作成すればすぐに基本を使いこなすことができます。

markdown.256x256.png

よく使う記法

見出し

## を行頭につけることで見出しを作成できます。
Qiitaでは見出しから目次(TOC)が自動生成されます。

Qiitaでは1番大きい見出しを##(h2タグ)とし、以下のように運用されていることが多いようです。
これは#に相当するhtmlのh1タグがタイトルに使われているためです。

見出しの書き方

## 大見出し(章)
### 中見出し(節)
#### 小見出し(項)

コードの挿入方法

コードブロック

バッククオート3つ```かチルダ3つ~~~で囲むとコードブロックになります。
始めの```の後に言語:名前を付けるとハイライトとか付いて分かりやすくなります。

コードブロック内に```を記述したい場合は~~~で囲みまます。

注意

'(シングルクオート Shift+7) じゃなくて
`(バッククオート Shift+@) です。(n敗)

コードブロックの書き方
```python:test.py
# Pythonコードの例
def hello_world():
    print("Hello, World!")
```

結果

test.py
# Pythonコードの例
def hello_world():
    print("Hello, World!")
test.js
// JavaScriptコードの例
function helloWorld() {
    console.log("Hello, World!");
}

差分(diff)がある場合
```diff_pythonのように始めると差分を表現できます。
行頭に+で追加分、-で削除分です。

差分の表現
```diff_python:test.py
def hello_world():
-   print("Hello, World")
+   print("Hello, World!")
```
test(diff).py
# Pythonコードの例
def hello_world():
-   print("Hello, World")
+   print("Hello, World!")

コードスパン(インラインコード)

` バッククオートで囲むとhogehogeのようにインライン表示ができます。

`自体をインライン表示したい場合はn+1個で囲みます。

バッククオートのインライン表示
`` ` ``
``` `` ```
```` ``` ````

結果
`
``
```

リストの作成

箇条書きリスト

箇条書きリストの書き方
- 項目1
- 項目2
  - 項目2-1
  - 項目2-2
- 項目3

結果

  • 項目1
  • 項目2
    • 項目2-1
    • 項目2-2
  • 項目3

番号付きリスト

1. で番号付きリストになります。
番号付きリストの入れ子表現を1.1.にはできません。

番号付きリストの書き方
1. 項目1
1. 項目2
    1. 項目2-1
    1. 項目2-2
1. 第3項目

結果

  1. 項目1
  2. 項目2
    1. 項目2-1
    2. 項目2-2
  3. 第3項目

斜体と太字(強調)

*で囲むと文字を強調できます。
*の数が増えると強調度が増えます。

斜体と太字の書き方
_これは斜体です_

**これは太字です**

***これは太字かつ斜体です***

結果
これは斜体です

これは太字です

これは太字かつ斜体です

自分は斜体を強調の意味で使わないのであえて_で囲むことにしています。
いわゆる イレギュラー な時に使っています。

以下は斜体(イタリック)の解釈で自分の中でしっくり来たものです。

「分類学上の名称、技術用語、他言語からきた慣用句、字訳、思考、西洋文中の船名など、通常の文章とは少し性質の異なる箇所」

リンクの挿入

URLの上下に空行があると独立するので見やすいです。

リンクの書き方

https://qiita.com

[基本的なリンク](https://qiita.com)
[マウスホバーがついたリンク](https://qiita.com "マウスホバー")
[ページ内リンク](###リンクの挿入)

結果

基本的なリンク
マウスホバーがついたリンク
ページ内リンク

リンクを見出しにしたり強調したりもできます。

コメントアウト

コメントアウトの書き方

<!--
この部分がコメントアウトされる。
-->

結果

画像の挿入

編集画面でドラッグアンドドロップするか
画像がクリップボードにある状態でCtrl+Vなどで貼り付けると
自動でアップロードされます。

テーブルの中に入れることもできます。

画像のサイズ指定はHTML表記でできます。

画像の書き方
基本の画像
![代替テキスト](画像のURL)

幅のピクセル指定
<img src="画像のURL" width="200px">

幅の割合指定
<img src="画像のURL" width="50%">

テーブルの中の画像
|             画像1             |             画像2              |
| ----------------------------- | ------------------------------ |
| ![代替テキスト1](画像1のURL)  | ![代替テキスト2](画像2のURL)   |

読み込めない場合
![読み込めない場合](画像のURL)

結果

基本の画像
pop_gazouha_image_desu_shikaku.png

幅のピクセル指定

幅の割合指定

テーブルの中の画像

画像1 画像2
pop_gazouha_image_desu_shikaku.png pop_gazouha_image_desu_shikaku.png

読み込めない場合の表示
読み込めない場合

『画像はイメージです』ってトートロジーですね

引用の表現

引用の書き方
> これは引用です。
> 引用文はこのように表示されます。
>> 2つ使うこともできます。

結果

これは引用です。
引用文はこのように表示されます。

2つ使うこともできます。

水平線

---で区切り線を引けます。

色付きの背景で囲む

Qiitaのエディタで/を入力すると背景を選択できます。

"/"で背景

色付きの背景の書き方
::: note info
緑で囲む(補足説明)
:::

:::note warn
黄色で囲む(注意)
:::

:::note alert
赤色で囲む(警告)
:::

結果

緑で囲む(補足説明)

黄色で囲む(注意)

赤色で囲む(警告)

表・テーブルの作成

列数xデータ行数で3x2のように入力するとテーブルが挿入できます。

また、Markdownで直接書くこともできます。

表・テーブルの書き方
| 見出し1 | 見出し2 | 見出し3 |
| ------- | ------- | ------- |
| 内容1   | 内容2   | 内容3   |
| 内容A   | 内容B   | 内容C   |

結果

見出し1 見出し2 見出し3
内容1 内容2 内容3
内容A 内容B 内容C

mermaid

mermaid記法でフローチャートが書けます。
日本語表記する場合は日本語を""で囲むと良いです。

```mermaid
graph TD;
    Start("開始")-->
    Node1["処理1"]-->
    Node2["処理2"]-->
    Judge1{"分岐1<br>改行"}
        Judge1-->|True|Node3
            Node3["処理3"]-->Node6
        Judge1-->|False|Node4
            Node4["処理4"]-->
            Node5["処理5"]-->Node6
    Node6["表示6"]-->
    End("終了")
```

結果

数式

コードブロックでmathを指定するとTeX記法で数式を表現できます。

%以降がコメントアウトです。

\begin{align}と\end{align}で囲み、等号を&=にすると等号揃えで複数並べることができます。

括弧()は\left(と\right)で囲むとサイズが勝手に変わってくれます。
波括弧{}の場合は\left\{と\right\}です

数式の書き方
```math
%以降がコメントアウトです。

\begin{align}
I_{r} &= \frac{bh^3}{12}\\%長方形
\\
I_{c} &= \frac{\pi D^4}{64}\\%円柱
\\
I_{p} &= \frac{\pi}{64} \left( D^4-d^4 \right) \\%円筒
\end{align}
```

結果

hoge
%以降がコメントアウトです。
%\begin{align}と\end{align}で囲み、等号を"&="にすると等号揃えで複数並べることができます。
%()は"\left("と"\right)"で囲むとサイズが勝手に変わってくれます。波括弧{}の場合は"\left\{"と"\right\}"

\begin{align}
I_{r} &= \frac{bh^3}{12}\\%長方形
\\
I_{c} &= \frac{\pi D^4}{64}\\%円柱
\\
I_{p} &= \frac{\pi}{64} \left( D^4-d^4 \right) \\%円筒
\end{align}

数式上で右クリックするとコンテキストメニューからコピーしたりできます。
math

折り畳み

MarkdownではなくHTMLですが折り畳みをすることができます。

折り畳みの書き方
<details>
<summary>
常に表示される部分(左の三角を押すと開いたり閉じたりする)
</summary>
折り畳まれる文章

- 折り畳まれるリスト

</details>
常に表示される部分(左の三角を押すと開いたり閉じたりする) 折り畳まれる文章
  • 折り畳まれるリスト

参考資料

11
18
0

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
Sign upLogin
11
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?