マークダウンチートシート

マークダウンプログラミング

使えそうなマークダウン記法を表にし,HTMLと書き方を比較しました。

やりたいことマークダウンHTML
見出し# 見出し<h1>見出し</h1>
順序なしリスト– リスト<ul><li>リスト</li></ul>
順序ありリスト1. リスト<ol><li>リスト</li></ol>
リンク[タイトル](URL)<a href="URL">タイトル</a>
改行改 行(スペース2回+Enter)改<br>行
段落段(Enter2回)落<p>段</p> <p>落</p>
引用>引用<blockquote><p>引用</p></blockquote>
インラインのコードインラインのコード<code>インラインのコード</code>
ブロックのコードブロックのコード<pre><code class="lang-html">ブロックのコード</code></pre>
画像の挿入![代替テキスト](URL "タイトル")<img src="URL" alt="代替テキスト" title="タイトル">
斜体*斜体*<em>斜体</em>
太字**太字**<strong>太字</strong>
訂正線~~訂正線~~<del>訂正線</del>
斜体+太字***斜体+太字***<strong><em>斜体+太字</em></strong>
水平線---<hr>
注釈テキスト[^1]
[^1]: 注釈内容
<p>テキスト<a href="注釈内容">^1</a></p>
文字色<font color="文字色">テキスト</font><font color="文字色">テキスト</font>
マークダウンのエスケープマークダウン記号<p>マークダウン記号</p>
折りたたみ<details><summary>
折りたたみ</summary><div>
– 折りたたみ1
– 折りたたみ2
– 折りたたみ3
</div></details>
<details><summary>
折りたたみ</summary>
<div><ul>
<li>折りたたみ1<ul>
<li>折りたたみ2</li>
<li>折りたたみ3</li>
</ul></li></ul>
</div></details>
テーブル列数x行数
| th左 | th中央 | th右 |
| :– | :-: | –: |
| td | td | td |
<table><thead><tr>
<th style="text-align:left">th左</th>
<th style="text-align:center">th中央</th>
<th style="text-align:right">th右</th>
</tr></thead>
<tbody><tr>
<td style="text-align:left">td</td>
<td style="text-align:center">td</td>
<td style="text-align:right">td</td>
</tr></tbody></table>

見出し

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

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

補足

先頭に#の数で文字の大きさを記述します。(1〜6まで)

リスト

番号なしリスト

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

  • リスト1
    • ネスト1
    • ネスト2
  • リスト2

番号ありリスト

1. リスト1
  1. ネスト1
  1. ネスト2
1. リスト2

  1. リスト1
    1. ネスト1
    2. ネスト2
  2. リスト2

補足

リスト は * リストでも入力できます
2.リストと入力すると2から始まります
リストはネストすることが可能です

[google](https://www.google.com/)

google

補足

何回もリンクを使い回すときに覚えておきたい小技

[google]:https://www.google.com/
[グーグル][google]
googleと入力するだけで、URLを入力しなくてすみます

改行

改 行(スペース2回+Enter)


段落

補足

改行を2回入力します

引用

>引用1
>>引用2
>>>引用3

引用1

引用2

引用3

補足

>の数ネストします

インラインのコード

インラインのコード

インラインのコード

ブロックのコード


ブロックの
コード

ブロックのコード

補足

コードは~~~コード~~~でも入力できます。
html
コード

と言語を入力したらオンラインエディタによってはシンタックスハイライトで記述します。
html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<p>
ブロックのコード
</p>
</body>
</html>

画像の挿入

<img src="URL" alt="代替テキスト" title="タイトル">

代替テキスト
##### 補足(サイズの変更)
width=”数値”を記述すればサイズの変更ができます。

<img width="数値(今回は200)" alt="代替テキスト" src="URL">

代替テキスト

斜体

*斜体*

斜体

太字

**太字**

太字

斜体+太字

***斜体+太字***

斜体+太字

補足

*アスタリスクは_アンダースコアでも入力できます。

訂正線

~~訂正線~~

訂正線

水平線

---


補足

—水平線は***アスタリスクでも___アンダースコアでも入力できます。

折りたたみ

折りたたみ
– 折りたたみ1
– 折りたたみ2
– 折りたたみ3

  • 折りたたみ1
    • 折りたたみ2
    • 折りたたみ3

テーブル

列数x行数
| th左 | th中央 | th右 |
| :-- | :-: | --: |
| td | td | td |

th左 th中央 th右
td td td

補足

左寄せ 「:–」
右寄せ 「–:」
中央寄せ 「:-:」

注釈

テキスト[^1]
[^1]: 注釈内容

テキスト^1

補足

注釈内容の前にスペースが必要です
[]内は数値でなくても同じ文字列なら同じ参照になります

文字色

<font color="Red">赤色</font>

赤色

マークダウンのエスケープ

マークダウン記号

マークダウン記号

コメント

タイトルとURLをコピーしました