Markdown記法一覧。最速で文章を書くには、これを覚えるべし！

Markdownは文章を記述するための言語です。
サイト上で文章を作るとき、タグを使うことで、その文章に様々な意味を持たせます。

しかし、直接タグを打ち込むのは大変ですし、エディタの機能を使おうと思うと、一度キーボードから手を離して、マウスに持ち替える必要があります。

そんなとき、Markdown記法を覚えると便利です。
今回は、Markdown記法の一覧を記事にしました。

段落 <p>

HTMLではpタグを使って段落を指定しますが、Markdownでは空行を入れることによって１つの段落を表します。

Markdown記法を覚えましょう。

Markdown記法を覚えると、作業が捗ります。

サンプル

出力されるHTML

<p>Markdown記法を覚えましょう。</p>
<p>Markdown記法を覚えると、作業が捗ります。</p>

改行 <br>

２つの半角スペースを行末に入力することで、改行を行なうことができます。
見た目では分かりませんが、行末に２つの半角スペースが入力されていることにご注意ください。

Markdown記法を覚えましょう。  
Markdown記法を覚えると、作業が捗ります。

サンプル

出力されるHTML

<p>Markdown記法を覚えましょう。<br />
Markdown記法を覚えると、作業が捗ります。</p>

見出し <h1>〜<h6>

見出しには#を使います。この#の数で、h1〜h6までの見出しを表すことができます。

# 見出し１
## 見出し２
### 見出し３
#### 見出し４
##### 見出し５
###### 見出し６

サンプル

出力されるHTML

<h1 id="見出し１">見出し１</h1>
<h2 id="見出し２">見出し２</h2>
<h3 id="見出し３">見出し３</h3>
<h4 id="見出し４">見出し４</h4>
<h5 id="見出し５">見出し５</h5>
<h6 id="見出し６">見出し６</h6>

リスト、番号付きリスト <ul><li> <ol><li>

HTMLでのリストは、ulとolの２種類があります。
Markdownではそれぞれ、インデント（半角スペース、もしくはTab）と-、インデントと数値とピリオドで、リストを表すことができます。

番号付きリストの数値はなんでも構いません。
また、番号付きリストのインデントは、半角スペースではなく、Tabを使わないとうまく変換できないかもしれません。

- リスト
	- リスト
	- リスト
		- リスト
		- リスト
1. 番号付きリスト
	1. 番号付きリスト
	1. 番号付きリスト
		1. 番号付きリスト
		1. 番号付きリスト

サンプル

出力されるHTML

<ul>
<li>リスト
<ul>
<li>リスト</li>
<li>リスト
<ul>
<li>リスト</li>
<li>リスト</li>
</ul></li>
</ul></li>
</ul>
<ol type="1">
<li>番号付きリスト
<ol type="1">
<li>番号付きリスト</li>
<li>番号付きリスト
<ol type="1">
<li>番号付きリスト</li>
<li>番号付きリスト</li>
</ol></li>
</ol></li>
</ol>

強調 <em> <strong>

HTMLでは、emタグ（斜体）やstrongタグ（太字）を使って、文字を強調できます。
Markdownでは、これらを*（アスタリスク）を使って表します。

*が１つでem、２つでstrong、３つでemとstrongの両方、という意味になります。

このボタンをあと*20分以内*に押さないと、大変なことが起こります。

このボタンをあと**20分以内**に押さないと、大変なことが起こります。

このボタンをあと***20分以内***に押さないと、大変なことが起こります。

サンプル

出力されるHTML

<p>このボタンをあと<em>20分以内</em>に押さないと、大変なことが起こります。</p>
<p>このボタンをあと<strong>20分以内</strong>に押さないと、大変なことが起こります。</p>
<p>このボタンをあと<strong><em>20分以内</em></strong>に押さないと、大変なことが起こります。</p>

打ち消し線 <del>

文章を訂正したいときなど、delタグを使って打ち消し線をつけることがあります。
Markdownでは、~~で挟むことで表すことができます。

このボタンをあと~~40分以内~~20分以内に押さないと、大変なことが起こります。

サンプル

出力されるHTML

<p>このボタンをあと<del>40分以内</del>20分以内に押さないと、大変なことが起こります。</p>

引用 <blockquote>

引用では>を使います。

> 吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

サンプル

出力されるHTML

<blockquote>
<p>吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</blockquote>

リンク <a>

リンクを貼りたいときは、[]にテキストを入力し、その後ろの()にURLを入力します。

[オリジナルゲーム.com](https://original-game.com/)

サンプル

出力されるHTML

<p><a href="https://original-game.com/">オリジナルゲーム.com</a></p>

画像 <img>

画像を表示したいときは、!(alt属性のテキスト)[URL]というふうになります。
さきほどのリンクの先頭に!がついた形になります。

![山田先生](https://original-game.com/article/markdown/20210817/markdown-notation-list/yamada.jpg)

サンプル

出力されるHTML

<figure>
<img src="https://original-game.com/article/markdown/20210817/markdown-notation-list/yamada.jpg" alt="山田先生" /><figcaption aria-hidden="true">山田先生</figcaption>
</figure>

水平線 <hr>

水平線は、*を３つや、_を３つで、引くことができます。

***
___

サンプル

出力されるHTML

<hr />
<hr />

コード <pre> <code>

文章中にコードを貼りたいときは、以下のようにします。

もしインラインコードの場合、`で挟みます。

これは`printf()`を使います。

サンプル

出力されるHTML

<p>これは<code>printf()</code>を使います。</p>

また複数行の場合は、`３つで挟みます。このとき、使用する言語名を入れることもできます。

```python
for password in itertools.product( characters, repeat=1 ):
	password = ''.join( password )
	print( password )
```

サンプル

出力されるHTML

<div class="sourceCode" id="cb1"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="cf">for</span> password <span class="kw">in</span> itertools.product( characters, repeat<span class="op">=</span><span class="dv">1</span> ):</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>    password <span class="op">=</span> <span class="st">&#39;&#39;</span>.join( password )</span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a>    <span class="bu">print</span>( password )</span></code></pre></div>

表 <table>

表を作るときは、以下のようにします。

| ニャン太 | ワン子 | コケッ子 |
| --- | --- | --- |
| 魚 | 骨 | とうもろこし |
| 猫草 | 肉 | 米 |

サンプル

出力されるHTML

<table>
<thead>
<tr class="header">
<th>ニャン太</th>
<th>ワン子</th>
<th>コケッ子</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>魚</td>
<td>骨</td>
<td>とうもろこし</td>
</tr>
<tr class="even">
<td>猫草</td>
<td>肉</td>
<td>米</td>
</tr>
</tbody>
</table>

まとめ

Markdownを使うと、HTMLタグをかんたんに入力することができ、文章の作成がとても楽になります。

記事を書くときなど、いちいちタグを入力していては、その文章の質にも影響してくると思います。
楽できるところはできるだけ楽して、考えるところはしっかりと考えるのが、いい文章をつくるひとつのコツなのかもしれません。

ぜひMarkdownをマスターして、いまよりももっと素早く文章を書けるようになれるといいですね。

• Tweet
• Facebook
• はてブ
• Pocket