GitHubのREADME.mdの書き方――マークダウン記法を使いこなそう

GitHub README.md マークダウン記法 イメージ画像

GitHubでは、README.mdというファイルを作成することでソースの解説を作ることができます。

.mdファイルはマークダウン記法を使って中身を記述します。

「マークダウンって使ったことないからどうやって書けばいいかわからないよ…」

そんなあなたは、この記事でマークダウン記法について学んでみましょう。

マークダウン記法が使えると、以下のような良いことがあります。

  • GitHubのREADME.mdを効果的に書けてより内容をアピールできる!
  • Qiitaなどで技術記事が書ける!
  • WordPressでも効率的に記事が作成できる!

ぜひ、最後までお付き合いください。

山田ねこ

現役システムエンジニアの山田ねこが解説します!


GitHubのアカウントをまだ作成していない人は、先に次の記事をご確認ください。

目次

Markdown(マークダウンとは)

マークダウンは文章の書き方の1種です。

マークダウンの主な特徴として次の3つがあげられます。

  1. 手軽に文章構造を明示できること
  2. HTMLと比較して簡単で覚えやすいこと
  3. 読み書きに特別なアプリを必要としないこと

参考元:Markdownとは · 日本語Markdownユーザー会

マークダウンで記述されたファイルは.mdという拡張子で表されます。

このようなファイルをマークダウンファイルといいます。

GitHubのREADME.mdもマークダウンファイルです。

~.mdというファイルはマークダウン記法で書かれているんだね!

GitHubのREADME.md以外にも、技術記事投稿サイトのQiitaはマークダウン記法で記事を作成できます。

Qiita Markdown | Qiita Support

WordPressもマークダウン記法で入力をすると、リアルタイムに対応するブロックに変換されます。

マークダウン記法が使えると記事の作成が効率化できるね。

マークダウン記法まとめ

マークダウンで使用する記法を表にまとめました。

やりたいこと書き方
段落空白行
見出し# 見出し
箇条書き– リスト項目
番号付きリスト1. リスト項目
強調表示**強調**
取り消し線~~取り消し~~
引用> 引用文
リンク[表示文字](リンクURL)
画像表示![alt情報](画像URL “タイトル”)
テーブル|見出し|見出し|
|———|———|
|内容 |内容 |

マークダウンで書くときに都度見直してみてね。

ここから先でさらに具体的に説明します。

段落

段落1

段落2

markdown で段落分けをするには、段落分けしたい箇所に「空白行」を入れます。

見出し

# H1

## H2

### H3

#### H4

##### H5

###### H6

# の後に半角スペースをつけると見出し(Hタグ)になります。

# の数によって見出しのレベルが変わり、H1(#1つ)~ H6(#6つ)まで対応しています。

番号なしのリスト

- リスト項目
- リスト項目
- リスト項目
  - サブ項目

番号なしのリスト(箇条書き)は -の後ろに半角スペースをつけてから、リスト項目を記載します。

半角スペースを2つ入れてインデントすると、サブ項目として扱われます。

番号付きのリスト

1. リスト項目
2. リスト項目
   1. サブ項目

番号付きリストは 1.のように、「数字+ピリオド」の後ろに半角スペースをつけてから、リスト項目を記載します。

こちらもインデントをするとサブ項目として扱われます。

強調表示

**強調表示**

強調表示したい場合は**で強調表示したい文字を囲みます。

文字とアスタリスクの間にスペースは入れません。

HTMLの<strong>タグと同じです。

取り消し線

~~取り消し~~

文字に取り消し線を引きたい場合は~~で文字を囲みます。

こちらも文字と~の間にスペースは入れません。

HTMLの<s>タグと同じです。

引用文

> 引用文

引用文は、>+半角スペースを引用文の前に付けます。

リンク

[日本語 Markdown ユーザー会](https://www.markdown.jp/)

リンクは、表示したい文字を[]で囲み、URL を()で囲んで記述します。

画像の表示

![サンプル画像](sample.png "Sample.png")

画像を表示させたいときは、!を先頭に、altタグを[]で囲みます。

画像のパスは()で囲んで指定します。

()の中に""囲みでtitleタグを付けることができます。

テーブル

| 見出し1          | 見出し2           | 見出し3          |
| ---------------- | :----------------: | --------------: |
| 左揃えの項目      |   中央揃えの項目    |    右揃えの項目  |
| 左揃えの項目      |   中央揃えの項目    |    右揃えの項目  |
| LEFTLEFTLEFTLEFT | CENTERCENTERCENTER | RIGHTRIGHTRIGHT |

1 行目が見出し(<th>)になります。

2 行目で、文字の位置を指定します。マークダウンのテーブルでは列ごとに文字の位置の揃えを指定します。

文字の位置書き方
左揃え| — |
中央揃え| :—: |
右揃え| —: |

:(コロン)を書く位置がポイントだね!

マークダウンで記載できるのは、先頭行がヘッダー行となるテーブルのみです。

ヘッダーなしのテーブルや、先頭列がヘッダー列となるテーブルは書けません。

そのようなテーブルを書きたい場合は直接HTMLを書く必要があります。

目次