1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Markdown
  6. »
  7. Markdown記法一覧。最速で文章を書くには、これを覚えるべし!

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

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

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

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

今回はpandocを使って、MarkdownをHTML5に変換しています。

目次
  1. 段落 <p>
  2. 改行 <br>
  3. 見出し <h1>〜<h6>
  4. リスト、番号付きリスト <ul><li> <ol><li>
  5. 強調 <em> <strong>
  6. 打ち消し線 <del>
  7. 引用 <blockquote>
  8. リンク <a>
  9. 画像 <img>
  10. 水平線 <hr>
  11. コード <pre> <code>
  12. 表 <table>
  13. まとめ

段落 <p>

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

Markdown記法を覚えましょう。

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

サンプル

出力されるHTML

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

改行 <br>

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

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

サンプル

出力されるHTML

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

見出し <h1>〜<h6>

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

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

サンプル

出力されるHTML

<h1 id="見出し1">見出し1</h1>
<h2 id="見出し2">見出し2</h2>
<h3 id="見出し3">見出し3</h3>
<h4 id="見出し4">見出し4</h4>
<h5 id="見出し5">見出し5</h5>
<h6 id="見出し6">見出し6</h6>

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

HTMLでのリストは、ulolの2種類があります。
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では、これらを*(アスタリスク)を使って表します。

*が1つでem、2つでstrong、3つでemstrongの両方、という意味になります。

このボタンをあと*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>

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

***
___

サンプル

出力されるHTML

<hr />
<hr />

コード <pre> <code>

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

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

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

サンプル

出力されるHTML

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

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

```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をマスターして、いまよりももっと素早く文章を書けるようになれるといいですね。

スポンサードリンク

関連コンテンツ

オススメ記事

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

みなさんこんにちは。今日も楽しくプログラミングを学んでいきましょう! これまでの講座《こうざ》で、JavaScript《ジャバスクリプト》によるゲーム開発《かいはつ》の方法が、なんとなくでも分

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

Unityのダウンロードとインストールの方法【Windows】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用してゲームを開発している、とても高機能なツールです。 Unityにはいく

Unityのダウンロードとインストールの方法【Mac】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用してゲームを開発している、とても高機能なツールです。 Unityにはいく

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です