ブログ

【簡単】Markdown記法覚えるのは５つだけでOK

 
はりおくん
はりおくん
ブログを作成するときにMarkdown記法で書くとよいというサイトを見たのですが、数が多くて覚えられません。

このような悩みを解決します。

この記事からわかること

  • 本当に必要なMarkdownの記法を覚えることができます。

本記事の内容

こんにちは、Daikon（@dikonblogger）です。

ブログの下書きをは、Markdown記法を使って、下書きというかメモを作っています。Markdown記法を使う理由は、書いた文字をHTMLに変換してくれからです。今回は、よく使うMarkdown記法を紹介します。紹介するものを覚えるだけで、効率化できると思います。

Markdownライティング入門

posted with ヨメレバ
藤原惟 インプレスR＆D 2018年12月
楽天ブックス
Amazon
Kindle

それでは、行きましょう。

MarkdownとHTMLは相性がいい

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつ。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

つまり、テキストで作った文章をHTMLにするために作られた記法なので、HTML変換ができます。HTMLに変換するためには、専用のエディタや変換ツール、サイトがあるので、それらを利用します。

変換用にインストールは不要です。メモ帳などのテキストエディタに書いて、MarkdownからHTMLに変換するサイトもあるので、大丈夫です。私が、自分用に作ったのHTML変換用のサイトは、こちらです。

https://www.daikonblog.com/php-markdown-html

ブログを作成するときに使うMarkdown記法はこれ

ブログを作成するときに、多く使うMarkdown記法を紹介します。

この5つであれば、数分で覚えることができ、今日から使えるようになります。使用頻度が多い順にしています。

  1. 見出し
  2. 強調
  3. 箇条書きリスト
  4. 番号付きリスト
  5. 表組み

では、詳しく見てみましょう。

見出し

シャープ（＃）の数で、見出しの順番となります。シャープ（＃）と見出しの間には、半角スペースを１つ必要です。

記述例

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

HTML変換後

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

表示例

強調

強調したい箇所を”**（アスタリスクを２つ）”で挟みます。その場所に<strong>タグが付きます。

記述例

ブログの記事は、**Markdown記法でかくことが重要** です。

HTML変換後

ブログの記事は、<strong>Markdown記法でかくことが重要</strong>です。

表示例

ブログの記事は、Markdown記法でかくことが重要 です。

箇条書きリスト

ハイフン（-）をつけて文章を書けば、箇条書きになります。ハイフン（-）と見出しの間には、半角スペースを１つ必要です。

記述例

- 箇条書き1
- 箇条書き2
　- 箇条書き2-1
  - 箇条書き2-2
- 箇条書き3

HTML変換後

<ul>
<li>箇条書き1</li>
<li>箇条書き2<ul>
    <li>箇条書き2-1</li>
    <li>箇条書き2-2</li>
  </ul></li>
<li>箇条書き3</li>
</ul>

表示例

  • 箇条書き1
  • 箇条書き2
    • 箇条書き2-1
    • 箇条書き2-2
  • 箇条書き3

番号付きリスト

数値+”.”をつけて文章を書けば、番号付きリストとなります。数値は、何でもいいみたいです。なのえ、一番簡単なのは、”1. 文章”ですね.
数値+”.”と文章の間には、半角スペースがひとつ必要です。

記述例

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

HTML変換後

<ol>
<li>番号付きリスト</li>
<li>番号付きリスト<ol>
  <li>番号付きリスト</li>
  <li>番号付きリスト</li>
</ol></li>
<li>番号付きリスト</li>
</ol>

表示例

  1. 番号付きリスト
  2. 番号付きリスト
    1. 番号付きリスト
    2. 番号付きリスト
  3. 番号付きリスト

表組み

表の区切りは、”|”を使う。記述例の2行目”|:–|–:|:–:|”は、必須です。”:”の位置がどちらによせるのかを表しています。

記述例

|header1|header2|header3|
|:--|--:|:--:|
|align left|align right|align center|
|a|b|c|

HTML変換後

<table>
<thead>
<tr>
  <th align="left">header1</th>
  <th align="right">header2</th>
  <th align="center">header3</th>
</tr>
</thead>
<tbody><tr>
  <td align="left">align left</td>
  <td align="right">align right</td>
  <td align="center">align center</td>
</tr>
<tr>
  <td align="left">a</td>
  <td align="right">b</td>
  <td align="center">c</td>
</tr>
</tbody></table>

表示例

header1 header2 header3
align left align right align center
a b c
Markdown ブログ効率
こちらの記事もおすすめ！