注目キーワード

マークダウン記法とは？基礎知識や書き方をサンプルコードで解説

  • 2024.01.22
       
マークダウン記法とは？基礎知識や書き方をサンプルコードで解説
目次

マークダウン記法とは

マークダウン記法とは、テキスト構造を記述する「マークアップ言語」の一つです。マークアップ言語にはHTMLやXMLもあります。Webブラウザなどで表示することを想定した記法であり、マークダウンの記述ルールで記述した内容は変換ソフトを使えばHTML形式などに変換できます。ただ、その記法の簡易さから、そのままテキスト文書としても読みやすいという特徴があります。

マークダウン記法とHTMLとの違い

HTMLなどのマークアップ言語は「タグ」などを使用して元の文書を構造化や装飾をします。HTMLなどを使用した文書作成はある程度の経験や学習が必要となる一方で、マークダウン記法はマークアップ言語を簡単に使用できるよう作られた記法です。そのため、誰でも簡単に記述できます。

マークダウン記法の特徴

マークアップ言語を簡略化したもの

マークダウンはマークアップ言語を簡略化したものであることから、個人のメモや資料などをすぐに作成でき、業務効率の向上にもつながります。表現の種類も多いので慣れれば様々な文章の作成が可能です。

特殊なエディタが不要

また、マークダウンは読み書きに特殊なエディタを使用する必要はありません。そのため、ITエンジニアに限らずだれでも簡単にタイトルなどを使用してまとめられた文書を作成をすることができます。

ここまでのまとめ

  • マークアップ言語のひとつ
  • HTMLなどと比較して簡単に使用できる
  • 簡単に使用できるため、エンジニアに限らず装飾された文章の作成ができる

基本的なマークダウン記法

基本的なマークダウン記法について、いくつか紹介していきます。

見出し

行頭に「#」をつけると見出し表示ができます。#の数によって文字の大きさが変わります。

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

また、テキストの下に「=====」や「—–」を記述することで見出し1、見出し2と同じ表示になります。

見出し1と同じ表示
=====
見出し2と同じ表示
-----

リスト

行頭に「*」または「-」をつけることで番号なしのリストとして表示できます。

* テキスト

またはこちら
- テキスト

番号付きリスト

行頭に「1.」のように記述することで番号ありのリストを表示できます。

1. テキスト
1. テキスト
1. テキスト

入れ子リスト

- リスト1
  - リスト1-1
  - リスト1-2
- リスト2
  - リスト2-1
  - リスト2-2

段落

改段するためには段落の間に少なくとも1行、空白行を挿入します。

改行

行末に空白行を入れることで改行できます。

強調

対象の文字を「*」で囲むことでイタリック体や太字にできます。

normal
*italic*
**bold**

引用

行頭に「>」を記述することで品用表示ができます。

> テキスト

code記法

対象の文字を「`」で囲むことでcode記法になります。

`テキスト`

取り消し線

対象文字を2連続の「~（チルダ）」で囲むことで文字に取り消し線を引くことができます。

~~テキスト~~

リンク

左の「[]」内に表示させるテキスト、右の「()」内にURLを記述します。また、URLの後に半角スペースを空け、「”（ダブルクォート）」で囲んだ文字を書くと、それがタイトルになります。


[アンカーテキスト](URL "タイトル")
（例）解説ページは[こちら](URL)です

チェックボックス

「-[]」に続けてテキストを記述します。「[]」内に「x」があるとチェックが入ります。

- [ ] テキスト
- [x] テキスト

線

「***」や「ｰｰｰ」を記述すると線を引くことができます。

***
またはこちら
---

表

表は「|」で表示できます。

1行目をヘッダ、2行目を揃え位置（左寄せ、右寄せ、センタリング）になるようにします。

|左寄せ|センタリング|右寄せ|
|:-|:-:|-:|
|あいうえお|かきくけこ|さしすせそ|

コードブロック

「“`」で囲むことでコードブロックを表示できます。囲む際に言語を指定することで各言語のコードに色が付き、普通に書くよりも見やすく表示することができます。

マークダウンに対応していても、エディタによっては対応していない言語などがあります。

```  
コード  
```

# jsやphpなど言語の指定が可能
```ruby
def test
  if aaa == "aaa"
    test
  end
end
```

インラインコード

「`（バッククォート）」で囲みます。

テキスト`テキスト`テキスト

折りたたみ

クリックすることで中身を表示する折りたたみ表示もすることができます。

<details><summary>テキスト</summary><div>

テキスト
</div></details>

マーメイド記法について

マーメイド記法（Mermaid）はテキストでグラフやチャートを描ける記法で、フローチャートやシーケンス図、ガントチャートなどを表示することができます。より細かな指定もできますが、ここでは簡単に紹介します。

シーケンス図

sequenceDiagram
    actor ユーザー
    ユーザー ->> アプリケーション: 情報入力
    Note left of アプリケーション: 入力フォーム
    Note over アプリケーション: 情報確認
    アプリケーション -->> データベース: データ検索
    データベース ->> アプリケーション: 検索結果
    アプリケーション -->> ユーザー: 結果表示
ER図とは？書き方をサンプルコードでわかりやすく解説

フローチャート

graph TD
    A(データ入力) --> B[データ処理]
    B[データ処理] --> C{データチェック}
    C --> |条件1|D[処理1]
    C --> |条件2|E[処理2]
    C -.-> |不備あり|A
    D --> F[終了]
    E --> F[終了]

円グラフ

pie
    title 朝食に食べたもの
    "ご飯" : 26
    "パン" : 23
    "シリアル" : 10
    "食べていない" : 20
    "その他" : 5

クラス図

classDiagram
    class1 <|-- class2
    class1 <|-- class3
    class1 <|-- class4
    class class1{
        +int AAA
        +string BBB
        +CCC()
    }
    class class2{
      +int DDD
      -EEE()
    }
    class class3{
      +int FFF
      +GGG()
    }
    class class4{
      -int HHH
      -III()
    }

ガントチャート

gantt

    dateFormat  YYYY-MM-DD
    title ガントチャート

    section プロジェクト1
    作業1: a1, 2023-04-01, 20d
    作業2: a2, 2023-04-05, 10d
    作業3: a3, after a2, 5d

    section プロジェクト2
    作業A: active, b1, 2023-04-03, 7d
    作業B: b2, after b1, 9d
    作業C: done, b3, 2023-04-09, 5d

その他

マークダウン記法を使う場面

マークダウン記法はmermaidを使用しての仕様書やスケジュールなどの作成をすることができます。GithubのREADME.mdもマークダウンを使用して作成することができます。「.md」はマークダウンの拡張子です。

マークダウンファイルの変換

マークダウンファイルはpdf、html、png、jpegファイルへの変換も可能で、場面に合わせた資料を作成できます。代表的なツールとして、VSCodeの「Markdown PDF」という拡張機能があります。

最後に

マークダウンは学習コストが低く、手軽に様々な表現をすることができます。慣れていけば、より複雑な表現も可能となるので積極的に活用してみてください。

     

Otherカテゴリの最新記事