はじめてのmarkdown ～ VSCodeで入門する ～ 文書作成 基礎編

# 1. はじめに
markdownは、簡易文書の作成効率化に極めて効果的です。 開発、製造、などに限らず、行政でも効果的だろうと思います。超初心者向けmarkdown入門として、VSCodeを使い簡易復命書を作成を例に挙げます。
インストールが未だの方は、[インストール編](https://qiita.com/dzonesasaki/items/c56537df4f114f71dfa7)をご覧下さい。

（補足）
markdownとは、組版のための記述言語(マークアップ言語(markup)というコンピュータ用の分野)で、webページを見る時に使うHTMLという記述方法に似た役割を果たします。 "ホームページ"を見た時に、右クリックすると「ページのソースを表示」などのメニューが出ます。これをクリックすると、暗号みたいなのがずらずら並びます。しかし良く見ると、こんな＜ ＞かっこでくくられた文字が並んでいるはずです。これがmarkupという形式のHTMLという言語です。
実は、この記号を並べてブラウザに読み込ませることで、"ワード"を購入しなくても、綺麗な文章を作ることができるのです。
そして、このHTMLという記述方法よりも簡単にしたのが、markdownという言語です。（ただし、ブラウザではmarkdownが変換できないので、VSCode（ブイ エス コード）というフリーのソフトウエアなどが必要です）

# 2. 文書を作ってみましょう

「習うより慣れろ」 ということで、次を入力してみてください。（コピーペーストで良いです）
ファイル名は、 rep210508v01.md などとして保存してください。最後の .md が重要です（拡張子といいます）。

```markdown
<style>
 body {
	font-family: "TakaoPGothic","Takao P ゴシック",-apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
}
</style>
![](stampArea.png)
<center>
簡易復命
</center>
<Div Align="right"> 
令和3年5月8日<BR>
 業務効率改善推進課 推進班 副主幹 効率 大事
 </Div>

令和3年5月8日 15：00より ＊＊で行われた＊＊＊会議に参加したので、以下の通り復命します。

### 参加者（敬称略）
- ＊＊＊＊ ＊＊＊ ＊＊＊＊＊
- ＊＊＊＊ ＊＊＊ ＊＊＊＊＊
- 推進課 副主幹 効率 大事 （記）

### 概要
1. ＊＊＊＊を＊月＊日に実施する
2. ＊＊＊の準備を＊月＊日までに実施
3. 参加企業の募集を行う、
	- 募集期間が短い事から、＊社程度は直接依頼し集める

（添付資料参照）

### 次回について
＊月＊日に、＊＊＊＊にて、進捗会議を行う。課長も出席して欲しいとのこと。
```

次に、次の画像を右クリックしてダウンロードし、stampArea.pngというファイル名で、文書と同じフォルダに入れて置いてください。
（もし、オフラインで実施する場合は、事前にこのページと、この画像をダウンロードして、作業するＰＣに移して下さい）

![stampArea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/506c5ba9-1d8c-811b-a8f1-2b6064549a98.png)

この文章の上で右クリックして、 Markdown PDF:Export (pdf ) を選びます。
保存したフォルダに、PDF化されたファイルがありますので、開きます。

![md01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/34bd805b-619b-5fe6-85aa-315e943fe76d.png)

次のようになっていればOKです。

![md02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/313169ab-6d1f-01e8-c946-d1a653a43c3a.png)

お気づきかと思いますが、pdfだけでなく、htmlなども作成可能です。

# 3. 説明

今回の例題で使った、markdown文法について簡単に説明します。
詳しい文法については、「[markdown 文法](https://www.google.com/search?q=markdown+%E6%96%87%E6%B3%95)」で検索すると良いでしょう。

## 3.1. 見出し記号（＃）

まず覚えたいのが、見出し記号``` # ``` です。これを使うだけで、文書の印象が変化します。
例えば、この章のタイトルは「3. 説明」と書いていますが、少し大きいフォントで表示されていますし、この節は、## 「3.1. 見出し記号（＃）」と書いてますが、やや大きいフォントで表示されています。これが、見出し という機能です。 (実は、"ワード"や"一太郎"でも、見出し機能はありますが、みなさんは、利用したことがありますか？)
使い方は簡単です。 行頭に半角文字のシャープ ``` # ``` と半角のスペースを書いて、何か言葉を書きます。たったこれだけ。

最も大きい見出しは、シャープ1つ ``` # ``` 。 その次に大きいのは シャープ2つ ``` ## ``` です。 同様にシャープの数を増やすと、小さくなっていきます。

今回の例題の文書では、シャープを3つにしています。これは、見出し1では、大きすぎるので、見出し3ぐらいに抑えてます。高度な方法になると、この見出し自体の大きさを細かく定義しますが、今回は基礎ですので、見出しレベルで大きさを変更してます。
なお、この見出しの調節は、後に説明するプレビューで行うと楽です。


## 3.2. 箇条書き記号(-)

スライドは、大きな見出しと、箇条書きとの、2つがあれば、ほとんど体裁として整います。
箇条書きは、行頭に半角文字のマイナス ```- ```と半角のスペースを書いて、何か言葉を書きます。たったこれだけです。 

```
- 項目1
- 項目2
  - 項目2．1
  - 項目2．2
- 項目3
```

この例を見て判るように、行頭に2つ位のスペースを入れると、1レベル下がった箇条書きができます。項目2の中に、入れ子状態で更に箇条書きができます。

インストールで、 markdown all in oneを入れてあれば、この箇条書きをすると、次のマイナス記号が現れます。タブキー(Tabキー）を押すと、1レベル下げることができます。バックスペースを押すと、レベルを元に戻せます。

## 3.3. 数字の箇条書き

箇条書きには、2種類あり、丸の他に、数字も箇条書きで利用できます。半角の数字の後にピリオドとスペース```1. ```と書いて、何か言葉を書きます。たったこれだけです。

![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/de19b93f-980c-eab4-68cb-2ad1a7d49441.png)

インストールで、 markdown all in oneを入れてあれば、この箇条書きをすると、次の3.がが現れます。

## 3.4. 右寄せ

文字を右寄せするには ```<Div Align="right">```と ```</Div>```の間に文字を入れます。
この記号は、かな漢字変換システムに辞書登録しましょう。 例えば、

- 入力文字： みぎ
- 変換文字：```<Div Align="right">  </Div>```

のようにです。
## 3.5. センタリング

文字を中央に配置するには、 ```<center>```と```</center>```の間に文字を入れます。
この記号は、かな漢字変換システムに辞書登録しましょう。 例えば、

- 入力文字： センタリング
- 変換文字：```<center>  </center>```

のようにです。

## 3.6. 図の挿入

文中に図を入れるには、 ```![](ファイル名)``` という形にします。上の復命書では、```![](stampArea.png)```と記述して、検印欄の画像ファイルを呼び出しています。

この記号は、かな漢字変換システムに辞書登録しましょう。 例えば、

- 入力文字： ず
- 変換文字：```![]( )```

のようにです。図の挿入については、お勧めのもう一つがあります。

- 入力文字： ず
- 変換文字：```<img src=" " width="50%" style="transform:rotate(0deg);">```

です。```src="```の後にファイル名を記載します。これは画像のサイズを変更できたり、回転できたりします。


## 3.7. フォント指定のおまじない

フォント指定のおまじないを冒頭で行います。何を書いているのか判らないと思いますが、これは、毎回、そのままコピーしてペーストするのが良いです。

```markdown
<style>
 body {
	font-family: "TakaoPGothic","Takao P ゴシック",-apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
}
</style>
```

## 3.8. 文書区切り

切りの線を記述するには、マイナスを3つ繋げます```---```
ですが、報告書などではあまり使うことが無いでしょう。

# 4. VSCodeでの作業方法

markdownでの記述は、"ワード"や"一太郎"のように、入力している文字がそのまま印刷される表示にはなっていません。
しかし、VSCodeでは、うまい仕掛けがあります。それが、プレビューです。
右上の 虫めがねが付いた扉みたいなアイコンをクリックします。

![usage01a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/e5c176d9-0432-3868-2cb3-5cea7565cf31.png)

すると、入力中の画面が左側、印刷イメージが右側に表示されます。
しかも、入力中に反映されるので、前章の見出しのレベル調整も苦になりません。

![usage02a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/74b002fc-bc5f-4c8e-721a-62e847aed309.png)


これが、markdown文法で文書作成の時にVSCodeを使う理由です。

これが、"ワード"で見出しを変えたい場合は、文字を選択して、見出しのプルダウンをクリックして、選択します。
つまり、キーボードから手が離れて、マウスでの操作をする必要があるのです。ショートカットキーを覚えている方も居るかもしれませんが、それでも、シャープを行頭に数個付けるだけよりは、作業が多いと思います。

このような点から、文書の作成スピードが大幅に異なります。
そして、覚えるべき記号は、見出しの ```#```、箇条書きの ```- ```と```1. ```の3種類だけです。
あとは、必要に応じて、かな漢字変換システムに登録してしまえば良いのです。

文章の作成スピードが異なる事に気付いたかたは、センスあると思います。

# 5. おわりに
今回は、手軽に文書を作成できる事例を挙げて、markdownの文法の説明をしました。実はもっと機能があるのですが、たぶん、これだけで十分文書が作成できると思います。業務効率改善を考えている方は、ぜひ、利用して頂きたいと思います。