eyecatch

作成日:2020-05-23 / 更新日:2020-05-23

パソコンを使ってブログの記事を書いている人や仕事でも多くの方がパソコンで企画書や議事録などを作成している人は多いと思います。

なるべくなら短時間でより多くの内容を書きたいですよね。そんな時にMarkdownは非常に役に立つツールになります。

# Markdownとは

MarkdownのmarkとはHTMLで表記した場合のタグを指します。

HTMLタグは以下のような<>で囲まれたもののことです。

<H1>おはよう</H1>

Mark(HTMLタグ)がdownするというところから、想像できるかもしれませんが、Markdownではこれを簡単に書くことができます。 上記と同じ内容を書くとすれば、こんな感じです。

# おはよう

<>を書こうとすると、それなりに時間がかかりますし、一つ一つ設定し、閉じていかなければならず、大変です。

とはいえ、何もマークされない文章はただ見づらいだけ。

文章を見やすくしようと思えば一定程度のマークは必要になってきます。 文章を書いている中で表題があったり、強調語句がわかると見やすいですよね。

簡単にマークしながらも、なるべく早く文章を書いていく。 これがMarkdownの特徴だと言えます。

# Markdownの利点

大きな特徴は以下のとおりかと思います。

# 簡易的な表現でマークが可能

すべてのHTMLタグを覚えているわけではありませんので、タグを毎回調べるのもかなりの苦労です。 markdownなら簡易的なので、覚えるのも早いです。

# 文章の記載スピード向上に寄与

簡易的なマークならではですが、キーボードからほぼ手を放すことなく、文章を書き続けられます。 WordPressなどでは、マークする際はマウスにて操作することも多いと思いますが、結構時間とられますよね。 パソコンを触っている時間が長い人ほど、キーボードからなるべく手を離さないようにしていると思います。

# 文章の記載の場所を選ばない

マークをつけながらの場合は結構書く場所を選ぶことも多いかと思います。 WordPressであれば、WordPressを開いて記事を書き始めないと、正しくマークしながらは書き進められません。 一方、markdownであれば、マークが簡易的なので、メモ帳などでも書くことができます。必要であれば、あとで少し加工などしますが、どこでも素早く書けることは大変便利です。

# Markdownの欠点

利点の裏返しではあると思いますが、残念ながら万能というわけではないです。

### 細かなマークには向いていない 簡易的にすべては表現できないので、細かな定義はありません。直接HTMLタグを書くことは可能なので、細かな定義は直接書いてしまいます。

### markdownの文章をジェネレートしないとHTMLにならない HTMLタグを使っているわけではないので、当たり前を言えば当たり前ですが、ジェネレートする必要はあります。 私は今、ブログで利用しているVuepressを使って、HTMLを作成しています。

Vuepressでのブログ作成

# Markdownの書き方(記法)

markdownの書き方をご紹介します。

# 見出し

#を使って表記します。#の数で見出しの大きさを表現します。

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

<H1> から <H6>の見出しになります。

出力例

# 見出し1

# 見出し2

# 見出し3

# 見出し4

# 見出し5
# 見出し6

# 段落

段落をわけにるには空行をいれます。

おはよう
ございます。

こんにちは。
出力例

おはよう ございます。

こんにちは。

# 改行

改行は行末で半角スペースを2つ以上入力します。

おはよう  ございます。  
こんにちは。
出力例

おはよう ございます。
こんにちは。

# 強調

強調したい文字を「*」で囲むとemタグとなり強調になります。 より強い強調は「**」でstrongタグになります。

*おはよう*ございます。  
**こんにちは。**
出力例

おはようございます。
こんにちは。

# リスト(箇条書き)

-または+または*と半角スペースで箇条書きリストになります。

以下*での例です。

* リスト1
* リスト2
  * ネスト1
  * ネスト2
* リスト3

ネストも可能です。

出力例
  • リスト1
  • リスト2
    • ネスト1
    • ネスト2
  • リスト3

# 番号付きリスト

数字の1.を使うと番号付きになります。

1. リスト1
1. リスト2
   1. ネスト1
   2. ネスト2
2. リスト3

番号は連番で振ってくれます

出力例
  1. リスト1
  2. リスト2
    1. ネスト1
    2. ネスト2
  3. リスト3

# 水平線

-または_または*を3つ並べると水平線(HRタグ)になります。

---
___
***
出力例


# 引用

引用表示は>と半角スペースで可能です。

> 引用1
> 引用2
>> 引用ネスト1
>> 引用ネスト2
>
> 引用3
出力例

引用1 引用2

引用ネスト1  引用ネスト2

引用3

# リンク

[文字列](URL)」の記述で変換できます。

[にちたの](http://nichitano.net)
出力例

にちたの

# 画像表示

リンクの前に!をつけると画像になります。

![ロゴ](http://nichitano.net/img/favicon.png)
出力例

ロゴ

# ソースコード

バッククォート3つで囲みます

```
  コード
```
出力例
  コード

#

表はちょっと面倒です。

| 表            | 項目1           | 項目2  |
| ------------- |:-------------:| -----:|
| 行1           | テスト表    | 行1項目2 |
| 行2           | テスト行1     | xxxx |
| 行3           | テスト行2      | yyyy |
出力例
項目1 項目2
行1 テスト表 行1項目2
行2 テスト行1 xxxx
行3 テスト行2 yyyy

# Markdown拡張機能

markdownには拡張する仕組みがあります。 Vuepressでは以下の拡張機能が元から入っています。

# 目次

これ結構便利です。

[[TOC]]
出力例

# カスタムコンテナ

ちょっと目立たせたい場合はかなり便利なコンテナです。

::: tip
役立つ情報のコンテナです。
:::

::: warning
警告を促すコンテナです。
:::

::: danger
危険を促すコンテナです。
:::

::: details
詳細記述できるコメント欄のようなものです。 IE / Edgeでは動かないらしい。
:::

出力例

TIP

役立つ情報のコンテナです。

WARNING

警告を促すコンテナです。

WARNING

危険を促すコンテナです。

DETAILS

詳細記述できるコメント欄のようなものです。 IE / Edgeでは動かないらしい。

# タイトルカスタムコンテナ

先ほどのカスタムコンテナのタイトルは変更できます。

::: danger xxxタイトル
危険な内容をここに記載します。
:::

::: details 詳細はこちらを見てね?
console.log('Hello, VuePress!')
:::

出力例

xxxタイトル

危険な内容をここに記載します。

詳細はこちらを見てね?

console.log('Hello, VuePress!')

# 絵文字

Vuepressでは絵文字も出せるようになっています。 出力できる絵文字リストはこちら

:tada:
出力例

🎉

# コードブロックの強調表示

VuePressはPrismを使用して、Markdownコードブロックの言語構文を色付き表示します
対象言語はこちら

``` js
export default {
  name: 'MyComponent',
  // ...
}
```
出力例
export default {
  name: 'MyComponent',
  // ...
}