Markdown簡易マニュアル(自分用)

公開日:2019-05-19
最終更新:2019-05-19

Markdownはドキュメントで使用するためのHTMLの省略記法として考案されたもので、少ない記述でHTMLと同じような装飾ができるように作られています。

「少ない記述方法」「ドキュメント用」という点を優先させているため、全てのHTMLタグに対応しているわけではありません。しかし、ドキュメントでよく使う

  • 通常の文章(段落、改行)
  • 見出し
  • 箇条書き(「・」と「数字による順番付き」の双方)
  • Webサイトへのリンク
  • リンク・画像
  • 強調・斜体

といった項目を網羅しています。この解説では特によく使う

  1. 通常の文章(段落、改行)
  2. 強調
  3. 見出し
  4. 箇条書き
  5. リンク・画像

について記載します。

補足

基本的にMarkdownに触ったことのない初心者向けのドキュメントです。

ここでは紹介しない異なる記述方法もありますが、あまりバリエーションが多いと混乱する可能性があるため、個人的によく使用する記述方法に絞って記します。

1. 通常の文章(段落、改行)

何はともあれ最初は通常の文章を。

1-1. 段落

Markdownは基本的に改行で段落を判断しています。そのため、常に要素と要素の間に余計な改行を挟んで記述するのがベターです。

例えば、

通常の文章です。」  
」  
↑に改行を1つ挟むと、ここの文章は改行された2つ目の段落になります。  
  • 」 = 改行

として表記しています。

この場合、以下のように表示されます。


通常の文章です。

↑に改行を1つ挟むと、ここの文章は改行された2つ目の段落になります。


1-2. 改行

続いて、段落のように行間は挟みたくないが改行したい、という場合です。

この場合は、改行したい文章の末尾に半角スペース2つ+改行を付けると改行できます。

ここが1行目の文章です。□□」  
半角スペース2つ+改行を挟んだこの文章は改行された2行目の文章になります。  
  • □ = 半角スペース
  • 」 = 改行

として表記しています。表示は以下の通り。


ここが1行目の文章です。
半角スペース2つ+改行を挟んだこの文章は改行された2行目の文章になります。


上の文章は1-1.段落よりも行間が詰まっていると思います。

2. 強調

通常の文章を強調して太字にしたい場合は、**文章**アスタリスク2つでテキストを挟むと良いです。

通常文章はここで**ここは強調**、この先はまた通常の文章。  

上記の記述をすると、以下のようになります。


通常文章はここでここは強調、この先はまた通常の文章。


3. 見出し

見出しはHTMLで規定されている6段階の見出しに対応しています。

記述方法は簡単で、#(シャープ+半角スペース)となります。シャープの個数が多いほど、見出しは小さくなっていきます。

# 見出し(1: 最大)  

## 見出し(2: 2番目に大きい)  

### 見出し(3: 3番目に大きい)  

#### 見出し(1: 3番目に小さい)  

##### 見出し(5: 2番目に小さい)  

###### 見出し(6: 最小)  

と記述すると以下のようになります。


見出し(1: 最大)

見出し(2: 2番目に大きい)

見出し(3: 3番目に大きい)

見出し(1: 3番目に小さい)

見出し(5: 2番目に小さい)
見出し(6: 最小)

通常、1~3程度までしか使わないと思います。

4. 箇条書き

4-1. 箇条書き

ドキュメントで使用する箇条書き。見出しは#(シャープ)でしたが、箇条書きは-(ハイフン+スペース)で記述できます。

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

このような場合


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

このように箇条書きになります。

応用例: 入れ子

入れ子の箇条書きは、ハイフンの前にスペースを4つ入れてインデント(右寄せ)すると入れ子になります。

- 箇条書き1  
    - 入れ子箇条書き1-1  
    - 入れ子箇条書き1-2  
        - 入れ子箇条書き1-2-1  
- 箇条書き2  
- 箇条書き3  

  • 箇条書き1
    • 入れ子箇条書き1-1
    • 入れ子箇条書き1-2
      • 入れ子箇条書き1-2-1
  • 箇条書き2
  • 箇条書き3

ね、簡単でしょ?

4-2. 順番付き箇条書き

順番を付けた箇条書きは、1.(数字+ドット+スペース)で記述できます。

1. 順番付き箇条書き1  
2. 順番付き箇条書き2  
3. 順番付き箇条書き3  

表示例は以下。


  1. 順番付き箇条書き1
  2. 順番付き箇条書き2
  3. 順番付き箇条書き3

5. リンク・画像

リンクと画像は記述方法が似ているので一緒に紹介します。

5-1. リンク

リンクは[テキスト](URL)と、大かっこ[]で表示テキスト通常かっこ()でURLを記述します。

例えば、

[EwigLeere Lab2](https://labor.ewigleere.net/)  

と記述すると


EwigLeere Lab2


とリンクが貼れます。参考記事のURLや、Wiki内の別ページへのリンクなど、リンクをマスターするとただのtxtファイルよりも利便性が増したワンランク上のドキュメントが作成できると思います。

5-2. 画像

画像はリンクの記述の前に!を付ければ良いです。

![Laravel JP Conferenceのお弁当](https://pbs.twimg.com/media/DzfraycU8AAJZm4.jpg)  

[]の中に画像のリンクが切れていた場合などの代替テキストを、()の中に画像へのリンクを記述します。表示は以下のようになります。



ドキュメントに画像が付けられると見栄えが良くなりますね。


以上、Markdownの簡単な記述方法を記しました。

ぜひ、Markdownを活用して見やすいドキュメントを整備していきましょう!

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
アルム=バンドのQrunch

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする