Markdownは簡単にいうと、説明文書やレポートを作る際に、非常に簡単かつ便利で、誰が書いてもそこそこキレイに書けるテキスト＋ほんの少しの記号で書ける軽量言語です。

「Qiita」や「はてなブログ」などのブログではメインに使われ、「GitHub」や「Jupyter Notebook」などのツールでは説明文を書く用途としてサブとして使われ、「Slack」や「Teams」などのチャットアプリでもオプションとして使用することが可能と、かなり広範囲に渡って活用されています。

ポイント

✔ テキスト + ほんの少しの記号

例えば見出しなら # 、引用なら > 、リストなら - というように、直感的にも分かりやすい記号を文章に混ぜて書くだけなので、学習コストが低いです。サービスにもよりますが、画像貼り付けに関しては記号ではなく「パワポ」のようにコピペ貼り付けも可能です。

✔ レポート等が効率良く書ける

「Word」や「パワポ」のようにページを気にしながら書く必要がなく、ずっと縦長に書けます。また「Excel」のようなメニューを使いこなす必要がなく、テキストのみなので動作が軽いです。結果的にあまりマウスを動かすことなくキーボード打ち込みメインで書けるため効率が良いです。

✔ 誰が書いてもそこそこキレイ

Markdownではフォントやサイズ・色などの変更は基本的にはできません。つまり、装飾や調整は不要ということです。元々、洗練されたデザインが適用されているため、誰が書いてもそこそこキレイな状態で仕上がります。

学べること

• Markdown記法
• HackMDの使い方
• 効率的なメモの取り方

部品購入

• 不要

必要なスキル

• PCの基本操作

HackMDとは

• 無料で使えるクラウドサービス
• ブラウザのみで使いやすい
• 公開しない文書も無制限に作成可能
• 画像貼り付けが楽
• YouTube埋め込みが可能

Markdownを書くためのツールは非常にたくさんあります。インストールしてローカルPCで使うアプリだけでなく、インストール不要でクラウド上で使うアプリもありますし、無料や有料などもあります。今回お勧めする「HackMD」はブラウザからクラウド上で使えるツールです。UI（ユーザーインターフェース）が非常に良くとても使いやすく、公開しないクローズドな文書であっても個人利用であれば制限なく無料で使えます。画像貼り付けはコピペが可能で、YouTube埋め込みも簡単にできます

ログイン

では早速HackMDを使ってみましょう！

完全版

ではここからHackMDを使ってMarkdownを実践しながら学んでゆきます。

ハンズオン

HackMDの左側の編集ページに、以下の内容をコピー＆ペーストしてみてください。ご自分で好きな文章を追加してもらってもOKです。

# Markdownの練習
これはMarkdownの練習です

## 見出し2
見出し２はこれくらいの大きさです

### 見出し３
見出し３はこんな感じ

このように表示されます。

半角のハッシュマーク#であることと、#とテキストの間には必ず「半角スペース」を入れることが重要です！
#は######と６個まで連続で使えますが、使い過ぎても分かりにくいため###までの見出しが良いです。

見出しのありがちミス

この画像のようにスペースが無かったり、全角スペースだったり、#が全角だったりすると、プレビュー画面ではMarkdownと認識されずそのまま出てきてしまいます。

初心者の方はよくやりがちなのでご注意ください。
右のプレビュー画面だけでなく、左の編集画面でもMarkdownと認識されていない場合は、文字に色が付いていないため判別できるかと思います。

Markdownは文書の中にプログラミングで使うソースコードを埋め込むことが得意です

ハンズオン

バッククォート ` という記号を３つ並べ、その間にコードを書くことでソースコードとして認識されます。似ていますが、シングルクォート ' ではないのでご注意ください。日本語キーボードであれば、Shift + @ キーでバッククォートを打ち込めます。
なお、最初のバッククォート３つの後に、例えばpythonなどプログラミング言語名を書くことをお勧めします。理由はその言語に応じてソースコードに色を付けてくれるためです。
以下をコピー＆ペーストしてみてください。プログラミングが得意な方は、ご自分でコードを書いてみて下さい。

```python  
import time  

print("This is test")  
num = 10 #set sleep time[ms]  
time.sleep(num)  
print("end")  
```

上記のプログラミングコードの意味は理解できなくて問題ありません。
このようにシンタックスハイライトと呼ばれる色鮮やかな表示になります

なお、HackMDの場合はプログラミング言語名の後に = を書くことによって行番号も表示されます。
これはMarkdown共通ではないのでご注意ください。

HackMDの便利な機能

バッククォートを入力するのは結構面倒だったりします。
これはHackMD特有の機能ですが、編集画面に便利なアイコンがあります。このアイコンをクリックするとバッククォート3つのペアがカーソルの位置に入力されます。

また、先にコードを打ち込んでから、コードを全選択した状態でこのアイコンをクリックすることも可能です
ちなみにHアイコンクリックで見出しも入力可能ですが、見出しは直接#記号をキーボードで打った方が早いです。「バッククォート3つのペア」のように面倒な記号の場合のみ活用するなど使い分けると良いと思います。

注意点

Markdownは画像も表示できます。HackMDであれば簡単にできます。

通常、Markdownで画像表示を行う場合は、サーバーに画像をアップロードして、そのファイル名を指定した簡単なコードを書くのが一般的です。HackMDはこの方法ももちろんできますが、別の非常に便利な方法がありますのでご紹介します。

ハンズオン

２ステップでとても簡単にできます。 スクリーンショットを撮って、HackMDに貼り付けるだけです。まるでパワポやkeynoteに貼り付けるのと似たような感覚でできてしまいます。
以下の動画をご覧ください。※音声はありません

前半は適当なWebページからスクリーンショットを撮っています。後半はHackMDページに戻って「貼り付け」しているだけです。もの凄い簡単ですよね！
ちなみにスクリーンショットは以下のキーボード入力でできます。

• Windows10の場合※：Windows + Shift + S 後にマウス範囲選択
• Macの場合：command + shift + control + 4 後にマウス範囲選択

※バージョンが古い場合、このコマンドは使えませんのでSnipping Tool等を活用してください

皆さんもぜひやってみて下さい。

解説

ユーザー側は「貼り付け」しているだけですが、HackMD側の動きとしては、貼り付けた画像をサーバーにアップロードし、そのURLを指定したMarkdownコードを作成しています。
編集ページの方を見ると以下のようなコードが自動的に作成されていると思います。XXXXXXXはIDです。

![](https://i.imgur.com/XXXXXXX.png)

通常のMarkdownでは、画像をアップロードした後に上記のコードを打ち込む必要がありますが、HackMDでは超簡単にできることが理解できたかと思います。
ただし、パワポなどと異なり、貼り付けた画像に対しサイズ変更やトリミングなど編集することはできませんので、キャプチャ時に余白を含めた画像サイズを考慮してください。

注意点

最初にも書きましたが、画像は基本的にオープンになっても良いモノだけを貼り付けて下さい。
無料プランの場合、HackMD文書から画像を消すことはできても、サーバーから画像を消すことができません。
基本的に画像のURLが知られなければ見られることはないですが、IDをランダムに入力し画像が見られてしまう可能性はあります。

Markdownでのリンク記法です。

通常のMarkdownでは、コードを書く必要がありますが、HackMDではURLを書くだけで自動的にリンク付きになります。この機能は最近のサービスだと当たり前になってきているので、珍しさは感じないかと思います。

ハンズオン

HackMDの編集ページに以下のURLを貼り付けてみて下さい。別のURLでもいいです。

https://monomonotech.jp/kurage/

プレビューページのURLをクリックすると、そのURL先のページが表示されます。

備考

ちなみに通常のMarkdownでは以下のように書きます

[https://monomonotech.jp/kurage/](https://monomonotech.jp/kurage/)

なお [ ]内の文字列は任意に変更できます

[クラゲのページ](https://monomonotech.jp/kurage/)

ただしHackMDで、ささっと簡易的に書きたい場合は、記号は使わず以下のように普通に書くだけでも十分です。

クラゲのページ
https://monomonotech.jp/kurage/

リストは箇条書きのことです。普通に ・ 記号で書くよりもキレイに表示されます。

ハンズオン

リストはハイフン-またはアスタリスク*で記述しますが、ここではハイフンで統一します。
HackMDの左側の編集ページに、以下の内容をコピー＆ペーストしてみてください。ご自分で好きな文字列を追加してもらってもOKです。

これまで学んだ内容

- 見出し
- ソースコード
- 画像
- リンク

このように、キレイな点と少しスペースを空けて箇条書きが表示されます。

注意点

見出しのときと同じです。
スペースが無かったり、全角スペースだったり、-が全角だったりすると、プレビュー画面ではMarkdownと認識されずそのまま出てきてしまいます。

Markdownの引用記号はメールなどでも良く使われているので分かりやすいと思います。

ハンズオン

引用記号は、不等号の大なり記号>を使います。
HackMDの編集ページに以下のURLを貼り付けてみて下さい。文章を変えても構いません。

>Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

Wikipediaより引用

このように、引用箇所が分かるように表示されます。

注意点

見出しやリストと異なり、半角スペースは無くても良いです。
引用文の終わりの後は１行の空白行を設けて下さい。これを設けないと、その次も引用文と見なされてしまいます。

Markdownは基本的に動画埋め込みはできません。しかしHackMDはYouTubeの埋め込みが簡単にできます！

完全版

直接Markdownとは関係ありませんが、自分の動画を貼り付けられるようにYouTubeのアップロード方法を学びます。

完全版

HackMDの閲覧権限、編集権限、公開について説明します。
今回は完成したレポートを特定の人だけに見てもらうためのやり方です。

完全版

まとめ

これで、入門レベルのMarkdwonは終わりです。 他にもMarkdownで使える技がありますが、今までの内容を使うだけでかなり見栄えの良いレポートがサクッとできます。

パワポやkeynoteは見せることに重点を置いてますが、Markdownは効率良くレポートを書けることに重点を置いています。それでいて、そこそこキレイに仕上がるというのが魅力的な点です。
なので、細かい編集はできません。
例えば、一部の文字を大きくしたり、色を付けたくなる人もいるかと思います。
HTMLタグというものを使えばできますが、はっきり言ってダサくなるのでやめましょう！

物足りないと感じた方のために、他のMarkdownの技をご紹介します

完全版

「ものものテックQA掲示板」と「コンテンツの変更履歴」です。

完全版