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

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

1
2
# 見出し1
 **太字**

マークダウン記法とは？

リンクをコピーしました

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

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

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

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

マークダウン記法一覧表

リンクをコピーしました

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

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

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

見出し

リンクをコピーしました

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

1
2
3
4
5
# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5

上の記述は下記の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になります。

1
<a href="https://pikawaka.com/">pikawaka</a>

実際の表示です。

テーブル

リンクをコピーしました

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

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

1
2
3
4
|中央|左寄せ|右寄せ|
|:----:|:----|----:|
|データセル1|データセル2|データセル3|
|データセル4|データセル5|データセル6|

上の記述は下記の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になります。

1
2
3
4
<p>私の名前はpikawakaです。</p>

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

太字

リンクをコピーしました

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

1
私の名前は**pikawaka**です。

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

1
<p>私の名前は<strong>pikawaka</strong>です。</p>

実際の表示です。

斜体

リンクをコピーしました

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

1
私の名前は*pikawaka*です。

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

1
<p>私の名前は<em>pikawaka</em>です。</p>

実際の表示です。

打ち消し線

リンクをコピーしました

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

1
~~pikawaka~~

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

1
<del>pikawaka</del>

実際の表示です。

番号なしリスト

リンクをコピーしました

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

1
2
3
4
5
6
7
- キャベツ
- にんじん
- 豆腐
- 調味料
  - しょうゆ
  - 酒
  - みりん

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

1
2
3
4
5
6
7
* キャベツ
* にんじん
* 豆腐
* 調味料
  * しょうゆ
  * 酒
  * みりん

上の記述は下記の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になります。

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になります。

1
<p><img src="https://pikawaka.com/packs/media/images/chara-right-26a313f496bb7605d29ef9aa9f44b4b5.png" alt="ぴっかちゃん"></p>

実際の表示です。

改行

リンクをコピーしました

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

1
2
こんにちは。  
私はぴっかちゃんです。

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

1
2
<p>こんにちは。<br><br>
私はぴっかちゃんです。</p>

実際の表示です。

水平線

リンクをコピーしました

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

1
2
3
こんにちは。
***
私はぴっかちゃんです。

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

1
2
3
<p>こんにちは。</p>
<hr>
<p>私はぴっかちゃんです。</p>

実際の表示です。

引用

リンクをコピーしました

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

1
2
3
>あなたの名前は？

ぴっかちゃんです。

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

1
2
3
4
5
<blockquote>
  <p>あなたの名前は？</p>
</blockquote>

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

実際の表示です。

コードブロック

リンクをコピーしました

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

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

実際の表示です。

インラインコード

リンクをコピーしました

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

1
nameにpikawakaを代入するときは`name = "pikawaka"`と記述します。

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

1
<p>nameにpikawakaを代入するときは<code>name = "pikawaka"</code>と記述します。</p>

実際の表示です。

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

リンクをコピーしました

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

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

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

役に立ったらSHARE♪

• twitter
• facebook
• はてブ