すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

お役立ち情報

【お役立ち情報】マークダウン記法をマスターしよう!

ぴっかちゃん
ぴっかちゃん

マークアップ記法とはマークアップ言語のひとつです。HTMLと比べてはるかに簡潔に書くことができます。

マークダウン記法の例
1
2
# 見出し1
 **太字**

マークダウン記法とは?

マークダウン記法はHTMLなどのマークアップ言語を簡潔に書けるように開発された記法です。
ファイルの拡張子はmdです。

特徴として下記のようなものがあります。

  • 非常に簡潔に書ける
  • アプリなどが不要
  • HTMLのタグより覚えやすい

railsでアプリを作成するとREADMEというファイルが自動作成されますが、このファイルは拡張子がmdなのでマークダウンで記述します。
またgithubでプルリクエストやコメント、issueを投稿する際にもマークダウン記法で書くことができます。
他にも有名なQiitaというサービスで記事を書く際にもマークダウンが使われています。

マークダウン記法一覧表

この章ではHTMLで使用するタグはマークダウンだとどのように記述するかを解説していきます。
※実際の表示はcssによって変化するのでご注意ください。

以下は、マークダウン一覧になります。

種類 書き方
見出し # テキスト
リンク [表示する文字](URL)
テーブル |中央|左寄せ|右寄せ|
|:----:|:----|----:|
|データセル1|データセル2|データセル3|
|データセル4|データセル5|データセル6|
段落 何も書かない
太字 **テキスト**
斜体 *テキスト*
打ち消し線 ~~テキスト~~
番号なしリスト - 番号なし1
- 番号なし2

もしくは

* 番号なし1
* 番号なし2
番号ありリスト 1. 番号あり
2. 番号あり
画像 ![代替テキスト](画像URL)
改行 文末に半角スペースを2個
水平線 ***
引用 >テキスト
コードブロック ```言語名
表示するコード
```
インラインコード `表示するコード`

それでは1つ1つ解説していきます。

見出し

文章の見出しを作成するタグです。

マークダウン | 見出し
1
2
3
4
5
# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5

上の記述は下記のHTMLになります。

変換されるhtml | 見出し
1
2
3
4
5
<h1>見出しh1</h1>
<h2>見出しh2</h2>
<h3>見出しh3</h3>
<h4>見出しh4</h4>
<h5>見出しh5</h5>

実際の表示です。
見出し

リンク

文章にハイパーリンクを定義するタグです。

マークダウン | リンク
1
2
[表示する文字](URL)
[pikawaka](https://pikawaka.com/)

上の記述は下記のHTMLになります。

変換されるhtml | リンク
1
<a href="https://pikawaka.com/">pikawaka</a>

実際の表示です。

リンク

テーブル

表を作成するタグです。
一番上に見出しを定義するヘッドセルを書きます。
次の行に区切りとなる部分を書きます。
この時セル内の水平方向の位置を指定することができます。
:--:とすると中央寄せに、:---とすると左寄せに、---:とすると右寄せにできます。
---の部分は何文字でも構いません。

その下にデータを定義するデータセルを書きます。

マークダウン | テーブル
1
2
3
4
|中央|左寄せ|右寄せ|
|:----:|:----|----:|
|データセル1|データセル2|データセル3|
|データセル4|データセル5|データセル6|

上の記述は下記のHTMLになります。

変換されるhtml | テーブル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
  <thead>
    <tr>
      <th style="text-align: center">中央</th>
      <th style="text-align: left">左寄せ</th>
      <th style="text-align: right">右寄せ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: center">データセル1</td>
      <td style="text-align: left">データセル2</td>
      <td style="text-align: right">データセル3</td>
    </tr>
    <tr>
      <td style="text-align: center">データセル4</td>
      <td style="text-align: left">データセル5</td>
      <td style="text-align: right">データセル6</td>
    </tr>
  </tbody>
</table>

実際の表示です。
テーブル

段落

文章が入るpタグを作成できます。
マークダウン記法では、下記のように何も書かなくても段落として変換されます。

マークダウン | 段落
1
2
3
4
私の名前はpikawakaです。

複数行も定義できます。
その際はこのように改行をして記述します。

上の記述は下記のHTMLになります。

変換されるhtml | 段落
1
2
3
4
<p>私の名前はpikawakaです。</p>

<p>複数行も定義できます。
その際はこのように改行をして記述します。</p>

太字

強調を意味する太字にできます。
強調したい文字を**で囲みます。

マークダウン | 太字
1
私の名前は**pikawaka**です。

上の記述は下記のHTMLになります。

変換されるhtml | 太字
1
<p>私の名前は<strong>pikawaka</strong>です。</p>

実際の表示です。

太字

斜体

文字を斜めに表示できるemタグを作成します。
斜体にしたい文字を*で囲みます。

マークダウン | 斜体
1
私の名前は*pikawaka*です。

上の記述は下記のHTMLになります。

変換されるhtml | 斜体
1
<p>私の名前は<em>pikawaka</em>です。</p>

実際の表示です。

斜体

打ち消し線

打ち消し線を表示させます。
打ち消したい文字を~~で囲みます。

マークダウン | 打ち消し線
1
~~pikawaka~~

上の記述は下記のHTMLになります。

変換されるhtml | 打ち消し線
1
<del>pikawaka</del>

実際の表示です。

打ち消し線

番号なしリスト

番号なしのリストを作成します。
インデントをつけることにより入れ子構造にできます。

マークダウン | 番号なしリスト
1
2
3
4
5
6
7
- キャベツ
- にんじん
- 豆腐
- 調味料
  - しょうゆ
  -  - みりん

もしくは下記のような記述でもリストを作成できます。

マークダウン | 番号なしリスト
1
2
3
4
5
6
7
* キャベツ
* にんじん
* 豆腐
* 調味料
  * しょうゆ
  *  * みりん

上の記述は下記のHTMLになります。

変換されるhtml | 番号なしリスト
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
  <li>キャベツ</li>
  <li>にんじん</li>
  <li>豆腐</li>
  <li>調味料
    <ul>
      <li>しょうゆ</li>
      <li></li>
      <li>みりん</li>
    </ul>
  </li>
</ul>

実際の表示です。
番号なしリスト

番号付きリスト

番号付きのリストを作成します。
インデントをつけることにより入れ子構造にできます。
その際は連番で入力しても1から表示されます。

マークダウン | 番号付きリスト
1
2
3
4
5
6
7
1. フライパンに油をしく
2. 野菜をいためる
3. 調味料を入れる
  4. 酒を大さじ1入れる
  5. しょうゆを大さじ1入れる
  6. 砂糖を小さじ1入れる
7. 肉をいためる

上の記述は下記のHTMLになります。

変換されるhtml | 番号付きリスト
1
2
3
4
5
6
7
8
9
10
11
12
<ol>
  <li>フライパンに油をしく</li>
  <li>野菜をいためる</li>
  <li>調味料を入れる
    <ol>
      <li>酒を大さじ1入れる</li>
      <li>しょうゆを大さじ1入れる</li>
      <li>砂糖を小さじ1入れる</li>
    </ol>
  </li>
  <li>肉をいためる</li>
</ol>

実際の表示です。

番号付きリスト

画像

画像を表示させるimgタグを作成します。

マークダウン | 画像
1
2
3
![代替テキスト](画像URL)

![ぴっかちゃん](https://pikawaka.com/packs/media/images/chara-right-26a313f496bb7605d29ef9aa9f44b4b5.png)

上の記述は下記のHTMLになります。

変換されるhtml | 画像
1
<p><img src="https://pikawaka.com/packs/media/images/chara-right-26a313f496bb7605d29ef9aa9f44b4b5.png" alt="ぴっかちゃん"></p>

実際の表示です。

ぴっかちゃん

改行

文章を整えるため、行を改めたいときの記述です。
文末に半角スペースを2個入れることにより改行タグになります。(以下のコードの「こんにちは。」の後に半角スペースを2個入っています。

マークダウン | 改行
1
2
こんにちは。  
私はぴっかちゃんです。

上の記述は下記のHTMLになります。

変換されるhtml | 改行
1
2
<p>こんにちは。<br><br>
私はぴっかちゃんです。</p>

実際の表示です。

改行

水平線

1本の横線を表示させる水平線の定義です。

マークダウン | 水平線
1
2
3
こんにちは。
***
私はぴっかちゃんです。

上の記述は下記のHTMLになります。

変換されるhtml | 水平線
1
2
3
<p>こんにちは。</p>
<hr>
<p>私はぴっかちゃんです。</p>

実際の表示です。

水平線

引用

引用文であることをしめすための引用の定義です。

マークダウン | 引用
1
2
3
>あなたの名前は?

ぴっかちゃんです。

上の記述は下記のHTMLになります。

変換されるhtml | 引用
1
2
3
4
5
<blockquote>
  <p>あなたの名前は?</p>
</blockquote>

<p>ぴっかちゃんです。</p>

実際の表示です。

引用

コードブロック

プログラミングのコードを見やすく表示するときの定義です。
ブロック要素としてひとつの箱の中に表示されます。
cssを設定していれば言語名ごとに色の表示を変えられたりします。

```言語名
表示するコード
```

実際の表示です。

コードブロック

インラインコード

プログラミングのコードを見やすく表示するときの定義です。
インライン要素として文章の中に表示されます。

マークダウン | インラインコード
1
nameにpikawakaを代入するときは`name = "pikawaka"`と記述します。

上の記述は下記のHTMLになります。

変換されるhtml | インラインコード
1
<p>nameにpikawakaを代入するときは<code>name = "pikawaka"</code>と記述します。</p>

実際の表示です。

インラインコード

Visual Studio Codeでプレビューしよう

テキストエディタによってはマークダウンで書いたファイルをプレビューしながら編集する機能がついています。
今回はVisual Studio Codeでのプレビューの仕方をご紹介します。

拡張子がmdのファイルの編集画面でcommandキー + Kキーを同時に押します。
その後、キーを離しVキーを押すと右側にウィンドウが開き、マークダウンファイルのプレビューが表示されます。

プレビュー

実際の表示を確認できながら編集できるので、railsのREADMEファイルを編集するときなどに使用してみましょう。

この記事のまとめ

  • マークダウン記法とはマークアップ言語のひとつです。
  • HTMLよりはるかに簡潔に記述することができます。
  • READMEやQuitaなどでも使われます。

2

わかった!