Markdownの基本的な書き方チートシート

source-writeMarkdown-thumbnail
WEB / プログラミング / IT系

こんにちは! あますた(@amaguristar)です。

Markdownは何となく分かったけど、実際の書き方ってどんな感じ?」

そんな方の為にMarkdownの基本的な書き方をサクッと紹介。

「Markdownってなに?」って方は下記参照↓↓↓
>> https://fun.wazn.jp/info/753/

目次[ open / close ]
  1. Markdownで利用できる項目一覧
    1. 見出し
    2. 段落
    3. 文字装飾
    4. リスト
    5. 引用
    6. 水平線
    7. リンク
    8. 画像
    9. コード
    10. テーブル
  2. まとめ

動画でも紹介してます↓↓↓
>> https://youtu.be/e-EVg25bl_o

Markdownで利用できる項目一覧

Markdownで表現可能なリストはこちら。

  1. 見出し
  2. 段落
    • 改行
  3. 文字装飾
    • イタリック
    • 強調
    • 取り消し線
  4. リスト
  5. 引用
  6. 水平線
  7. リンク
  8. 画像
  9. コード
  10. テーブル

それぞれ、書き方は簡単。

注意!
Markdownは派生が色々とありますので、ものによっては書き方が若干違う可能性があります。今回はあくまで基本となる書き方を紹介。上記以外の表示が可能な派生Markdownもあります。

見出し

見出しはHTMLで言うところの「<h?>〜<h?>」タグに相当。hタグ同様1〜6まであります。

MarkdownHTML
#<h1>
##<h2>
###<h3>
####<h4>
#####<h5>
######<h6>

#の個数がhタグの数字を表します。

使用例
MarkdownHTML
# テスト1<h1>テスト1</h1>
### こんな感じになります<h3>こんな感じになります</h3>

実際に利用する時は#とテキストの間に半角スペースが必要です。

全角だと表示されません。もし表示されたとしても、バグの原因になる可能性がありますので、確実に半角を利用する様にしましょう。

段落

段落は空行1つで表現します。

MarkdownHTML
テストテスト

テストテスト
<p>テストテスト</p>
<p>テストテスト</p>
利用例

Markdown

テストテストテスト

テストテストテスト

テストテストテスト

HTML

<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
改行するには?

Markdownは文章を単純に改行するとHTMLに変換時、文章を詰めて表示します(下記例参照)。

MarkdownHTML
改行テスト改行
テスト
<p>改行テスト改行テスト</p>

その為、「ここは改行ですよ」と宣言する必要があります。

段落内で改行する場合は、半角スペースを2つ連続で入力

MarkdownHTML
改行テスト改行
テスト
<p>改行テスト改行テスト</p>
改行テスト改行␣␣
テスト
<p>改行テスト改行<br>テスト</p>

注意!
上記例では、半角スペースを分かりやすくする為「␣」で表示してます。同様に改行は「」で表しています。

注意!
スペースはあくまで半角です。全角を利用すると、表示されたとしてもバグの原因になるので使わないで下さい

文字装飾

文字の装飾は下記3つが可能。

  • イタリック
  • 強調
  • 取り消し

それぞれの表示をまとめると、

装飾MarkdownHTML表示
イタリック*テスト*<em>テスト</em>テスト
強調**テスト**<strong>テスト</strong>テスト
取り消し~~テスト~~<del>テスト</del>テスト

という感じ。

中には「強調した箇所を斜体にしたい」って時もあると思いますが、そんな時は、

装飾MarkdownHTML表示
強調とイタリック***テスト***<strong><em>テスト</em></strong>テスト

と、「*」を3つで囲めば「強調+イタリック」で表示されます。

ちなみに、「*」の代わりに「_」で囲んでも同じ意味になります。

MarkdownHTML表示
__テスト__<strong>テスト</strong>テスト

リスト

リストの表示も簡単です。「-」、「+」、「*」のいずれかの後にスペースを開けて文字を書くとリストになります。

注意!
リストの上下に空行がないと正しく表示されません

MarkdownHTML表示
– テスト1
– テスト2
– テスト3
<ul>
<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
</ul>
  • テスト1
  • テスト2
  • テスト3

上記例では「-」を使用してますが、「+」でも「*」でも同じ表示になります。

数字付きのリストにしたい場合は、「-」の部分を「数字」 +「.」で設定可能。

MarkdownHTML表示
1. テスト1
2. テスト2
3. テスト3
<ol>
<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
</ol>
  1. テスト1
  2. テスト2
  3. テスト3

ちなみに、最初の数字は好きな数字からスタート可能。

MarkdownHTML表示
5. テスト1
6. てすと2
7. てすと3
<ol start='5'>
<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
</ol>
  1. テスト1
  2. テスト2
  3. テスト3

仮に「5」からスタートした場合、上記の様に変換されます。

引用

文章の引用は段落の初めに「>」を書きます。

Markdown

> 引用テスト1
> 引用テスト2
> 引用テスト3

表示

引用テスト1
引用テスト2
引用テスト3

水平線

下記のどれでも水平線が表示されます。

* * *
***
*****
- - -
---------------------------------------

表示される水平線↓


リンク

[リンクテキスト](リンク先url)

上記の様に[]の中にリンクとして表示するテキストを入力。()内にリンク先を記述します。

MarkdownHTML表示
[リンクテキスト](https://fun.wazn.jp)<a href="https://fun.wazn.jp">リンクテキスト</a>リンクテキスト

当然、文中にも挿入可能です。

Markdown

テストテスト[リンクテキスト](https://fun.wazn.jp)テストテスト

表示

テストテストリンクテキストテストテスト

画像

画像の挿入も簡単。ほとんどリンクと書き方は同じです。

![代替テキスト](画像url)

上記を見ると分かる様にリンクの前に「!」を追加すると画像を表示します。

[]内には画像が表示されなかった時に代わりに表示するテキストを入力。

Markdown

![logo-item](https://fun.wazn.jp/wp-content/uploads/2021/06/cropped-icon.png)

表示

logo-item

コード

文章ないでコードを表示したい時は、「`」で囲めば、囲んだ内容がそのまま表示されます。

Markdown表示
テスト*テスト*テストテストテストテスト
`テスト*テスト*テスト`テスト*テスト*テスト

エスケープ文字を使わなくても良いので楽に書くことができます。

エスケープ文字の詳細は↓↓↓
>> https://amamemo.com/memo/2770

プログラムなど、そのままコードを載せたい場合は、始まりと終わりを「```」で囲めば全てそのまま表示されます。

POINT!
「```」で囲まれた部分はHTMLの<pre>〜</pre>と同じ意味

Markdown

```
#include <stdio.h>

int main()
{

   return 0;
}
```

表示

#include <stdio.h>

int main()
{

   return 0;
}

テーブル

簡単なテーブルもMarkdownで表示可能。これまでの記事中で何度かテーブルを表示してますが、それもMarkdownで書いてます。例を挙げると、

装飾MarkdownHTML表示
強調とイタリック***テスト***<strong><em>テスト</em></strong>テスト

このテーブルをMarkdownで表すと、

|装飾|Markdown|HTML|表示|
|:--|:--|:--|:--|
|強調とイタリック|`***テスト***`|<string><em>テスト</em></string>|***テスト***|

と書いてます。

2段目の|:--はテキストの表示位置をあわらしています。

左寄せ中央右寄せ
:--:-:--:
左寄せ中央右寄せ

ちなみに、見た目を整える為に

| 装飾 |Markdown|HTML|表示|
|:------|:------------|:------|:----|
|テスト| テスト       |テスト |テスト|
|テスト| テスト       |テスト |テスト|
|テスト| テスト       |テスト |テスト|
|テスト| テスト       |テスト |テスト|

と書いても表示されます。

装飾MarkdownHTML表示
テストテストテストテスト
テストテストテストテスト
テストテストテストテスト
テストテストテストテスト

まとめ

Markdownの基本的な書き方をサクッと紹介させて頂きました。

Markdownは多くの派生がありますが、今回紹介した書き方がベースです。これさえ押さえておけば、書き方が少し違ったとしてもすぐに対応可能。

Markdown対応のサイトは、使った方が書くことに集中できるのでおすすめです。時間を費やすなら中身に力を入れましょう。

また、思い通りの表示にならない時は下記理由が考えられます。

  • 半角と全角を間違えてる
  • 段落毎の空行の入れ忘れ
  • 文中の改行が反映されない場合は、半角スペース2つの入れ忘れ
  • 単純にパーサーの仕様

パーサーについては前回の説明を確認して下さい(下記にリンクを貼っておきます)。

パーサーの説明は↓↓↓
>> https://fun.wazn.jp/info/753/

良くあるのが、半角と全角の間違いです(スペースにも半角と全角があります)。スペースの半角と全角は分かりづらいので、スペースや改行を表示する機能の搭載されたエディターを使うと少し楽になると思います。

それでも表示がうまくいかないって方は、あまり根を詰めずにその部分はサイトで修正した方が早い場合もあります。パーサーの仕様上表示できなかったり、特別な書き方に変更されてたりする場合があります。

Markdownはあくまで記事を書くための手段です。中身に集中して、時間がある時に確認するのが効率的。Markdownを使うのが目的にならない様にしましょう。

動画でも紹介してます↓↓↓
>> https://youtu.be/e-EVg25bl_o

あますた

935 views

電気工学科卒の元プログラマの現飲食店オーナー。間に不動産管理、営業等も経験。ここでは、自分の経験とお客様に聞いた話を基に、役立つ情報を発信していこうと思いま...

プロフィール

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA


ABOUT

”わくわく”や”驚き”等、『心の栄養』を与えられる、『楽しい』でつながるWebメディアを目指します。
ABOUT

最新記事