【ブログ執筆でも重宝】Markdown記法を使えるようになろう!

はじめに

今回は、Markdown記法と呼ばれる文章形式の書き方について解説していきたい思います。
これが使えるようになれば、レイアウトや文書の加工を簡単に作ることができるので大変便利です。

また、ブログを簡単に書くこともできます。
WordPressというブログを書くためのフリーソフト(CMS)は、このMarkdown記法に対応しています。

少し覚えることが多いかもしれませんがこの記事を読んで、マスターしましょう。
また、この記事ではMarkdownに対応した優良なエディターも紹介します。
自身のパソコンに入れて使ってみてください。

目次

Markdownとは

Markdown(マークダウン)とは、文章を記述するための軽量なMarkup(マークアップ)言語の1つです。
本来はプレーンテキスト形式で手軽に書いた文章からHTMLを作成するために開発されました。

本来、ブログに記事を書く際にはHTMLというマークアップ言語を使用して書く必要があります。

しかし、これを書くには、タイトルやボタンなどをそれぞれに対応したタグと呼ばれるものを使うため、学習するにはある程度の時間がかかります。
Markdown記法ではこれらのタグを#や- などの記号を使うことで、簡易的に表現します。

そこまで作りこむのは面倒だけど、ある程度のレイアウトで記事を構成したい場合は非常に便利です。
また、エンジニアやプログラミング勉強に非常に役立つサイトであるHatena BlogやQiita、GitHubはMarkdown形式に対応しているため、HTMLを使わずに簡易的に記事を書くことができます。

Markdownに対応しているサイトを以下に紹介しておきます。もちろん他にもたくさんあります。

Hatena Blog: https://hatenablog.com/

Qiita: https://qiita.com/

GitHub: https://github.co.jp/
特に自分のコードを紹介するREADMEでよく使います。

また、プログラミングの勉強をしているときにstack over flowやteratailなどの質問サイトを使うことがあるかもしれません。
その時の記述もMarkdown記法に対応しているため、Markdown記法を使うと表示が大変見やすくなり、質問の回答をもらいやすくなるというメリットもあります。

Markdownでのおすすめのエディター

Markdownで書いた文章を画面として表示させるには、対応したソフトを使う必要があります。
今回は非常に軽量で便利なフリーソフトであるTyporaを紹介したいと思います。

Typora

ここから自分の環境にあったソフトをダウンロードできます。

Typora: https://typora.io/

基本的にダウンロードをすれば使えるようなりますが、英語のソフトなので英語表記のままの場合があります。
そういった場合日本語に設定するには、右上にあるFileから → Preference → Languageで英語から日本語に変更すれば日本語で使えるようになります。

ここからは実際にMarkdownの書き方について説明してきたと思います。
このソフトを使って次の「Markdownの書き方」での例を、手を動かして練習してみてください。

Markdownの書き方

それではMarkdownの主要な書き方について説明していきます。

ここで全ては説明しきれませんが、紹介するものだけでもある程度のクオリティで記事が書けるようになると思います。
TyporaはMarkdownを書くと自動で表示例のように変換されます。

ソースコードを確認したい場合は、右下のの「ソースコード切り替えモード」押すと確認できます。

Typoraを使う人へ

これらの記法を知らなくても、Typoraの場合は多数のショートカットがあり自動でMarkdownを作成してくれます。

詳しくは右上の段落やフォーマットを見ていただくか、使い方をまとめてくれている記事がありますので、参考にしてください。

Mac版での使い方: Typoraが最強のMarkdown Editor

Windows版での使い方: Windows・Mac・Linuxで使えるマークダウンエディタ Typora

見出し: HTMLにおける<h1>や<h2>タグは#の数で表現

見出しは記事を書くときに必ず使います。
#を適当な数を並べて表現します。

記述例

# タイトル

## タイトル

### タイトル

表示例

タイトル

タイトル

タイトル

※ Markdownは記号を半角、文字と記号の隙間は半角スペースで1つ開けます。
これをきちんと書かないとMarkdownとして認識されないので注意してください。

箇条書き: – (ハイフン)で表現

記述例

- リスト
- リスト
- - リスト

表示例

  • リスト
  • リスト
    • リスト

リストを重ねたい場合は上記の記述のように、同じ記号を重ねていくことで表現できます。
他の箇所でも出てくるので覚えておいてください。

引用: >で表現

二重引用したい場合は先ほどと同様に記号を重ねることで表現できます。

記述例

> 引用できます
>
> 引用できます
>
> > 引用できます

表示例

引用できます

引用できます

引用できます

コードを書く場合: ` ` `で表現

Markdownの一つのメリットとして、コードを分かりやすく書くことができます。
Qiitaの記事を見るとコードが色付けされていて非常に見やすい構成なっていますが、それはこの形式で書かれているおかげです。

記述例

​```
function displayName() {
    console.log("Hello JavaScript");
}
​```

表示例

function displayName() {
    console.log("Hello JavaScript");
}

Typoraの場合はそれぞれの言語を“`pythonのように記述することで指定できます。
ただし、対応していないサイトもあるので注意してください。

リンク: URLを変換して表示

URLは基本的に長いものが多いので、そのまま記述すると無駄に文章を埋めてしまうかもしれません。
以下のような記述ですっきりと書くことができます。

記述例

[YOUTUBEへのリンクです!](https://www.youtube.com/?gl=JP&hl=ja)

表示例

YOUTUBEへのリンクです!

テーブル: 表をまとめる

ただ表を作るだけでなく、|:–|–:|:–:|などと記述することで表内の文字を特定の位置( : の位置が対応しています)に寄せることができます。

記述例

|タイトル1|タイトル2|タイトル3|
|:--|--:|:--:|
|左寄せ|右寄せ|中央寄せ|
|LEFT|RIGHT|CENTER|

表示例

タイトル1タイトル2タイトル3
左寄せ右寄せ中央寄せ
LEFTRIGHTCENTER

強調: イタリック体、太字などを表現

アンダーバーやアスタリスク、なみ線で変更したい文章を囲むことで表現できます。

記述例

_italic_体での表記1
*italic*体での表記2
**太字での表記**
~~消し線での表記~~

表示例

italic体での表記1
italic体での表記2
太字での表記
消し線での表記

水平線: 下線を引く

これは表示方法がさまざまあります。
アスタリスクやアンダーライン、ハイフンを3つ続けて記述すると表現できます。

記述例

***

___

---

表示例




画像: URLを指定することで表示

Microsoftのwordなどは直接画像を張り付けることができましたが、Markdownではそれはできません。
代わりに画像を表示させたい場合は!の後に画像のタイトルとその画像ファイルがあるアドレスを指定します。

記述例

![Trung Khanh](https://cdn.pixabay.com/photo/2019/05/03/13/59/afternoon-4175917_1280.jpg)

表示例

! [Trung Khanh](https://pixabay.com/ja/photos/search/trung khanh地区/)

自分の書いたブログに自分が作った画像をアップロードしたい場合は、その画像のアドレスを取得する必要があります。
取得方法はある程度であれば無料でできますので、1つ紹介しておきます。

Hatenaでは画像アップロード機能があり、毎月300MBまでであれば無料でアップロードできます。

Hatena Fotolife: http://f.hatena.ne.jp/guide

まとめ

今回はMarkdown記法とは何かから、おすすめのエディタと実際の書き方について説明しました。
初心者の方には覚えることが多くて大変かもしれませんが、使えるようになればかなり楽に文章を書くことができます。

ぜひ実際に使って、文章を書く練習をしてみてください。


おすすめ記事